frontend-design

Files (2)

• SKILL.md
• openai.yaml · agents/

SKILL.md (first lines)

# Frontend Design Skill

Build distinctive, production-grade frontend interfaces. Implement real working
code with exceptional aesthetic attention.

## Design Thinking

Before coding, commit to a BOLD aesthetic direction:

- **Purpose/audience.** What problem does this interface solve?
- **Tone.** Pick a strong direction: brutally minimal, maximalist, retro-
  futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft
  pastel, industrial, etc. Use for inspiration but make it your own.
- **Differentiation.** What makes this UNFORGETTABLE?

Execute with precision. Bold maximalism and refined minimalism both work - the
key is intentionality.

## Aesthetics

- **Typography:** Distinctive, characterful fonts. NEVER generic (Arial, Inter,
  Roboto, system fonts). Pair a display font with a refined body font.
- **Color:** Cohesive palette via CSS variables. Dominant colors with sharp
  accents > timid, evenly-distributed palettes.
- **Motion:** CSS-first animations; Motion library for React. Focus on high-
  impact moments (staggered page-load reveals, surprising hover states).
- **Layout:** Asymmetry, overlap, diagonal flow, grid-breaking elements,
  generous negative space OR controlled density.
- **Atmosphere:** Gradient meshes, noise textures, geometric patterns, layered
  transparencies, dramatic shadows, decorative borders, grain overlays.

NEVER: overused fonts, cliche purple-on-white gradients, predictable layouts,
cookie-cutter components. No two designs should look the same. Vary themes,
fonts, aesthetics across generations.

Match implementation complexity to vision: maximalist needs elaborate code;
minimalist needs restraint and precision.

## Project Integration

When building for a specific project, also read the project's conventions skill
for tech stack, component patterns, and styling rules.

## Visual Verification

- Prove every perceptual result per **testing-principles** § Perceptual
  Requirements. Borders, focus rings, selection states, hover states, and
  animation end states all fall under it.
- Test light/dark modes through the same mechanism the application uses in
  production. With Tailwind v4, confirm generated utilities and theme variables
  actually respond at runtime before tuning colours or specificity.

From wtsi-hgi/agentskills, MIT.

More from wtsi-hgi/agentskills