generate_component
Create production-ready UI components for React, Vue, Svelte, Angular, or Web Components from a natural language description using active design tokens.
Instructions
Generate a production-ready UI component in any framework (React, Vue, Svelte, Angular, Web Components) from a natural language description. Uses active design tokens if loaded.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| size | No | Size preset | md |
| variant | No | Visual variant style | default |
| framework | Yes | Target UI framework for the generated component | |
| auto_audit | No | Automatically audit the generated component and report findings (default: true) | |
| responsive | No | Include responsive breakpoint styles | |
| description | Yes | Natural language description of the component (e.g., 'a card with image, title, description, and action buttons') | |
| include_tests | No | Generate a companion test file | |
| component_name | Yes | PascalCase name for the component (e.g., 'ProductCard') | |
| include_styles | No | Include CSS styles using active design tokens |