frontend-design - SKILL.md Agent Skill

name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. license: Complete terms in LICENSE.txt

Frontend Design

Build distinctive, production-grade frontend components, pages, apps, and interfaces. Deliver real working code with strong visual direction, not generic templates.

Plays

references/aesthetic-direction.md: concept, typography, color, composition, motion, visual detail.
references/implementation.md: production frontend build rules and interaction polish.
references/qa.md: visual QA, responsive checks, and final signoff.

Workflow

Understand product purpose, user, domain, technical stack, and constraints.
Pick clear aesthetic direction before coding; read references/aesthetic-direction.md when visual direction is non-trivial.
Implement feature-complete controls and states using existing project framework/design system first.
Read references/implementation.md for layout, interaction, and asset rules when creating new UI surface.
Validate responsive fit, visual quality, and interaction behavior; read references/qa.md for checks.

Always

Use real assets or generated bitmap imagery for websites/apps where visuals matter.
Match existing code style and design conventions.
Make first screen the usable experience unless user explicitly asks for a landing page.
Build controls users expect, including empty/loading/error/disabled states when relevant.
Check text fit and avoid overlap on mobile and desktop.

Read only focused plays needed for current task.