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

Houtini-lm

generate_responsive_component

Instructions

Input Schema

Input Schema (JSON Schema)

Other Tools from Houtini-lm

Related Tools

MCP directory API