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=8 clusters for primary palettes
• ΔE < 2 threshold for duplicate detection

Component Analysis

Detection Strategies:

• AST parsing for TypeScript/JavaScript
• Prop extraction from interfaces and PropTypes
• Variant detection from union types
• Usage tracking across codebase

Supported Frameworks:

• React (functional, class, hooks)
• Vue (SFC, Composition API, Options API)
• Svelte (script/template separation)

Architecture Detection