Extract reusable components, design tokens, and patterns into a design system.
npx skills add https://github.com/po4yka/blog --skill extract-po4yka
Please help me install this Agent Skill. Skill: extract Source: https://github.com/po4yka/blog/tree/main/.agents/skills/extract Command: npx skills add https://github.com/po4yka/blog --skill extract-po4yka
High-intent search queries and answers about installing and using this skill.
Identify UI patterns used three or more times, then create a shared component with a clear props API, variants for each use case, and accessibility built in. Finally, migrate every existing instance to consume the shared version and delete the old implementations.
Scan the codebase for repeated colors, spacing, typography, and shadow values, then define tokens with semantic names and a clear primitive-to-semantic hierarchy. Only create tokens for values with semantic meaning rather than one token per value.
Avoid extracting one-off, context-specific implementations or patterns used fewer than three times. Overly generic components and tokens without semantic meaning add maintenance cost without improving consistency.
The Skill asks before creating one, since location and structure matter. It first confirms the preferred directory, naming conventions, and documentation patterns before extracting anything into a new shared library.
Search for all instances of the extracted pattern, replace each use with the shared component, and test for visual and functional parity. After verification, remove the old implementations to eliminate dead code.
microlinkhqExtract reusable UI components, tokens, and patterns from a codebase.
redpanda-dataEnforces TypeScript, React, and JavaScript best practices using Ultracite and Biome rules.
ClickHouseMigrate Click UI components from styled-components to CSS Modules with visual regression parity.
yogi100xProvide React architecture patterns for compound, headless, slot, and polymorphic components.
