Profile My skills Saved My plugins Edit profile Submit a skill

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'.

majiayu000 Updated 567 repo stars
Design & Media

File contents

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

majiayu000/claude-skill-registry-data/tree/main/data/variant-consistency-checker commit 678d6ac141

Browse category

Frequently asked questions

npx skillmds@latest add majiayu000/variant-consistency-checker