extractlisted
Install: claude install-skill AkaraChen/2code
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
## Discover
Analyze the target area to identify extraction opportunities:
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
2. **Identify patterns**: Look for:
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
3. **Assess value**: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?
## Plan Extraction
Create a systematic extraction plan:
- **Components to extract**: Which UI elements become reusable