Extract reusable UI components, patterns, and design tokens from codebases.
npx skills add https://github.com/jcdiv47/cool-paper --skill extract-jcdiv47
Please help me install this Agent Skill. Skill: extract Source: https://github.com/jcdiv47/cool-paper/tree/main/.agents/skills/extract Command: npx skills add https://github.com/jcdiv47/cool-paper --skill extract-jcdiv47
Identifies duplicated UI implementations, hard-coded visual values, and inconsistent component variations across a codebase, and provides a plan to consolidate them into a coherent design system to improve consistency and maintainability.
Ask the extract skill to analyze the target directory and produce a prioritized extraction plan listing components to create, tokens to define, and a migration path.
High-intent search queries and answers about installing and using this skill.
To consolidate reusable UI components, you can analyze your codebase to detect repeated UI patterns and hard-coded visual values, then centralize them into a coherent design system. This process yields a stepwise migration plan and semantic design tokens.
Identifying duplicated UI implementations involves performing static analysis and pattern detection across your front-end codebase. This reveals inconsistent component variations and scattered visual values so you can standardize them into shared components.
Creating semantic design tokens from hard-coded values requires scanning your codebase to locate repeated visual properties. The extraction process proposes tokenization definitions and component API designs to replace scattered values.
Yes, the UI component extraction process includes accessibility checks. When proposing reusable components and clear props, the analysis provides accessibility guidance to ensure your consolidated design system meets compliance standards.
Yes, you can use this pattern detection approach for discovery. It maps the structure and conventions of existing component libraries and shared UI directories to help you understand your current design system landscape.
To generate a UI component extraction and migration plan, you need to provide access to your target front-end codebase directory. The analysis then outputs a prioritized plan listing components to create, tokens to define, and a migration path.
niiiusburoExtract reusable UI components and design tokens from a codebase.
han-so1omonIdentify reusable UI patterns, components, and design tokens for consolidation into a design system.
PrasadTelasulaTest React components with React Testing Library and Playwright for frontend correctness.
PavkaBrikaPlans extraction of UI components and design tokens into a centralized system.
