MCP Tailwind Gemini Server

Instructions

Implementation Reference

• src/utils/tool-functions.ts:52-60 (handler)

  The primary handler function for the 'analyze_design' tool, called directly from src/index.ts. Currently implemented as a placeholder that returns basic analysis info.
  export async function analyzeDesign(args: DesignAnalysisOptions) { return { content: [ { type: 'text', text: `Analyzed design for ${args.context || 'general'} context\nHTML length: ${args.html.length} characters` } ] };
• src/index.ts:231-267 (registration)

  Registration of the 'analyze_design' tool in the TOOLS array, used by ListToolsRequestSchema handler. Includes name, description, and input schema.
  { name: 'analyze_design', description: 'Analyze design with AI for improvements and best practices', inputSchema: { 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'] } },
• src/index.ts:441-442 (handler)

  Dispatch handler in the CallToolRequestSchema switch statement that invokes the analyzeDesign function for 'analyze_design' tool calls.
  case 'analyze_design': return await analyzeDesign(args as unknown as DesignAnalysisOptions);
• src/types.ts:44-54 (schema)

  TypeScript interface defining the input options for the analyzeDesign function, matching the tool's inputSchema.
  export interface DesignAnalysisOptions { html: string; context?: 'landing-page' | 'dashboard' | 'component' | 'form' | 'navigation' | 'layout' | 'general'; checkAccessibility?: boolean; checkResponsive?: boolean; checkPerformance?: boolean; checkUsability?: boolean; checkBrandConsistency?: boolean; framework?: 'react' | 'vue' | 'svelte' | 'html'; designSystem?: string; }
• src/tools/design-analyzer.ts:12-77 (helper)

  Comprehensive helper implementation of analyzeDesign with AI-powered analysis via Gemini and fallback manual checks, not currently used by the main tool handler.
  export async function analyzeDesign(args: AnalyzeRequest) { try { const { html, css = '', context = '', checkAccessibility = true, checkResponsive = true, checkPerformance = true } = args; if (isGeminiAvailable()) { const prompt = `Analyze this HTML/CSS code for design quality, best practices, and improvements: HTML: ${html} ${css ? `CSS:\n${css}` : ''} ${context ? `Context: ${context}` : ''} Please provide a comprehensive analysis covering: ${checkAccessibility ? '1. **Accessibility**: Check for ARIA labels, semantic HTML, color contrast, keyboard navigation, screen reader compatibility' : ''} ${checkResponsive ? '2. **Responsive Design**: Evaluate mobile-first approach, breakpoints, flexible layouts' : ''} ${checkPerformance ? '3. **Performance**: Analyze CSS efficiency, bundle size implications, render performance' : ''} 4. **Design Quality**: Visual hierarchy, spacing consistency, typography, color usage 5. **Code Quality**: Tailwind best practices, maintainability, reusability 6. **UX Considerations**: Usability, interaction patterns, user flow For each area, provide: - Current state assessment (Good/Needs Improvement/Poor) - Specific issues found - Actionable recommendations - Code examples for improvements Format as structured markdown with clear sections.`; const analysis = await callGemini(prompt); return { content: [ { type: 'text', text: `# Design Analysis Report\n\n${analysis}` } ] }; } else { // Fallback manual analysis const manualAnalysis = performManualAnalysis(html, css, checkAccessibility, checkResponsive, checkPerformance); return { content: [ { type: 'text', text: manualAnalysis } ] }; } } catch (error) { console.error('Design analysis error:', error); throw new Error(`Failed to analyze design: ${error instanceof Error ? error.message : 'Unknown error'}`); } }