跳到正文
cccskills
免费在 GitHub 公开

skill-extract

An early-stage framework for documenting an existing product’s design and architecture. Command parsing, output setup, and metadata generation are implemented; extracting colors, components, APIs, and architecture remains in progress or planned.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Reverse-engineer design systems, tokens, and components from live products or screenshots

查看安装方法

适用场景

  • Plan documentation for an undocumented application
  • Define output formats for colors and spacing
  • Plan component and API inventories
  • Check extraction features and implementation status

包含的文件(2)

  • SKILL.md8.4 KB
  • agents/openai.yaml162 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Host: Codex CLI — This skill was designed for Claude Code and adapted for Codex. Cross-reference commands use installed skill names in Codex rather than /octo:* slash commands. Use the active Codex shell and subagent tools. Do not claim a provider, model, or host subagent is available until the current session exposes it. For host tool equivalents, see skills/blocks/codex-host-adapter.md.

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

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
  • Antigravity: Pattern recognition, alternative interpretations, UX insights

Consensus Mechanism:

  • Threshold: extraction quality gates require the configured consensus threshold (default 67%); when no numeric vote data exists, the quorum resolver selects the strongest matching proposal from up to 3 provider perspectives and logs disagreements.
  • 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:

  1. Token Coverage: Fail if 0 tokens in design mode
  2. Component Coverage: Warn if < 50% of component files detected
  3. Architecture Completeness: Warn if no services detected in product mode
  4. Multi-AI Consensus: Fail if agreement is below the configured consensus threshold (default 67%) 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 denied
  • ERR-004: Out of memory (use --depth quick)
  • VAL-001: Validation failed (no tokens detected)
  • VAL-004: Low multi-AI consensus

Performance Targets

DepthTime TargetCoverage Target
Quick< 2 min70% coverage, basic analysis
Standard2-5 min85% coverage, comprehensive
Deep5-15 min95% coverage, multi-AI validation

Research Sources

This skill is informed by research on:

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:

  1. Foundation & CLI (Week 1)
  2. Auto-Detection Engine (Week 2)
  3. Design Extraction (Week 3-4)
  4. Product Extraction (Week 5-6)
  5. Multi-AI Orchestration (Week 7)
  6. Quality Gates (Week 8)
  7. Testing & Documentation (Week 10)

This skill implements the design specified in PRD v2.0 (AI-Executable)

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Interpret the saved results of a completed AI council review. Count verdicts, check whether enough participants responded and whether models are independent, surface substantive dissent, and explain what action the outcome supports.

中文简介正在准备中。当前显示英语简介。

  • Explain a completed council review
  • Check vote counts and quorum
  • Assess model independence and dissent
nyldn/claude-octopus42782026年10月22日 更新

Turn a technical choice into a structured debate between different AI model families. Assign explicit positions, launch the discussion, and summarize agreement, disagreement, and a recommendation supported by the strongest argument that survives the debate.

中文简介正在准备中。当前显示英语简介。

  • Compare Redis and Memcached for session storage
  • Debate monorepo versus polyrepo organization
  • Examine a technical choice from opposing positions
nyldn/claude-octopus42782026年10月22日 更新

Clarify a feature’s requirements with multiple AI providers, combining technical constraints with user and business needs. Produce a scoped definition covering priorities, edge cases, exclusions, and a requirements checklist before implementation begins.

中文简介正在准备中。当前显示英语简介。

  • Defining requirements for a user authentication system
  • Setting boundaries for a notification feature
  • Identifying technical constraints and edge cases
nyldn/claude-octopus42782026年10月22日 更新

Review code or documents with available AI providers before delivery. Combine findings into a scored validation report that checks prior requirements and decisions, separates critical issues from warnings, and recommends next steps.

中文简介正在准备中。当前显示英语简介。

  • Review authentication code before release
  • Check API readiness before deployment
  • Review a PRD for missing requirements
nyldn/claude-octopus42782026年10月22日 更新

Develop complex features or business documents by gathering approaches from available AI providers. Combine their perspectives with prior project decisions and quality checks to produce a proposed plan, then proceed with implementation after user confirmation.

中文简介正在准备中。当前显示英语简介。

  • Planning and implementing a complex feature
  • Comparing approaches for an external service integration
  • Developing a product requirements document or strategy
nyldn/claude-octopus42782026年10月22日 更新

Research technical or business questions through multiple available AI providers, each assigned a different perspective. Combine usable results into a report covering findings, disagreements, evidence gaps, priorities, and recommended next steps.

中文简介正在准备中。当前显示英语简介。

  • Compare libraries and technical approaches
  • Research markets and competitor strategies
  • Synthesize literature from multiple perspectives
nyldn/claude-octopus42782026年10月22日 更新

查看 nyldn 的全部技能

报告此技能的问题