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
Rapidly verify shipments, parties, and destinations against multiple global sanctions lists including OFAC SDN, EU consolidated list, and UN designations. Generate compliance decisions with complete audit trails, risk assessments, and regulatory documentation that satisfies internal review and external audits without manual spreadsheet work.
Analyze inbound shipping documentation to verify receipt accuracy against purchase orders, bills of lading, and carrier documentation. Identify and categorize discrepancies like missing items, quantity variances, and damage claims. Generate exception reports and provide resolution guidance to streamline your receiving operations.
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.
Evaluate carrier performance across multiple dimensions including cost, reliability, and capacity utilization. Generate actionable recommendations to reduce logistics costs, improve service levels, and optimize carrier selection for your operations. Create comprehensive benchmarking reports that help you make informed decisions about carrier partnerships and resource allocation.
This skill transforms raw carrier data into actionable intelligence for your supply chain. You provide metrics like delivery times, costs, service levels, and volume data, and the skill delivers comprehensive performance analysis, cost-benefit comparisons, and strategic optimization recommendations. Use it to identify underperforming carriers, negotiate better contracts, and restructure your logistics network for maximum efficiency.
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
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.