component-analysis

Pattern analysis across UI components identifies deviations in props, tokens, naming, and state implementations. This Skill inventories components within 12 predefined groups, extracts common patterns, and scores consistency to reveal which components deviate from established standards and how to fix them.

Component analysis detects token usage discrepancies, variant naming inconsistencies (like `small` vs `sm`), size and animation mismatches, and props/state design misalignments. It evaluates the `disabled` state, `focus` indicators, and critical prop patterns across all 12 component groups.

Generate a standardization plan by running cross-component consistency analysis to compare implementations, identify deviations with detailed examples, and receive a prioritized action plan. The Skill provides a quantitative consistency score for each group and actionable fixes for each inconsistency.

Yes. Component analysis finds all instances where props use inconsistent naming across groups—for example, where the `size` prop uses `small` in one component but `sm` in another—and generates a prioritized standardization roadmap for alignment.

You need pnpm installed as a dependency and access to your component library organized by the 12 predefined groups (Button, Form, Overlay, and others). The Skill processes your components to inventory them and extract patterns for analysis.

Component analysis evaluates design system consistency including token usage, animation patterns, and prop implementations across frontend components. It works at the design-system level, analyzing patterns and consistency regardless of the underlying framework or token structure.