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 diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
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.
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
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.
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.
Streamline specialized freight qualification by instantly evaluating hazmat compliance requirements, cross-checking carrier credentials against DOT and FMCSA regulations, and surfacing regulatory risks before you quote loads. This skill eliminates manual compliance research and reduces liability exposure by systematically identifying requirements, exemptions, and carrier gaps that could delay shipments or trigger fines.
This skill automates compliance screening for freight shipments and trade transactions by checking party details and destinations against international sanctions databases, assessing regulatory risk across export controls and tariff classifications, and generating audit documentation with specific regulatory citations. You provide shipment data, and Claude identifies compliance violations, flags restricted parties and destinations, classifies export control risks, and produces defensible audit trails for regulatory review.
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