Extract reusable components and design tokens from existing codebases.
npx skills add https://github.com/tc9011/my-skills --skill extract-tc9011
Please help me install this Agent Skill. Skill: extract Source: https://github.com/tc9011/my-skills/tree/main/skills/extract Command: npx skills add https://github.com/tc9011/my-skills --skill extract-tc9011
This Skill helps identify and extract reusable components, design tokens, and patterns from existing codebases to build or enrich a design system, promoting consistency and efficiency.
Use the extract skill to identify reusable components in the 'src/components' directory.
High-intent search queries and answers about installing and using this skill.
To extract reusable components, analyze the codebase for repeated UI elements, hard-coded values, and inconsistent variations. You can then plan a systematic extraction to consolidate these patterns into a centralized design system with clear component APIs.
Design tokens are centralized variables for hard-coded values like colors and spacing. You need to consolidate design tokens when multiple projects use inconsistent variations, ensuring systematic reuse and visual consistency across your component library.
Identify repeated UI patterns for a pattern library by scanning source code to detect duplicated interface elements and hard-coded values. This analysis reveals opportunities to group similar variations into a single reusable component.
The best way to refactor code for design system reusability is to execute a systematic extraction plan that creates components with clear APIs and accessibility. This process requires thorough migration of existing usages to the new centralized component library.
Yes, you can migrate existing hard-coded values into design tokens by analyzing the code for inconsistencies and defining a centralized token set. This requires a thorough migration of existing usages to replace duplicated values with the new tokens.
Yes, you need a systematic extraction plan to build a design system effectively. It guides the identification of repeated patterns, component creation with clear APIs, design token definition, and the thorough migration of existing usages.
jpoutrinDetect hard-coded values and generate design system component structures.
niiiusburoExtract reusable UI components and design tokens from a codebase.
WellApp-aiAlign UI decisions with design system tokens, Storybook stories, and codebase patterns.
BSteffaniakGenerate git commit messages from code changes and pre-fill them for git commit and lazygit.
