skill-extract

# Extract Skill - Implementation Guide ## Overview The `extract` skill provides comprehensive reverse-engineering capabilities for design systems and product architectures. It transforms undocumented codebases into structured, implementation-ready documentation. ## Capabilities ### Design System Extraction - **Token Extraction**: Colors, typography, spacing, shadows from code or CSS - **Component Analysis**: Props, variants, usage patterns across React/Vue/Svelte - **Pattern Detection**: Layout patterns, design rules, accessibility guidelines - **Storybook Generation**: Auto-generated stories with variants and controls ### Product Architecture Extraction - **Service Detection**: Microservice boundaries, modules, domain boundaries - **API Mapping**: REST, GraphQL, tRPC, gRPC endpoint cataloging - **Data Modeling**: ORM schema extraction (Prisma, TypeORM, Sequelize) - **Feature Inventory**: Route-based and domain-based feature detection - **C4 Diagrams**: Automated architecture visualization (Mermaid) ## Technical Implementation ### Token Extraction Pipeline **Priority Order** (High to Low Confidence): 1. **Code-Defined** (95%): `theme.ts`, `tokens.json`, Tailwind config 2. **CSS Variables** (90%): `:root` declarations 3. **Computed Styles** (60%): DOM analysis 4. **Inferred** (40-60%): Color clustering, scale detection **Color Clustering Algorithm**: - Uses CIEDE2000 for perceptually-accurate color distance - K-means++ initialization for stable clustering - Default k=...