Extract reusable UI components, design tokens, and patterns into a design system.
npx skills add https://github.com/ft-frank/UNIHACK --skill extract-ft-frank
Please help me install this Agent Skill. Skill: extract Source: https://github.com/ft-frank/UNIHACK/tree/main/frontend/.agents/skills/extract Command: npx skills add https://github.com/ft-frank/UNIHACK --skill extract-ft-frank
This Skill streamlines the process of identifying and consolidating reusable UI elements, design tokens, and patterns, leading to a more consistent and maintainable design system.
Use the extract skill to identify and consolidate reusable components from the 'components/button' directory.
High-intent search queries and answers about installing and using this skill.
To extract reusable UI components, analyze your UI elements for repeated patterns, hard-coded values, and inconsistent variations, then consolidate them into a structured design system with defined props and variants.
Identifying inconsistent UI variations requires scanning your codebase to detect repeated elements and deviations, revealing systematic reuse opportunities to enrich your component library and reduce redundant code.
Migrating existing uses involves systematically planning the extraction of identified UI patterns and replacing redundant code with calls to newly created, reusable components and design tokens.
You should avoid extracting UI patterns when there is no systematic reuse opportunity, as forcing extraction on highly unique, non-repeating elements adds unnecessary component abstraction without reducing code redundancy.
SwimmingLiuExtract reusable UI components and design tokens from codebases.
luisartolaIdentify reusable patterns, components, and tokens across projects for design system centralization.
hi-yuki-922Extract reusable UI components and design tokens into a centralized design system.
yahya-azeemExtract reusable UI components, design tokens, and layout patterns into a design system.
