Extract reusable components, design tokens, and patterns into a design system.
npx skills add https://github.com/Akenzz/Breaking-Bug --skill extract-akenzz
Please help me install this Agent Skill. Skill: extract Source: https://github.com/Akenzz/Breaking-Bug/tree/main/frontend/app/.cursor/skills/extract Command: npx skills add https://github.com/Akenzz/Breaking-Bug --skill extract-akenzz
This Skill helps in identifying and consolidating reusable components, design tokens, and patterns from existing codebases into a centralized design system, thereby improving consistency and efficiency.
Analyze the current project to identify reusable UI patterns and extract them into the design system.
High-intent search queries and answers about installing and using this skill.
To extract reusable components and design tokens, analyze the target areas to identify repeated UI elements and hard-coded values, then plan and execute their migration into a centralized design system library.
Consolidating inconsistent UI variations requires pattern identification to detect discrepancies, followed by systematic extraction to enrich the components with proper APIs, variants, and accessibility before moving them to the design system.
Pattern identification works by analyzing existing codebases to detect repeated UI elements, hard-coded values, and inconsistent variations, creating opportunities for systematic reuse and consolidation into design tokens.
Yes, you can extract a common button component and its associated color tokens by analyzing the project for reusable UI patterns, then planning and executing the extraction and migration into a shared design system library.
No, extracting design tokens does not require an existing library; the process identifies opportunities for systematic reuse from your current codebase and enriches the component library by building improved, reusable versions during the migration.
You should avoid design system extraction when your codebase lacks sufficient repeated UI elements or hard-coded values to justify pattern identification, as systematic reuse requires identifiable inconsistencies to extract and consolidate.
heyparth1Extracts reusable UI components and design tokens from source code into a unified system.
imsaifScan Tailwind UI components for hardcoded colors and design token violations.
mgd34msuAudit code for security vulnerabilities, performance issues, and complexity metrics.
niiiusburoExtract reusable UI components and design tokens from a codebase.
