Design Foundation

Produce a working tokens file for this specific codebase — not a document about tokens. A token is a named design decision (--color-text-primary, --space-4); centralizing them is what makes every later design skill (layout, type, color, components) land consistently. Governing principle: extract before you invent — in an existing codebase, the token system should formalize the best of what's already there, so migration is renaming, not redesigning.

When to use / handoffs

• Use to create tokens from scratch or extract them from an existing codebase.
• If the user's pain is specifically color (palette, contrast, dark mode depth) → skills/frontend-design/color-system after the token skeleton exists.
• If specifically type (scale, fonts, readability) → skills/frontend-design/typography-system.
• If they want components built on tokens → skills/frontend-design/component-architecture next.
• For broad "where do I start" requests → skills/frontend-design/frontend-orchestrator.

Step 1 — Inspect the codebase

Before asking anything, gather evidence: