generate_responsive_component
Create responsive, accessible HTML/CSS components with modern best practices for production-ready code, tests, and documentation.
Instructions
Generate responsive, accessible HTML/CSS components with modern best practices
WORKFLOW: Ideal for creating production-ready code, tests, and documentation TIP: Generate unlimited iterations locally, then review with Claude SAVES: Claude context for strategic decisions
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| accessible | No | Include accessibility features | |
| animations | No | Include animations | |
| context | No | Rich context object with brand information, design references, content, colors, typography, and technical requirements | |
| darkMode | No | Include dark mode support | |
| designSystem | No | Design system to follow | custom |
| framework | No | Framework to use | vanilla |
| name | Yes | Component name | |
| responsive | No | Make component responsive | |
| saveDirectory | No | Directory to save the component project (e.g., "C:\dev\my-project"). If not provided, user will be prompted to specify location. | |
| type | Yes | Component type |
Input Schema (JSON Schema)
{
"properties": {
"accessible": {
"default": true,
"description": "Include accessibility features",
"type": "boolean"
},
"animations": {
"default": false,
"description": "Include animations",
"type": "boolean"
},
"context": {
"description": "Rich context object with brand information, design references, content, colors, typography, and technical requirements",
"type": "object"
},
"darkMode": {
"default": false,
"description": "Include dark mode support",
"type": "boolean"
},
"designSystem": {
"default": "custom",
"description": "Design system to follow",
"type": "string"
},
"framework": {
"default": "vanilla",
"description": "Framework to use",
"enum": [
"vanilla",
"react",
"vue",
"angular",
"svelte"
],
"type": "string"
},
"name": {
"description": "Component name",
"type": "string"
},
"responsive": {
"default": true,
"description": "Make component responsive",
"type": "boolean"
},
"saveDirectory": {
"description": "Directory to save the component project (e.g., \"C:\\dev\\my-project\"). If not provided, user will be prompted to specify location.",
"type": "string"
},
"type": {
"description": "Component type",
"enum": [
"button",
"form",
"card",
"modal",
"navigation",
"layout",
"custom"
],
"type": "string"
}
},
"required": [
"name",
"type"
],
"type": "object"
}