Extract reusable UI components, design tokens, and interaction patterns from codebases.
npx skills add https://github.com/SL-A-SH/my-portfolio --skill extract-sl-a-sh
Please help me install this Agent Skill. Skill: extract Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/extract Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill extract-sl-a-sh
Identifies duplicated UI implementations, hard-coded styling values, and inconsistent component variations, then consolidates them into reusable components, design tokens, and documented patterns to reduce maintenance, improve consistency, and speed up development.
Run the extract skill on the target UI directory (for example, src/components) and return a prioritized list of components to create, tokens to extract, and a step-by-step migration plan.
High-intent search queries and answers about installing and using this skill.
To extract reusable UI components, scan your target UI directory to locate repeated patterns, hard-coded values, and inconsistent implementations, then consolidate them into shared components with clear props, accessibility, and semantic design tokens.
Consolidating duplicated frontend UI patterns involves identifying repeated component variations and hard-coded styling values, refining them into a single component API with sensible defaults, and generating a prioritized migration plan to replace existing instances.
Creating a migration plan for refactoring hard-coded values produces a prioritized path with search-and-replace guidance, tests to validate visual parity, and documentation updates to ensure a smooth transition to semantic design tokens.
Yes, you can apply automated component extraction to frontend repositories and component libraries to find inconsistent UI implementations, duplicated layouts, and hard-coded values across different pages and modules.
Yes, component extraction produces reusable component implementations complete with documentation, usage examples, accessible behavior definitions, and a clear set of props for your shared library.
jpoutrinDetect hard-coded values and generate design system component structures.
AkaraChenExtract reusable UI patterns, components, and design tokens from design systems.
Higashi-KotaBuild accessible React UI components with design tokens and ARIA patterns.
TheCardGoatExtract reusable UI patterns and consolidate duplicated components into a design system.
