moliboy5000/skill-extract
plugins/cache/nyldn-plugins/octo/9.30.0/skills/skill-extract/SKILL.md
Reverse-engineer design systems, tokens, and components from live products or screenshots (beta — token extraction, component analysis, and URL modes are in progress)
content-media
Updated May 1, 2026
$ install --global
skillsauthnpx skillsauth add moliboy5000/.claude skill-extractInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 1, 2026, 8:05 AM189.3s1 file scanned
SKILL.md
- name:
- skill-extract
- version:
- 1.0.0
- description:
- Reverse-engineer design systems, tokens, and components from live products or screenshots (beta — token extraction, component analysis, and URL modes are in progress)
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):
- Code-Defined (95%):
theme.ts,tokens.json, Tailwind config - CSS Variables (90%):
:rootdeclarations - Computed Styles (60%): DOM analysis
- 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
Service Boundary Heuristics:
- Package.json in subdirectories
- Independent deployment configs
- Team ownership boundaries
- Communication pattern analysis
API Endpoint Detection:
- Decorator-based routing (NestJS, routing-controllers)
- Express/Fastify route definitions
- GraphQL resolver classes
- tRPC router procedures
- Protocol Buffer (.proto) files
Multi-AI Orchestration
When enabled, the extract feature uses multiple AI providers for higher accuracy:
Provider Roles:
- Claude: Synthesis, conflict resolution, documentation
- Codex: Code-level analysis, type extraction, architecture
- Gemini: Pattern recognition, alternative interpretations, UX insights
Consensus Mechanism:
- Threshold: 67% (2/3 providers must agree)
- Disagreements logged in
90_evidence/disagreements.md - Confidence scores attached to all outputs
Output Structure
octopus-extract/
└── project-name/
└── timestamp/
├── README.md # Navigation and summary
├── metadata.json # Extraction parameters
│
├── 00_intent/
│ ├── answers.json # User intent responses
│ ├── intent-contract.md # Human-readable summary
│ └── detection-report.md # Stack auto-detection results
│
├── 10_design/
│ ├── tokens.json # W3C Design Tokens format
│ ├── tokens.css # CSS custom properties
│ ├── tokens.md # Human-readable token docs
│ ├── components.csv # Component inventory (tabular)
│ ├── components.json # Structured component data
│ ├── patterns.md # Layout and design patterns
│ └── storybook/ # Storybook scaffold (optional)
│ ├── .storybook/
│ └── stories/
│
├── 20_product/
│ ├── product-overview.md # What, who, key journeys
│ ├── feature-inventory.md # Features by domain
│ ├── architecture.md # C4 text description
│ ├── architecture.mmd # Mermaid C4 diagrams
│ ├── PRD.md # AI-agent executable PRD
│ ├── user-stories.md # Gherkin-style scenarios
│ ├── api-contracts.md # Endpoint specifications
│ ├── data-model.md # Entity relationships
│ └── implementation-plan.md # Phased milestones
│
└── 90_evidence/
├── quality-report.md # Coverage and confidence metrics
├── disagreements.md # Multi-AI conflicts
├── extraction-log.md # Timestamped progress log
└── references.json # File paths per claim
Quality Gates
Automated validation ensures extraction quality:
- Token Coverage: Fail if 0 tokens in design mode
- Component Coverage: Warn if < 50% of component files detected
- Architecture Completeness: Warn if no services detected in product mode
- Multi-AI Consensus: Fail if < 50% agreement on key outputs
Usage Patterns
Basic Extraction
/octo:extract ./my-app
Design-Only Extraction
/octo:extract ./my-app --mode design --storybook true
Deep Analysis with Multi-AI
/octo:extract ./my-app --depth deep --multi-ai force
URL Extraction
/octo:extract https://example.com --mode design --depth quick
Integration with Other Skills
- /octo:review: Review extracted outputs for quality
- /octo:deliver: Validate extraction completeness
- /octo:docs: Generate additional documentation from extractions
Error Handling
Common error codes:
ERR-001: Invalid input (path/URL not found)ERR-002: Network timeout (URL extraction)ERR-003: Permission deniedERR-004: Out of memory (use--depth quick)VAL-001: Validation failed (no tokens detected)VAL-004: Low multi-AI consensus
Performance Targets
| Depth | Time Target | Coverage Target | |-------|-------------|-----------------| | Quick | < 2 min | 70% coverage, basic analysis | | Standard | 2-5 min | 85% coverage, comprehensive | | Deep | 5-15 min | 95% coverage, multi-AI validation |
Research Sources
This skill is informed by research on:
- Tokens Studio - Design token automation
- Superposition - Token extraction from websites
- W3C Design Tokens - Token format standard
- C4 Model - Architecture diagramming
- Modern reverse-engineering practices (2026)
Implementation Status
Current Version: 1.0.0 (Skeleton)
Implemented:
- ✅ Command structure
- ✅ CLI argument parsing
- ✅ Output directory setup
- ✅ Metadata generation
- ✅ Multi-AI detection
In Progress:
- 🚧 Token extraction pipeline
- 🚧 Component analysis engine
- 🚧 Architecture detection
- 🚧 PRD generation
- 🚧 Quality gates
Planned:
- ⏳ Storybook scaffold generation
- ⏳ C4 diagram generation
- ⏳ URL extraction mode
- ⏳ CSS inference algorithms
Contributing
See implementation plan in project documentation.
Implementation phases:
- Foundation & CLI (Week 1)
- Auto-Detection Engine (Week 2)
- Design Extraction (Week 3-4)
- Product Extraction (Week 5-6)
- Multi-AI Orchestration (Week 7)
- Quality Gates (Week 8)
- Testing & Documentation (Week 10)
This skill implements the design specified in PRD v2.0 (AI-Executable)
Related Skills
moliboy5000/figma-generate-diagram
tools
VerifiedTrustedCommunity
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
SKILL.mdUpdated Jul 26, 2026
moliboy5000/codex-orchestrator
development
VerifiedTrustedCommunity
DEFAULT PIPELINE for all tasks requiring execution. You (Claude) are the strategic orchestrator. Codex agents are your implementation army - hyper-focused coding specialists. Trigger on ANY task involving code, file modifications, codebase research, multi-step work, or implementation. This is NOT optional - Codex agents are the default for all execution work. Only skip if the user explicitly asks you to do something yourself.
SKILL.mdUpdated Jul 13, 2026
moliboy5000/video-interaction-mapper
development
VerifiedTrustedCommunity
This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.
SKILL.mdUpdated Jul 13, 2026
moliboy5000/generate-project-plan
development
VerifiedTrustedCommunity
Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
SKILL.mdUpdated Jul 13, 2026