tomevault-io 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"
Source: freema/mcp-design-system-extractor — distributed by TomeVault.