---
name: design-extraction
description: 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.
---

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"
```