UI System Initializer

Use this skill before generating screens, components, or visual polish. Its job is to establish the smallest useful design system foundation so agents and humans stop inventing colors, spacing, and type styles one component at a time.

Process

1. Identify the target environment: codebase, Figma/design file, or both.
2. Determine whether a design system already exists. If it does, inventory the existing tokens instead of replacing them.
3. Define a minimal semantic color system: background, foreground, muted, muted foreground, border, primary, primary foreground, destructive, success, warning, card, popover, sidebar, and accent tokens only when needed.
4. Define typography defaults: sans and mono font stacks, fluid text scale, semantic font weights, and line-height tokens.
5. Define a 4px-based spacing and sizing scale for padding, margin, gap, touch targets, and layout rhythm.
6. Define radius, border, shadow, and focus-ring tokens.
7. Establish light and dark mode from the start, preferably with OKLCH values and complete token coverage in both themes.
8. Specify where tokens live: globals.css, Tailwind @theme, tailwind.config.ts, Figma variables, or a shared token source.
9. Output implementation-ready tokens plus rules for how future UI should consume them.

Output format