ui-extract

Identify and classify reusable UI components for extraction plans.

Updated May 12, 2026

Search Tags:#ui #frontend #component #refactor #extraction #design-system

Ready to run

npx skills add https://github.com/YeomanYe/skills --skill ui-extract

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Focus-first extraction: identify innermost interactive and visual boundaries, then expand outward to form candidate components.
Classification: assign components to page-local, business, shared, or primitive categories based on reuse potential and semantic stability.
Extraction plan: emit a concrete plan before code changes, detailing scope, boundaries, and required props.

Quick Start

Provide an initial refactor prompt to extract a UI component.

Frequently Asked Questions about ui-extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract reusable UI components from bloated frontend code?▼

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.

When should I refactor UI by extracting components?▼

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.

How do I classify extracted UI components into a design system?▼

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.

Does UI component extraction preserve original behavior and imports?▼

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.

What's the best way to identify boundaries for UI component extraction?▼

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.

Can I use this component extraction process for AI-generated pages?▼

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.