extract

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: • 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. • 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 • 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?

Create a systematic extraction plan: • Components to extract: Which UI elements become reusable components? • Tokens to create: Which hard-coded values become design tokens? • Variants to support: What variations does each component need? • Naming conventions: Component names, token names, prop names that match existing patterns • Migration path: How to refactor existing uses to consume the new shared versions IMPORTANT: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.

Build improved, reusable versions: • Components: Create well-designed components with: • Clear props API with sensible defaults • Proper variants for different use cases • Accessibility built in (ARIA, keyboard navigation, focus management) • Documentation and usage examples • Design tokens: Create tokens with: • Clear naming (primitive vs semantic) • Proper hierarchy and organization • Documentation of when to use each token • Patterns: Document patterns with: • When to use this pattern • Code examples • Variations and combinations NEVER: • Extract one-off, context-specific implementations without generalization • Create components so generic they're useless • Extract without considering existing design system conventions • Skip proper TypeScript types or prop documentation • Create tokens for every single value (tokens should have semantic meaning)

Replace existing uses with the new shared versions: • Find all instances: Search for the patterns you've extracted • Replace systematically: Update each use to consume the shared version • Test thoroughly: Ensure visual and functional parity • Delete dead code: Remove the old implementations