Extract reusable UI components and design tokens from code into a design system.
npx skills add https://github.com/danielzmeow/Web-Tutorial --skill extract-danielzmeow
Please help me install this Agent Skill. Skill: extract Source: https://github.com/danielzmeow/Web-Tutorial/tree/main/.agents/skills/extract Command: npx skills add https://github.com/danielzmeow/Web-Tutorial --skill extract-danielzmeow
This Skill addresses the challenge of inconsistent and duplicated UI elements within a codebase by identifying and extracting reusable components, design tokens, and patterns into a centralized design system.
Use the extract skill to identify and consolidate reusable UI components from the '/src/components' directory.
High-intent search queries and answers about installing and using this skill.
Extract reusable UI components by analyzing your codebase for repeated elements and hard-coded values, consolidating them into a centralized design system. This identifies opportunities for systematic reuse and defines configurable components to ensure consistency across your project.
Consolidating duplicated UI elements involves identifying inconsistent variations and extracting their commonalities into well-defined components and design tokens. This process updates existing usages to leverage the new centralized design system, reducing maintenance and ensuring visual consistency.
Identify hard-coded values and repeated UI patterns by scanning your source directories to find inconsistent variations. Analyzing code for these duplicated elements highlights opportunities to define design tokens and extract reusable components during code refactoring.
Component extraction can identify multiple slightly different button styles across a project, extract their commonalities into a single configurable Button component, and update all existing usages to leverage the new component for consistency.
Analyze source component directories, such as '/src/components', to find opportunities for systematic UI reuse. Scanning these locations identifies repeated elements and hard-coded values ready for extraction into a design system.
Design system extraction requires a systematic approach to component creation, token definition, and code migration. Avoid this approach when your project lacks sufficient duplicated UI elements or repeated patterns to justify the overhead of centralizing components into a design system.
launchapp-devAudit design token usage across multi-project design systems to identify inconsistencies and gaps.
niiiusburoExtract reusable UI components and design tokens from a codebase.
WesleySmitsDetect hard-coded values and enforce design tokens in CSS and component code.
jeannotlemaire-uxPreserve v1 taste-skill behavior with design and engineering directives.
