Extracts and consolidates reusable UI components, design tokens, and patterns into a systematic design system.
This skill automates the process of identifying repeated UI patterns, hard-coded styles, and inconsistent variations within a codebase to centralize them into a robust design system. It helps developers discover extraction opportunities, plan the migration to shared libraries, and enrich components with accessibility features and proper documentation. By systematically replacing fragmented code with standardized components and semantic design tokens, it ensures visual consistency, reduces technical debt, and accelerates the scaling of frontend projects.
Key Features
01Automated discovery of repeated UI patterns and hard-coded design values
02Enrichment of components with ARIA accessibility, TypeScript types, and documentation
030 GitHub stars
04Conversion of literal CSS values into semantic, themeable design tokens
05Comprehensive migration planning to replace legacy implementations with shared versions
06Systematic extraction of UI elements into reusable, prop-driven components
Use Cases
01Refactoring a rapid prototype into a production-ready application with a centralized component library
02Modernizing a legacy codebase by replacing magic numbers and hard-coded colors with tokens
03Unifying inconsistent UI elements across multiple pages into a single, cohesive design system
