Bootstrap and audit a Tailwind v4 design system with shadcn components.
npx skills add https://github.com/Levezze/devkit --skill design-system-levezze
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/Levezze/devkit/tree/main/skills/design-system Command: npx skills add https://github.com/Levezze/devkit --skill design-system-levezze
It prevents design drift and fragmented UI styling by centralizing tokens, utilities, and component families into one auditable design system.
globals.css (Tailwind v4 @theme inline + semantic tokens for typography, radii, elevation, and colors).extendTailwindMerge configuration so custom semantic utilities compose safely (e.g., font-size and interactive utilities).ActionCard) with consistent hover/interactive recipes and slot-based composition./mock pages (including a theme token catalog) and a theme-preview area so users can validate look & feel without touching production pages.Use the design-system skill to bootstrap a centralized Tailwind v4 + shadcn design system for your Next.js app, writing the required tokens, utilities, components, and mock catalog to your repository.
High-intent search queries and answers about installing and using this skill.
Preventing design drift in a Tailwind v4 and shadcn component library requires centralizing styling tokens, semantic utilities, and component families into an auditable system with interactive drift detection and mock catalog visual verification.
Bootstrapping a centralized design system for Next.js App Router scaffolds a tokenized `globals.css` using `@theme inline`, generates safe `extendTailwindMerge` class groups, and writes opinionated typography, radii, and shadows directly into your repository.
The best way to audit design token inconsistencies in a React UI is to detect missing tokens, hover inconsistencies, and documentation gaps, then generate an approval-gated fix workflow that writes a `.design-system-audit.md` file without silent auto-fixes.
Yes, you can use shadcn primitives with custom semantic utilities without class conflicts by generating an `extendTailwindMerge` configuration that ensures custom semantic utilities like font-size and interactive states compose safely together.
To visually verify design tokens and shadcn components without touching production pages, you can create static `/mock` routes with component-only rendering and a theme-preview area to validate look and feel.
agusmdevConfigure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.
AlephantAIPlan and audit module implementations with gated approval and batched execution.
endorphin-aiDesign React frontend architectures for MEAN stack applications.
IsthisreelEnforce design tokens for color, typography, and spacing across UI components.