Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
Analyze the target area to identify extraction opportunities:
Find the design system: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
CRITICAL: If no design system exists, ask before creating one. Understand the preferred location and structure first.
Identify patterns: Look for:
Assess value: Not everything should be extracted. Consider:
Create a systematic extraction plan:
IMPORTANT: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
Build improved, reusable versions:
NEVER:
Replace existing uses with the new shared versions:
Update design system documentation:
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.