← ClaudeAtlas

extractlisted

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.
AkaraChen/2code · ★ 23 · Code & Development · score 67
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