Claude Code Plugins

Community-maintained marketplace

Feedback

variant-consistency-checker

@CANTAGESTUDIO/CosmicAtlasPacker
1
0

[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 Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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