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 depr

variant

consistency

checker

SKILL.md.claude/skills/variant-consistency-checker

GitHub

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

Похожие навыки: design

add-uint-support

Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support fo...

skill-writer

Guide users through creating Agent Skills for Claude Code. Use when the user wants to create, write, author, or design a...

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to...