ReddRadar
Agent 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'.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/variant-consistency-checker
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?