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

- Skill: `majiayu000/variant-consistency-checker` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/variant-consistency-checker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/variant-consistency-checker/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/variant-consistency-checker

---


# Variant Consistency Checker

Validate UI component usage against design system specifications.

## Quick Start

```bash
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
```jsx
// Issues detected:
<Button variant="outline" size="xl" />
//       ↑ unknown-variant  ↑ unknown-size

<Button variant="primary" />
//       ↑ missing-prop: children
```