generate_ui_component
Generate UI components for React, Vue, Angular, Svelte, or HTML with style audit and design context awareness. Integrates with libraries like shadcn/ui, Radix UI, and more.
Instructions
Create or iterate UI components with style audit and design context awareness. Supports React, Next.js, Vue, Angular, Svelte, and HTML. Component library integration available: shadcn/ui, Radix UI, Headless UI, PrimeVue, Material UI.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component_type | Yes | Type of component to generate (e.g., "button", "card", "form", "navbar", "sidebar", "modal", "table", "hero") | |
| framework | Yes | Target framework | |
| props | No | Component props as key-value pairs | |
| component_library | No | Component library to use in generated code | none |
| design_reference_url | No | URL to extract design inspiration from | |
| existing_tailwind_config | No | Existing tailwind.config.js content for style audit | |
| existing_css_variables | No | Existing CSS variables for style audit | |
| variant | No | Component variant (e.g., "outline", "ghost", "gradient", "glass", "destructive", "loading", "icon") | |
| mood | No | Design mood/personality | |
| industry | No | Target industry for tailored design | |
| visual_style | No | Visual style layer to apply | |
| skip_ml | No | Skip ML enhancement and scoring for pure generation | |
| brand_identity | No | JSON string from branding-mcp generate_brand_identity. Overrides design context with brand tokens. |