Design System Enforcer
Replace hardcoded UI values with design tokens automatically
What You Can Do
Analyze your entire codebase to identify hardcoded design values (colors, typography, spacing) that violate design system compliance. Claude generates targeted refactoring suggestions and automated replacements that map hardcoded values to your design token system. You maintain a single source of truth for your UI, making brand updates and scaling design changes seamless across all components.
Features
Example Output
Input: Analyze a button component file
Output:
COMPLIANCE AUDIT RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- ❌ VIOLATIONS DETECTED (5):
• background: #3B82F6 → should be: --color-primary-500
• padding: 12px 16px → should be: --spacing-3 --spacing-4
• font-size: 14px → should be: --font-size-sm
• border-radius: 6px → should be: --radius-md
• box-shadow: 0 2px 4px rgba(0,0,0,0.1) → should be: --shadow-sm
- ✅ REFACTORED CODE:
btn {
background: var(--color-primary-500);
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-sm);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
- 📊 COMPLIANCE: 0% → 100% (5 tokens applied)
What's Included
- SKILL.md instruction file for Design System Enforcer:
- Codebase scanner template for detecting hardcoded values in CSS/Tailwind/SCSS:
- Design token mapping framework linking hardcoded values to your system:
- Refactoring script generator for batch-replacing values across files:
- Compliance audit checklist to track design system adherence:
- Token library inventory worksheet documenting all design values:
Who It's For
- Design System Managers — enforce consistent token usage across teams and codebases
- Frontend Engineers — refactor legacy code to comply with design systems
- Design Leads — audit UI implementation for brand compliance
- Technical Leads — ensure standardized spacing, typography, and color usage
- Component Library Maintainers — keep design systems clean and audit-ready
Best For
- Detecting and replacing hardcoded color values in stylesheets
- Refactoring legacy codebases to use design tokens
- Generating design system compliance audits and reports
- Mapping undocumented values to formal design token systems
- Batch-replacing spacing, typography, and color across projects
- Identifying gaps between actual UI implementation and design specs
You might also like
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv
This skill helps you navigate complex Free Trade Zone regulations and tariff rules with confidence. You can verify product classifications, calculate accurate duties and landed costs, assess regulatory compliance, and prepare audit-ready documentation. Get instant guidance on trade agreements, import/export scenarios, and compliance risks without manual research.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
Diagnose and fix performance bottlenecks across your entire stack. Measure Core Web Vitals against 2026 standards, analyze bundle size bloat, identify unused dependencies, and optimize rendering strategies and caching. You'll receive specific code changes, configuration tweaks, and architecture recommendations tailored to your framework.
You can create professional presentations in multiple modes—from quick lightweight prototypes to fully referenced decks with visualization planning. The skill guides you through a serial pipeline that normalizes source material, detects your input mode (quick, basic, or advanced), compiles your deck structure, and produces either self-contained HTML or exportable PPTX formats. You maintain control at each gate with clear confirmation points before advancing to the next phase.
by russell-cell
This skill helps you navigate Foreign Trade Zone regulations by automating compliance audits, generating required documentation, and verifying import-export procedures. You'll receive detailed compliance checklists, tariff classification guidance, and ready-to-use documentation templates that meet CBP requirements, reducing errors and audit risk.
Transform your carrier relationships with structured performance analysis and strategic negotiations. You'll evaluate carrier metrics across cost, service quality, and reliability to build scorecards that drive informed decisions on contract renewals, price optimization, and expansion opportunities. This skill prepares rate negotiation strategies, identifies dispute root causes, and recommends retention or exit decisions backed by quantitative data.
Upload multiple partial LTL shipments and receive data-driven consolidation recommendations with precise margin calculations. This skill analyzes your shipment characteristics against current market rates to identify cost-saving opportunities and prioritizes consolidation scenarios by profitability impact. Get actionable rate recommendations that balance cost reduction with service commitments.