design-system-init

To generate a design system with tokens and Tailwind config extensions, provide a brand brief to this skill. It automates the creation of colors, typography, and spacing tokens, exporting a ready-to-use project structure with CSS custom properties and dark mode support.

Yes, you can build UI primitives like Button, Input, and Card automatically with cva and Tailwind. The skill scaffolds production-ready components, ensuring consistent styling and behavior across your frontend project.

The best way to set up dark mode readiness is by generating CSS custom properties and Tailwind config extensions from brand inputs. This skill validates tokens against design-pattern references to ensure production-grade dark mode support.

Yes, the design system generator includes spacing and typography scales, along with colors, radius, and shadows. These tokens are driven directly by your brand brief to maintain visual consistency across the application.

To start a new project with a complete design system in hours, choose a design direction or provide a brand brief, then run the skill. It outputs a cohesive structure of tokens, themes, and UI primitives, replacing days of manual setup.

The generated design system scaffolding includes UI primitives such as Button, Input, Badge, Avatar, Card, and Skeleton. These components are built using cva and are ready for production use immediately after generation.