skills.rest
mhdxbilal
mhdxbilalCOMMUNITY
Explore all skills by this author →
GitHub

skill-extract

Extract tokens, components, and architecture from live products and screenshots.

1|Updated Jun 12, 2026
Search Tags:#architecture#tokens#reverse-engineering#design-systems#api-mapping#component-analysis
One-click install
npx skills add https://github.com/mhdxbilal/Ai --skill skill-extract-mhdxbilal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-extract
Source: https://github.com/mhdxbilal/Ai/tree/main/.claude/skills/extract-skill
Command: npx skills add https://github.com/mhdxbilal/Ai --skill skill-extract-mhdxbilal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reverse-engineering design systems and product architectures from live products to accelerate documentation, consistency, and alignment across teams.

Core Features & Use Cases

  • Token extraction: colors, typography, spacing, and tokens from codebases and CSS.
  • Component analysis: props, variants, and usage patterns across React, Vue, and Svelte.
  • Architecture detection: identify service boundaries, API mappings, and data models.
  • Diagram & documentation: generate C4-like diagrams and structured deliverables for stakeholders.

Quick Start

Provide a live product URL or repository path to start extracting tokens, components, and architecture.

Frequently Asked Questions about skill-extract

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

FAQPage Schema
How do I extract design tokens from an existing web app or codebase?▼

Yes, component analysis supports React, Vue, and Svelte codebases. It identifies props, variants, and usage patterns across these frameworks to reverse-engineer UI architectures and generate structured deliverables.

How do I map API architectures and service boundaries from a live product?▼

Mapping API architectures from a live product involves analyzing the application to identify service boundaries, API mappings, and data models. This architecture detection generates structured documentation and C4-like diagrams for stakeholders.

Can I generate C4-like diagrams and documentation from extracted product architecture?▼

Yes, the extraction pipeline uses multi-provider validation to ensure deterministic and accurate results. This validates the identified tokens, components, and architecture across different analysis providers.

What is the best way to reverse-engineer a design system from a live product?▼

The best way to reverse-engineer a design system from a live product is using a deterministic pipeline that extracts tokens, analyzes components, and detects architecture. This generates structured documentation and diagrams from the provided URL or repository path.

Related Skills

Explore More Design & Creative Skills→
DeliciousHouseDeliciousHouse
2

website-brand-analysis

Crawl a website to generate a Markdown brand bible and design-system CSS.

Community
Advanced
MovchanetsMovchanets

c4-context

Create C4 system context documentation with Mermaid diagrams and dependency details.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
CyapstayeCyapstaye
9

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Intermediate