---
name: frontend-design
description: "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when asked to build web components, pages, dashboards, landing pages, React components, HTML/CSS layouts, or when styling/beautifying any web UI. Generates creative, polished code that avoids generic AI aesthetics."
user-invocable: true
metadata:
  { "openclaw": { "emoji": "🎨" } }
---

# Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

---

## When to Use

Use this skill when Brent asks to:
- Build a web component, page, or full application
- Create a landing page, dashboard, or UI layout
- Style or beautify an existing interface
- Generate HTML/CSS/JS, React, or Vue output for any web context

---

## Workflow

### Step 1 — Understand the Context

Before writing a line of code, think through:
- **Purpose:** What problem does this interface solve? Who uses it?
- **Tone:** Commit to a specific aesthetic direction (see options below).
- **Constraints:** Framework, browser targets, accessibility requirements, ClassicsLens branding if applicable.
- **Deliverable:** Where does this output go? (inline artifact, pCloud file, ClassicsLens repo, standalone HTML)

### Step 2 — Choose a Bold Aesthetic Direction

Pick a clear conceptual direction and execute it with precision. Options include:
- Brutally minimal
- Maximalist / editorial
- Retro-futuristic
- Organic / natural
- Luxury / refined
- Playful / toy-like
- Brutalist / raw
- Art deco / geometric
- Soft / pastel
- Industrial / utilitarian

**CRITICAL:** Intentionality matters more than intensity. Bold maximalism and refined minimalism both work — the key is committing fully. No design should converge on common choices.

### Step 3 — Design Principles

**Typography**
- Choose fonts that are beautiful, unique, and characterful. Avoid Inter, Roboto, Arial, system fonts.
- Pair a distinctive display font with a refined body font.
- Google Fonts and Bunny Fonts are available via CDN.

**Color & Theme**
- Commit to a cohesive palette. Use CSS variables for consistency.
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Vary between light and dark themes across generations — never default to the same palette.

**Motion**
- Use animations for micro-interactions and high-impact moments.
- CSS-only for plain HTML. Use Motion library for React when available.
- One well-orchestrated page load with staggered reveals creates more delight than scattered animations.
- Scroll-triggered reveals and hover states that surprise.

**Spatial Composition**
- Unexpected layouts: asymmetry, overlap, diagonal flow, grid-breaking elements.
- Generous negative space OR controlled density — not the middle-ground mush.

**Backgrounds & Visual Details**
- Create atmosphere and depth. Avoid flat solid colors as default.
- Tools: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

### Step 4 — Implement

Write production-grade, functional code:
- HTML/CSS/JS (vanilla) for standalone pages and artifacts
- React/JSX for component work in ClassicsLens (`rutgersguy/classicslens`)
- Include all styles inline or in `<style>` blocks for portability unless the project uses an existing stylesheet

Match implementation complexity to the aesthetic vision:
- Maximalist designs need elaborate code with extensive animations and effects.
- Minimalist designs need restraint, precision, and careful attention to spacing and typography.

### Step 5 — Deliver

**Inline artifact** (default): Output the full code in a code block so Brent can copy/paste or preview immediately.

**File to pCloud**: If Brent says to save it — use the pCloud skill (`skills/pcloud/SKILL.md`) to write the file.

**ClassicsLens repo**: If it's a component for the app, write it to the appropriate path in `rutgersguy/classicslens` and commit.

---

## What NOT to Do

- No purple-gradient-on-white defaults
- No Inter/Roboto/Arial unless explicitly requested
- No predictable card-grid-button layouts without a creative reason
- No half-measures — if a direction is chosen, execute it fully
- Do not spawn a subagent for frontend-design work that uses `gog` or pCloud credentials — run inline

---

## Reference: ClassicsLens Design Context

If building for ClassicsLens, note:
- Audience: MA Classics students, self-learners, instructors
- Tone should feel scholarly but accessible — not academic-dry, not startup-flashy
- Greek and Latin text rendering must be clean and legible (use a serif with good polytonic Greek support, e.g. GFS Didot, Cardo, or Noto Serif)
- Existing stack: see `rutgersguy/classicslens` repo for current component patterns