variant-consistency-checker
[Design System] Validate UI component usage against design system specifications. Use when (1) checking component variants/sizes are valid, (2) verifying required props are present, (3) detecting deprecated component usage, (4) finding disallowed prop combinations, (5) user asks to 'check component usage', 'validate variants', 'audit design system compliance', or 'find component inconsistencies'.
When & Why to Use This Skill
The Variant Consistency Checker is a specialized Claude skill designed to automate the validation of UI components against official design system specifications. It streamlines frontend development by identifying invalid variants, incorrect sizes, missing required props, and deprecated components, ensuring high-quality code and visual consistency across React and JSX projects.
Use Cases
- Design System Compliance Audit: Automatically scan your entire codebase to detect UI components that deviate from design specifications, ensuring a unified user experience.
- Automated Prop Validation: Identify missing required properties or disallowed prop combinations in React/JSX components to prevent runtime errors and UI regressions.
- Legacy Component Migration: Efficiently locate and flag deprecated components across large repositories to facilitate smooth transitions to updated design system versions.
- CI/CD Integration for UI Quality: Use as a pre-commit or build-step check to ensure that all UI changes adhere to the defined component variants and size constraints.
| name | variant-consistency-checker |
|---|---|
| description | "[Design System] Validate UI component usage against design system specifications. Use when (1) checking component variants/sizes are valid, (2) verifying required props are present, (3) detecting deprecated component usage, (4) finding disallowed prop combinations, (5) user asks to 'check component usage', 'validate variants', 'audit design system compliance', or 'find component inconsistencies'." |
Variant Consistency Checker
Validate UI component usage against design system specifications.
Quick Start
python3 scripts/check_variants.py --spec components-spec.yml --source src/
Issue Types
| Type | Description |
|---|---|
unknown-variant |
Variant not in spec |
unknown-size |
Size not in spec |
missing-prop |
Required prop absent |
deprecated |
Using deprecated component |
disallowed-combination |
Invalid prop combination |
unknown-component |
Component not in spec |
unknown-prop |
Prop not defined (strict mode) |
Detection Examples
React/JSX
// Issues detected:
<Button variant="outline" size="xl" />
// ↑ unknown-variant ↑ unknown-size
<Button variant="primary" />
// ↑ missing-prop: children