Extracts and consolidates reusable UI components, design tokens, and patterns into a centralized design system.
The extract skill helps developers maintain codebase consistency by identifying repeated UI patterns, hard-coded values, and inconsistent styles to transform them into reusable assets. It automates the process of discovering extraction opportunities, planning the migration, building accessible components with proper TypeScript support, and refactoring existing implementations to consume the new shared library. This tool is ideal for teams looking to scale their frontend architecture or clean up technical debt in their UI layer.
主な機能
01Automated pattern discovery to identify repeated UI elements and hard-coded values
02Accessible component generation with clear props APIs and variant support
03Integrated documentation generation for components and token usage guidelines
040 GitHub stars
05Systematic creation of design tokens for colors, spacing, and typography
06Streamlined migration workflows to replace legacy code with design system components
ユースケース
01Refactoring a fragmented frontend codebase with inconsistent UI styles and variants
02Migrating from hard-coded CSS values to a structured, themeable design token system
03Scaling a standalone project into a shared component library for multi-app environments
