variant-consistency-checker

【设计系统】验证UI组件使用是否符合设计系统规范。当（1）检查组件变体/尺寸是否有效、（2）验证所需props是否存在、（3）检测已弃用的组件使用、（4）查找不允许的props组合、（5）用户要求‘检查组件使用’、‘验证变体’、‘审计设计系统合规性’或‘查找组件不一致’时使用。

SKILL.md

--- frontmatter

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