351f2ae2df7435ede3588e077ef546c9ccfacb6fsource_git · tai-dt/mcp-tailwind-gemini · current release
Observed 2026-08-25T09:17:33.362Z using mcpSecurity-inventory. Status: succeeded. Negotiated protocol: 2025-06-18.
{
"tools": {}
}| Tool | Category | Annotations | Risk |
|---|---|---|---|
analyze_designAnalyze design with AI for improvements and best practicesInput schema{
"type": "object",
"properties": {
"html": {
"type": "string",
"description": "HTML code to analyze"
},
"css": {
"type": "string",
"description": "Additional CSS code (optional)"
},
"context": {
"type": "string",
"description": "Design context or purpose"
},
"checkAccessibility": {
"type": "boolean",
"default": true,
"description": "Check accessibility compliance"
},
"checkResponsive": {
"type": "boolean",
"default": true,
"description": "Check responsive design"
},
"checkPerformance": {
"type": "boolean",
"default": true,
"description": "Check performance implications"
}
},
"required": [
"html"
]
} | — | — · — | — |
convert_to_tailwindConvert CSS/SCSS to Tailwind classesInput schema{
"type": "object",
"properties": {
"code": {
"type": "string",
"description": "CSS, SCSS, or HTML with styles to convert"
},
"format": {
"type": "string",
"enum": [
"css",
"scss",
"html"
],
"description": "Input format"
},
"preserveCustom": {
"type": "boolean",
"default": false,
"description": "Preserve custom properties that cannot be converted"
},
"optimize": {
"type": "boolean",
"default": true,
"description": "Optimize the converted classes"
}
},
"required": [
"code",
"format"
]
} | — | — · — | — |
create_layoutGenerate responsive layouts with Tailwind CSSInput schema{
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"dashboard",
"landing",
"blog",
"ecommerce",
"portfolio",
"documentation"
],
"description": "Layout type"
},
"sections": {
"type": "array",
"items": {
"type": "string"
},
"description": "Layout sections (header, sidebar, main, footer, etc.)"
},
"complexity": {
"type": "string",
"enum": [
"simple",
"medium",
"complex"
],
"default": "medium",
"description": "Layout complexity"
},
"framework": {
"type": "string",
"enum": [
"html",
"react",
"vue",
"svelte"
],
"default": "html",
"description": "Target framework"
}
},
"required": [
"type",
"sections"
]
} | — | — · — | — |
create_projectCreate a complete project with Vite + Tailwind + shadcn/ui setupInput schema{
"type": "object",
"properties": {
"projectName": {
"type": "string",
"description": "Name of the project"
},
"framework": {
"type": "string",
"enum": [
"react",
"vue",
"svelte"
],
"default": "react",
"description": "Framework to use"
},
"typescript": {
"type": "boolean",
"default": true,
"description": "Use TypeScript"
},
"components": {
"type": "array",
"items": {
"type": "string"
},
"description": "Initial shadcn/ui components to include"
},
"template": {
"type": "string",
"enum": [
"basic",
"dashboard",
"landing",
"blog",
"auth"
],
"default": "basic",
"description": "Project template"
}
},
"required": [
"projectName"
]
} | — | — · — | — |
create_themeGenerate custom Tailwind theme with AI assistanceInput schema{
"type": "object",
"properties": {
"brandColor": {
"type": "string",
"description": "Primary brand color (hex, rgb, or color name)"
},
"style": {
"type": "string",
"enum": [
"minimal",
"modern",
"classic",
"bold",
"elegant"
],
"default": "modern",
"description": "Design style"
},
"colorCount": {
"type": "number",
"default": 9,
"minimum": 5,
"maximum": 11,
"description": "Number of color shades to generate"
},
"includeConfig": {
"type": "boolean",
"default": true,
"description": "Generate tailwind.config.js"
},
"typography": {
"type": "boolean",
"default": true,
"description": "Include typography scale"
},
"spacing": {
"type": "boolean",
"default": true,
"description": "Include custom spacing scale"
}
},
"required": [
"brandColor"
]
} | — | — · — | — |
generate_componentGenerate Tailwind CSS components with AI assistance using GeminiInput schema{
"type": "object",
"properties": {
"description": {
"type": "string",
"description": "Description of the component to generate"
},
"type": {
"type": "string",
"enum": [
"button",
"card",
"form",
"navigation",
"modal",
"table",
"custom"
],
"description": "Type of component"
},
"framework": {
"type": "string",
"enum": [
"html",
"react",
"vue",
"svelte",
"angular"
],
"default": "react",
"description": "Target framework"
},
"variant": {
"type": "string",
"enum": [
"primary",
"secondary",
"outline",
"ghost",
"link"
],
"default": "primary",
"description": "Component variant"
},
"size": {
"type": "string",
"enum": [
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "md",
"description": "Component size"
},
"theme": {
"type": "string",
"enum": [
"light",
"dark",
"auto"
],
"default": "light",
"description": "Theme preference"
},
"useShadcn": {
"type": "boolean",
"default": true,
"description": "Use shadcn/ui components as base"
},
"responsive": {
"type": "boolean",
"default": true,
"description": "Make component responsive"
},
"accessibility": {
"type": "boolean",
"default": true,
"description": "Include accessibility features"
}
},
"required": [
"description",
"type"
]
} | — | — · — | — |
generate_previewGenerate visual preview of Tailwind componentsInput schema{
"type": "object",
"properties": {
"html": {
"type": "string",
"description": "HTML code to preview"
},
"width": {
"type": "number",
"default": 800,
"description": "Preview width in pixels"
},
"height": {
"type": "number",
"default": 600,
"description": "Preview height in pixels"
},
"darkMode": {
"type": "boolean",
"default": false,
"description": "Generate dark mode preview"
},
"responsive": {
"type": "boolean",
"default": false,
"description": "Generate responsive breakpoint previews"
}
},
"required": [
"html"
]
} | — | — · — | — |
get_shadcn_componentGet shadcn/ui component source code and usage examplesInput schema{
"type": "object",
"properties": {
"componentName": {
"type": "string",
"description": "Name of the shadcn/ui component (e.g., \"button\", \"card\", \"form\")"
},
"includeDemo": {
"type": "boolean",
"default": true,
"description": "Include usage examples"
},
"framework": {
"type": "string",
"enum": [
"react",
"svelte"
],
"default": "react",
"description": "Framework to get component for"
}
},
"required": [
"componentName"
]
} | — | — · — | — |
optimize_classesOptimize and clean up Tailwind CSS classesInput schema{
"type": "object",
"properties": {
"html": {
"type": "string",
"description": "HTML with Tailwind classes to optimize"
},
"removeRedundant": {
"type": "boolean",
"default": true,
"description": "Remove redundant classes"
},
"mergeConflicts": {
"type": "boolean",
"default": true,
"description": "Resolve conflicting classes"
},
"suggestAlternatives": {
"type": "boolean",
"default": true,
"description": "Suggest better alternatives"
}
},
"required": [
"html"
]
} | — | — · — | — |
suggest_improvementsGet AI-powered suggestions for design improvementsInput schema{
"type": "object",
"properties": {
"html": {
"type": "string",
"description": "HTML code to analyze"
},
"context": {
"type": "string",
"description": "Context about the design goals"
},
"targetAudience": {
"type": "string",
"description": "Target audience for the design"
},
"focusAreas": {
"type": "array",
"items": {
"type": "string",
"enum": [
"accessibility",
"performance",
"ux",
"aesthetics",
"responsiveness"
]
},
"description": "Areas to focus improvements on"
}
},
"required": [
"html"
]
} | — | — · — | — |