# Design Extraction

> This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML extraction, theme analysis, or UI assembly. Use when this capability is needed.

- Skill: `tomevault-io/design-extraction` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/design-extraction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/design-extraction/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/design-extraction

---


When the user asks about design systems or building UIs with components, use the design-system MCP tools.

## When to Use This Skill

Activate when the user:

- Asks about available components ("What buttons do we have?", "List form components")
- Needs component HTML ("Extract the card component", "Get the modal HTML")
- Wants theme info ("What colors are available?", "Show me the spacing scale")
- Builds UIs ("Create a login form using our components")
- Analyzes components ("What components does the header use?")

## Tools Reference

| Task | Tool |
|------|------|
| List all | `list_components` (use `compact: true`) |
| Search | `search_components` |
| Extract HTML | `get_component_html` (async) |
| Check variants | `get_component_html` with `variantsOnly: true` |
| Get theme | `get_theme_info` |
| Get CSS | `get_external_css` |
| Dependencies | `get_component_dependencies` |
| Job status | `job_status` |

## Async Operations

`get_component_html` is async by default:

```
get_component_html componentId="button--primary"
→ Returns: { job_id: "abc123" }

job_status jobId="abc123"
→ Returns: { status: "completed", result: "<button>..." }
```

## Component ID Format

```
button--primary     # component--story
card--default       # component--story
button              # auto-resolves to default variant
```

## Example Workflows

**List and extract:**
```
list_components compact=true
get_component_html componentId="button" variantsOnly=true
get_component_html componentId="button--primary"
job_status jobId="..."
```

**Build with theme:**
```
get_theme_info
search_components purpose="form inputs"
get_component_html componentId="input--default"
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/freema) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->