component-analysis

What problem does it solve?

Inconsistent patterns across UI component groups lead to a fragmented user experience, increased development time, and a difficult-to-maintain design system. This Skill identifies and reports these deviations, providing a clear path to standardization and improved consistency.

Core Features & Use Cases

• Group-Level Analysis: Inventories components within 12 predefined groups (e.g., Button, Form, Overlay) and extracts common patterns.
• Pattern Extraction & Comparison: Identifies common props (e.g., variant, size), token usage, animation patterns, and compares their implementations across components.
• Consistency Scoring: Provides a quantitative score for each group's uniformity and highlights specific inconsistencies with detailed examples.
• Cross-Group Pattern Check: Evaluates the uniformity of critical patterns (e.g., variant naming, size values, disabled state, focus indicators) across all 12 component groups.
• Use Case: Audit your entire component library to find all instances where the size prop uses inconsistent naming (e.g., small vs sm) and generate a prioritized action plan for standardization.

Quick Start

Use the component-analysis skill to evaluate consistency across all 12 component groups in the design system.