| name | frontend-design |
| description | Build distinctive, production-grade web UI — components, pages, apps — with a bold committed aesthetic, avoiding generic AI slop. Use when generating or building frontend interfaces. Craft rules/motion values → web-design (web-animation-design); restrained polish → design-craft; repairing AI-generated UI → working-with-ai (ai-ui-direction); generative visuals → creative-coding. Triggers: landing page, hero, component, distinctive UI. |
Frontend Design
Mode: build. Implement the requested component, page, or app in the user's stack. Do not stop at a mood board, design critique, or code sketch.
Boundary: this skill owns new bold/distinctive web UI. For restrained polish use design-craft; for web craft rules or motion values use web-design; for diagnosis of UI already generated by AI use working-with-ai (ai-ui-direction); for procedural artwork use creative-coding. If bold and restrained themes are both plausible, present the choice instead of blending them.
Fast path: five decisions
- Purpose: identify the user, job, content, and technical/accessibility constraints.
- Concept: commit to one context-specific aesthetic idea and one memorable device. Avoid a collage of fashionable effects.
- System: define the type roles, color tokens, spacing/radius rules, composition, imagery, and interaction states before adding one-off decoration.
- Truth: make the hero or focal artifact demonstrate the real product mechanic with internally consistent data and behavior.
- Delivery: implement the complete experience, then inspect it at real size and under responsive, interaction, content, and accessibility stress.
The default anti-slop rule is contextual, not a universal font ban: reject unconsidered defaults, cliché purple gradients, massive shadows, predictable card grids, and arbitrary icon sets. A system font is acceptable when the artifact must be single-file and offline; otherwise prefer a distinctive licensed/open face that can actually ship.
Build contract
- Establish a short concept statement: audience/job → aesthetic direction → memorable device.
- Build on accessible standard controls; theme their visual layer rather than recreating behavior.
- Implement working code with the requested states and interactions. Match implementation complexity to the concept: maximalism may require more machinery; refined minimalism requires restraint and precision.
- Keep decorative motion finite and purposeful. Use the owning
web-design motion rules when exact values are needed.
- Return concept → implementation → verification. Name the files changed and the checks actually run.
Verification
Before claiming completion:
- Exercise the primary task and every requested interaction/state.
- Inspect the rendered result at target sizes; test narrow/wide containers, long or localized text, and user text scaling.
- Verify keyboard operation, visible focus, semantics, contrast, reduced motion, and overflow behavior.
- Confirm the focal demonstration is truthful and the console has no new errors.
- If visual inspection or browser execution is unavailable, state that limitation instead of claiming visual completion.
Routed depth
- Visual execution substrate: load references/visual-execution.md when the build needs SVG mechanics, font-source decisions, design-to-code fidelity, de-slop primitives, reference-derived taste, or field tactics.
- Source texture: load references/visual-field-notes.md only when provenance, original practitioner wording, named examples, or the evidence behind a disputed rule matters. It preserves the detailed material without putting it on the default decision path.
- Sources/gaps: references/sources.md maps provenance; references/coverage-gaps.md parks unsupported asset rules, fixtures, and anti-slop checks.
