frontend-design

# 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.") 2. **Sentence 2 -- Signature**: What single visual choice makes this unmistakable? (A typeface, a color relationship, a spatial patt...