skills.rest
CANTAGESTUDIO
CANTAGESTUDIOCOMMUNITY
Explore all skills by this author →
GitHub

variant-consistency-checker

Validate UI component usage against design system specifications.

3|Updated Dec 22, 2025
Search Tags:#consistency#validation#components#design-system#variants
One-click install
npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill variant-consistency-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: variant-consistency-checker
Source: https://github.com/CANTAGESTUDIO/CosmicAtlasPacker/tree/main/.claude/skills/variant-consistency-checker
Command: npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill variant-consistency-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures UI component usage and variants conform to design system specifications.

Core Features & Use Cases

  • Unknown Variant/Size Detection: Flags variants or sizes not in spec.
  • Missing Prop & Deprecated Usage: Detects missing props and deprecated components.
  • Output: Clear guidance on violations and fixes.

Quick Start

Run a spec check against source to identify variant inconsistencies.

Frequently Asked Questions about variant-consistency-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate component variants against design system specs?▼

This tool validates component usage by parsing design-system specifications and analyzing source code to flag variant inconsistencies, missing props, deprecated components, and disallowed prop combinations, producing structured issue reports for remediation.

What types of component violations does design system validation catch?▼

Validation detects unknown variants or sizes, missing required props, deprecated component usage, disallowed prop combinations, unknown components, and unknown props—all compared against your design-system specification.

Can I use this to audit React component usage across my codebase?▼

Yes. The tool analyzes React/JSX source code and design-system specs to identify compliance violations, enabling codebase-wide audits that flag components not conforming to your design specifications.

How do I integrate design system validation into code reviews?▼

Run a spec check against your source to identify variant and component inconsistencies before review, generating clear guidance on violations and required fixes for faster remediation.

What setup is needed before running component validation?▼

Provide your design-system specification document and source code containing component usage. The tool parses both to detect mismatches, requiring no external dependencies to execute validation checks.

Related Skills

Explore More Design & Creative Skills→
murphytruemanmurphytrueman
155

metadata-schema-generator

Generate JSON metadata schemas encoding component props, rules, and accessibility contracts.

Community
Advanced
Montte-erpMontte-erp
6

wcag-audit-patterns

Audit web pages for WCAG 2.2 violations with automated and manual checks.

Official
Intermediate
jvchiappinijvchiappini

design-studio-render

Generate JSX designs for UI components and layouts using a JSX DSL.

Community
Advanced
kaeligkaelig
7

design-system-guardian

Validate UI component usage against a design system manifest.

Community
Advanced