What problem does it solve? Building a design system by hand often leads to inconsistent colors, hard-coded hex values scattered across components, and dark mode implementations that flash or break on server-rendered pages. This Skill produces a complete, layered token architecture so every color, spacing value, and shadow traces back to a single source of truth. ## Core Features & Use Cases - Three-Layer Token Architecture: Generates primitive, semantic, and component token layers as CSS custom properties, enforcing the rule that components never reference raw hex values. - Tailwind and shadcn/ui Integration: Produces a complete tailwind.config.ts mapping semantic tokens to Tailwind utilities, plus a globals.css mapping for shadcn/ui's expected CSS variables. - Dark Mode Without Flash: Implements a cookie-based data-theme strategy for Next.js that renders the correct theme on the server, avoiding the flash caused by prefers-color-scheme alone. - Use Case: A developer starting a fintech dashboard asks for a design system; the Skill outputs primitives.css, tokens.css with light and dark semantic tokens, a Tailwind v3 config, and a theme toggle hook, all passing contrast and consistency quality gates. ## Quick Start Ask the AI to design a token system for your app with Tailwind and dark mode support, mentioning your brand color and framework.
