skills.rest
burgebj
burgebjCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/burgebj/claudeoctopus --skill skill-extract-burgebj
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
JacksonZx535JacksonZx535

architecture

Analyze source code to identify main components and their relationships.

Community
Advanced
fivetakufivetaku
114

insane-design

Analyze a live URL to generate a canonical design brief and design.md artifacts.

Community
Advanced
BrennonTWilliamsBrennonTWilliams
7

map-dependencies

Analyze cross-issue dependencies from frontmatter fields to validate references and generate dependency graphs.

Community
Advanced
JeffallanJeffallan
10.9k

spec-miner

Extract undocumented functionality from codebases into EARS-formatted specifications.

Community
Advanced