Frontend Design

Read the user's frontend requirements: a component, page, application, or interface to build. Note context about purpose, audience, or technical constraints.

Context Detection

Before designing, assess the existing design environment. Count design signals in the project: design tokens/CSS variables, component library (shadcn, MUI, Ant), CSS framework config (Tailwind, styled-components), font imports, color system, animation patterns, spacing scale.

• 4+ signals = Existing system. Match it. Do not impose new aesthetics -- extend what's there.
• 1-3 signals = Partial system. Blend: respect existing choices, fill gaps with this skill's guidance.
• 0 signals = Greenfield. Apply the full Design Philosophy below.

When in doubt, check package.json, tailwind.config.*, global CSS files, and existing components before deciding.

Design Philosophy (Write First, Code Second)

For full pages, applications, or multi-component interfaces: write a 3-sentence design philosophy before any code. This forces a coherent aesthetic direction and prevents generic output.

1. Sentence 1 -- Intent: What emotional response should this interface provoke? (Not "clean and modern" -- that's every AI default. Be specific: "controlled tension between density and breathing room" or "the quiet confidence of a well-bound book.")