Frontend Design

Guide creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. This skill covers the full lifecycle: detect what exists, plan the design, build with intention, and verify visually.

Authority Hierarchy

Every rule in this skill is a default, not a mandate.

1. Existing design system / codebase patterns -- highest priority, always respected
2. User's explicit instructions -- override skill defaults
3. Skill defaults -- apply in greenfield work or when the user asks for design guidance

When working in an existing codebase with established patterns, follow those patterns. When the user specifies a direction that contradicts a default, follow the user.

Workflow

Detect context -> Plan the design -> Build -> Verify visually