Extract tokens, components, and architecture mappings into structured documentation.
npx skills add https://github.com/nyldn/claude-octopus --skill skill-extract
Please help me install this Agent Skill. Skill: skill-extract Source: https://github.com/nyldn/claude-octopus/tree/main/skills/skill-extract Command: npx skills add https://github.com/nyldn/claude-octopus --skill skill-extract
Design teams and developers struggle to translate undocumented codebases into structured, implementation-ready documentation for design systems and product architectures.
Run the extract workflow on your codebase to generate tokens, components, and architecture diagrams.
High-intent search queries and answers about installing and using this skill.
To extract design tokens and component inventories from an undocumented codebase, you can run a multi-stage pipeline that analyzes code and CSS to produce structured documentation. This process includes token extraction, component analysis, and automated diagram generation.
Reverse-engineering a design system means detecting patterns, extracting token data, and mapping software architectures from existing product code. It translates undocumented frontend stacks into structured, implementation-ready documentation including C4 diagrams and component inventories.
Yes, you can generate Storybook documentation automatically from React, Vue, and Svelte components. The workflow analyzes your components across these modern frontend frameworks and produces automated documentation and Storybook configurations.
Yes, design system extraction supports API mapping and architecture diagrams. It performs architecture detection to generate data models, feature inventories, and automated Mermaid diagrams including C4 diagrams for your software architecture.
The best way to enforce design rules and detect patterns is using a multi-AI orchestration pipeline with quality gates. This approach analyzes your codebase to identify patterns, map components, and ensure your design rules are consistently applied.
qapdex-makerExtract design systems from frontend source code into DESIGN.md files.
ZiadNagarDocuments software architecture using C4 Mermaid diagrams and writes them to docs/architecture.
zircoteValidate interface code against a strict 4px grid and depth strategy.
andisabGenerate technical documentation, API references, and README files from source code.
