Extract reusable components and design tokens into a design system.
npx skills add https://github.com/AkaraChen/proxy-up --skill extract-akarachen
Please help me install this Agent Skill. Skill: extract Source: https://github.com/AkaraChen/proxy-up/tree/main/.agents/skills/extract Command: npx skills add https://github.com/AkaraChen/proxy-up --skill extract-akarachen
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, and accessibility support. Replace each existing instance with the shared version and delete the old implementations.
Scan the codebase for repeated colors, spacing, typography, and shadow values, then create tokens with clear primitive and semantic naming. Document when to use each token rather than creating tokens for every single 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. Confirm the preferred directory, naming conventions, and organization first, then extract only what is clearly reusable now.
Search for all instances of the extracted pattern, replace each use with the shared component, and verify visual and functional parity. Remove the old implementations once migration is complete.
LinCieExtract reusable components and design tokens into a design system.
redpanda-dataEnforces TypeScript, React, and JavaScript best practices using Ultracite and Biome rules.
blueprintuiAutomate visual regression testing for UI components across themes and states.
diane-deforesEvaluate component design for duplication, poor abstractions, and headless primitives.
