skill-extract

Extract design systems and product architectures from existing applications.

Updated Jun 16, 2026

Search Tags:#code analysis #documentation #design system #component discovery #api mapping #architecture extraction

Ready to run

npx skills add https://github.com/burgebj/claudeoctopus --skill skill-extract-burgebj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: skill-extract
Source: https://github.com/burgebj/claudeoctopus/tree/main/.claude/skills/extract-skill
Command: npx skills add https://github.com/burgebj/claudeoctopus --skill skill-extract-burgebj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of understanding undocumented products and codebases by extracting design systems, architecture patterns, and implementation insights into structured documentation.

Core Features & Use Cases

Design System Extraction: Identifies tokens, components, patterns, accessibility rules, and generates implementation-ready design documentation.
Product Architecture Analysis: Maps services, APIs, data models, features, and creates architecture views from existing applications.
Use Case: Analyze a complex React application to discover its design language, component inventory, and technical architecture before rebuilding or extending it.

Quick Start

Use the skill-extract skill to analyze my application repository and generate a complete design and architecture extraction report.

Frequently Asked Questions about skill-extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract a design system from an existing application?▼

Extracting a design system from an existing application requires code parsing and component discovery workflows to identify UI tokens, patterns, and accessibility rules, ultimately generating structured implementation documentation.

What is the best way to reverse-engineer an undocumented product architecture?▼

The best way to reverse-engineer a product architecture is through multi-framework analysis that maps services, APIs, and data models to generate structured architecture views and feature inventories from the existing codebase.

Can I map APIs and data models from a complex React application?▼

Yes, you can map APIs and data models from a complex React application by applying multi-framework analysis to parse the codebase, extract feature inventories, and generate structured architecture views.

How do I generate an implementation blueprint for a codebase before rebuilding?▼

Generating an implementation blueprint for a codebase before rebuilding involves reverse-engineering the product to extract design systems, map APIs, and validate technical architecture quality into structured documentation.

Does multi-framework analysis work for discovering UI components and tokens?▼

Yes, multi-framework analysis works for discovering UI components and tokens by parsing code across different frameworks to identify accessibility rules, design patterns, and generate implementation-ready documentation.