Extract reusable UI components, design tokens, and layout patterns from frontend codebases.
npx skills add https://github.com/bfree-trainer/bfree --skill extract-bfree-trainer
Please help me install this Agent Skill. Skill: extract Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/extract Command: npx skills add https://github.com/bfree-trainer/bfree --skill extract-bfree-trainer
Consolidates duplicated UI code, hard-coded styling, and inconsistent component variants into a coherent design system so teams can reliably reuse components and tokens instead of reimplementing patterns across a codebase.
Run the extract skill on the project's components directory to produce a prioritized extraction plan with suggested components, tokens, and migration steps.
High-intent search queries and answers about installing and using this skill.
To extract reusable UI components and design tokens, scan the project's UI directories to identify repeated elements and hard-coded styles. This generates a prioritized extraction plan with suggested components, token definitions, and migration steps for consolidation.
The best way to consolidate inconsistent UI component variants is to scan the codebase to locate repeated patterns and hard-coded values. This yields a replacement strategy and documentation examples to safely refactor existing usages into a coherent design system.
Finding hard-coded styling and repeated UI elements involves scanning component trees and shared UI folders. This discovery analysis identifies duplicated code and variant inconsistencies, producing a prioritized migration plan to consolidate them into reusable components.
Yes, you can generate a migration plan to refactor duplicated UI code into a shared component library. Running an extraction analysis on the components directory produces replacement strategies, accessible component APIs, and documentation suitable for systematic reuse.
Extracting design tokens works for component libraries with multiple button implementations by identifying variant inconsistencies and hard-coded values. It proposes a single accessible Button component with tokenized colors and spacing, alongside a plan to update usages across the app.
You should systematize UI components and design tokens instead of leaving hard-coded styles to ensure reliable reuse across a codebase. Consolidating duplicated UI code prevents teams from reimplementing patterns and resolves variant inconsistencies for a coherent design system.
launchapp-devAudit design token usage across multi-project design systems to identify inconsistencies and gaps.
mahir-m01Extract reusable UI patterns, components, and design tokens into a shared design system.
14790897Audit component libraries for naming inconsistencies and missing documentation.
heyparth1Extracts reusable UI components and design tokens from source code into a unified system.
