What frameworks does this skill support?

It is specifically optimized for Next.js projects using shadcn/ui and Tailwind CSS v4.

Does it provide automated validation?

Yes, it includes scripts to validate spacing, typography, and color usage in your existing components to ensure they meet the design system standards.

Can I use custom font sizes?

No, the skill strictly enforces a limit of 4 font sizes and 2 font weights to ensure a clean, minimalist visual hierarchy.

How does it handle color distribution?

It enforces the 60/30/10 rule: 60% neutral background, 30% complementary foreground, and 10% accent color using the OKLCH color space.

Tailwind v4 Design System Enforcer

Name: Tailwind v4 Design System Enforcer
Author: vanman2024

byvanman2024

0•

设计工具

Enforces strict UI consistency and accessibility standards for Next.js projects using shadcn/ui and Tailwind v4.

This skill ensures visual harmony across web applications by programmatically enforcing a specific design token set, including a 4-size typography scale and an 8pt grid system. It acts as a mandatory guardrail for AI agents, preventing design drift by validating every generated component against the 60/30/10 color rule and OKLCH color specifications. Ideal for teams maintaining production-grade frontend standards, it includes setup and validation scripts to ensure that all UI code—whether human or AI-generated—remains accessible, consistent, and performant.

主要功能

01Mandatory 8pt grid system for spacing and layout

020 GitHub stars

03Automated 60/30/10 color distribution logic

04Integrated validation scripts for automated UI audits

05Strict typography enforcement (4 sizes, 2 weights)

06Tailwind v4 and OKLCH color space support

使用场景

01Maintaining visual consistency in large-scale Next.js applications

02Preventing design debt by restricting custom CSS and non-standard tokens

03Scaffolding accessible, design-compliant shadcn/ui components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vanman2024/ai-dev-marketplace design-system-enforcement

For use in Claude.ai and ChatGPT

Download Skill