skills.rest
vanman2024
vanman2024COMMUNITY
Explore all skills by this author →
GitHub

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

10|4|Updated Oct 25, 2025
Search Tags:#typography#tailwind#design-system#shadcn#oklch
One-click install
npx skills add https://github.com/vanman2024/ai-dev-marketplace --skill design-system-enforcement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-enforcement
Source: https://github.com/vanman2024/ai-dev-marketplace/tree/main/plugins/nextjs-frontend/skills/design-system-enforcement
Command: npx skills add https://github.com/vanman2024/ai-dev-marketplace --skill design-system-enforcement

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, and includes scripts (resource) components.

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.

Frequently Asked Questions about design-system-enforcement

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce a consistent design system across Next.js projects?▼

Enforce design-system compliance by running the setup script, which generates project-specific governance documentation and applies typography, spacing, color, and component rules during initialization and UI code generation.

Can I use shadcn/ui with Tailwind v4 and maintain design consistency?▼

Yes. This Skill integrates shadcn/ui with Tailwind v4 to enforce 4 typography sizes, 2 font weights, 8pt grid spacing, OKLCH color variables, and the 60/30/10 color rule across all components.

What design-system rules does this enforce for Next.js apps?▼

It enforces typography (4 sizes, 2 weights), 8pt grid spacing, 60/30/10 color distribution, OKLCH color variables, shadcn/ui component standards, and accessibility checks before UI generation.

Do I need to manually apply design-system rules to every component?▼

No. Pre-generation validation automatically enforces design-system adherence, ensuring typography, spacing, color, and shadcn/ui usage comply across pages and UI elements without manual intervention.

How does the 60/30/10 color rule work in this design system?▼

The 60/30/10 rule balances color usage by designating 60% dominant color, 30% secondary, and 10% accent, enforced through OKLCH color variables integrated with Tailwind v4 for consistent color distribution.

Related Skills

Explore More Design & Creative Skills→
BartunekBartunek

setup

Automate NanoClaw installation and configuration via bash nanoclaw.sh.

Community
Basic
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
tenequmtenequm
32

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic