Identify and classify reusable UI components for extraction plans.
npx skills add https://github.com/YeomanYe/skills --skill ui-extract
Please help me install this Agent Skill. Skill: ui-extract Source: https://github.com/YeomanYe/skills/tree/main/ui-extract Command: npx skills add https://github.com/YeomanYe/skills --skill ui-extract
This skill guides the extraction of visual and interactive UI components to improve maintainability and reusability when pages become bulky or boundaries between page-local, business, shared, and primitive components are unclear.
Provide an initial refactor prompt to extract a UI component.
High-intent search queries and answers about installing and using this skill.
To extract reusable UI components, identify innermost interactive boundaries like inputs and cards, then expand outward to form candidates. This process generates an extraction plan detailing scope, boundaries, and required props before modifying code.
Refactor UI by extracting components when pages become bulky and boundaries between page-local, business, shared, and primitive components are unclear. This often occurs during refactors of AI-generated pages with fragmented visual boundaries and interactions.
Classify extracted UI components into page-local, business, shared, or primitive categories based on their reuse potential and semantic stability. This classification happens after deriving outer UI boundaries from the innermost focusable elements.
Yes, UI component extraction preserves behavior and imports throughout the refactoring process. The skill generates a concrete extraction plan detailing scope and required props to ensure functionality remains intact during the component separation.
The best way to identify boundaries for UI component extraction is using a focus-first approach. Locate the innermost focusable interactive and visual boundaries, then expand outward to form candidate components for your extraction plan.
Yes, you can use this component extraction process for AI-generated pages. It specifically applies during UI refactors where visual boundaries and interactions are fragmented, including inputs, cards, dialogs, and forms.
shafibabarStandardize CSS isolation for React micro-frontends with CSS Modules and design tokens.
Project-N-E-K-OCodifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.
semicolon-devteamGenerate UI mockups from design requirements using the 21st_magic_component_builder.
Chris-MaskeyIdentify and eliminate waterfalls, oversized bundles, and inefficient server/client boundaries in React and Next.js applications.
