home/categories/frontend/vanman2024-ai-dev-marketplace-plugins-nextjs-frontend-skills-design-system-enforcement-skill-md
frontenddevelopment

design-system-enforcement

Mandatory design system guidelines for shadcn/ui with Tailwind v4. Enforces 4 font sizes, 2 weights, 8pt grid spacing, 60/30/10 color rule, OKLCH colors, and accessibility standards. Use when creating components, pages, or any UI elements. ALL agents MUST read and validate against design system before generating code.

vanman2024
maintainer
vanman2024
Updated 1/18/2026
Stars
0
Forks
0
quick start

Installation and usage

Mandatory design system guidelines for shadcn/ui with Tailwind v4. Enforces 4 font sizes, 2 weights, 8pt grid spacing, 60/30/10 color rule, OKLCH colors, and accessibility standards. Use when creating components, pages, or any UI elements. ALL agents MUST read and validate against design system before generating code.

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use design-system-enforcement