SkillHub ClubDesign ProductFrontendDesigner

variant-consistency-checker

Checks UI components against design system specs to find variant mismatches, missing props, deprecated usage, and invalid combinations. Useful for teams enforcing design consistency across large codebases.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

Hot score

Updated

March 20, 2026

Overall rating

A7.7

Composite score

4.7

Best-practice grade

S96.0

Install command

npx @skill-hub/cli install cantagestudio-cosmicatlaspacker-variant-consistency-checker

design-systemcode-validationcomponent-auditui-consistency

Repository

CANTAGESTUDIO/CosmicAtlasPacker

Skill path: .factory/skills/variant-consistency-checker

Open repository

Best for

Primary workflow: Design Product.

Technical facets: Frontend, Designer.

Target audience: Frontend developers and design system maintainers working on large React/JSX codebases.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: CANTAGESTUDIO.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install variant-consistency-checker into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/CANTAGESTUDIO/CosmicAtlasPacker before adding variant-consistency-checker to shared team environments
Use variant-consistency-checker for frontend workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw 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

```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
```