design-system-enforcement
CommunityEnforce a consistent design system across Next.js apps.
Authorvanman2024
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill enforces a comprehensive design system for Next.js projects using shadcn/ui and Tailwind v4, detailing typography, spacing, colors, and component usage.
Core Features & Use Cases
- Typography Rules - 4 sizes, 2 weights
- 8pt Grid - strict spacing guidelines
- 60/30/10 Color Rule - balanced color usage
- shadcn/ui Integration - component-based UI with accessibility
- Design System Documentation - design-system.md for governance
Quick Start
Run: bash scripts/setup-design-system.sh to generate project-specific design-system.md and start applying guidelines.
Dependency Matrix
Required Modules
bash
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-enforcement Download link: https://github.com/vanman2024/ai-dev-marketplace/archive/main.zip#design-system-enforcement Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.