Extract reusable components and design tokens into a shared design system.
npx skills add https://github.com/gmolike/Claude-Template --skill extract-gmolike
Please help me install this Agent Skill. Skill: extract Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/extract Command: npx skills add https://github.com/gmolike/Claude-Template --skill extract-gmolike
High-intent search queries and answers about installing and using this skill.
Scan the target area for UI patterns used three or more times, then create a shared component with a clear props API, variants, and accessibility support. Finally migrate all existing usages to the shared version and delete the old implementations.
Design tokens are named, reusable values for colors, spacing, typography, and shadows that replace hard-coded values. Create them only for values with semantic meaning and repeated use, not for every single value in the codebase.
Avoid extracting one-off, context-specific implementations or patterns used fewer than three times. Overly generic components and premature extraction increase maintenance cost without improving consistency.
The Skill asks before creating one, since location and structure matter. Confirm the preferred directory, naming conventions, and organization first, then extract only clearly reusable patterns incrementally.
Search for all instances of the extracted pattern, replace each usage with the shared component, and verify visual and functional parity through testing. Remove the old implementations only after migration is confirmed.
bfree-trainerExtract reusable UI components, design tokens, and layout patterns from frontend codebases.
redpanda-dataEnforces TypeScript, React, and JavaScript best practices using Ultracite and Biome rules.
vobaseExtract reusable UI components, design tokens, and patterns from frontend codebases.
yogi100xProvide React architecture patterns for compound, headless, slot, and polymorphic components.
