MCP Tailwind Gemini Server

Instructions

Implementation Reference

• src/index.ts:331-360 (registration)

  Registration of the 'suggest_improvements' tool in the TOOLS array, including input schema definition.
  { name: 'suggest_improvements', description: 'Get AI-powered suggestions for design improvements', inputSchema: { 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'] } },
• src/utils/tool-functions.ts:88-97 (handler)

  Placeholder handler function for the suggest_improvements tool, imported and called from index.ts.
  export async function suggestImprovements(args: SuggestionOptions) { return { content: [ { type: 'text', text: `Generated suggestions for ${args.context || 'general'}\nFocus: ${args.focus || 'all'}` } ] }; }
• src/types.ts:80-88 (schema)

  TypeScript interface defining the input options for the suggest_improvements tool.
  export interface SuggestionOptions { html: string; context?: 'landing-page' | 'dashboard' | 'component' | 'form' | 'navigation'; focus?: 'accessibility' | 'performance' | 'design' | 'ux' | 'seo' | 'all'; priority?: 'critical' | 'important' | 'nice-to-have' | 'all'; framework?: 'react' | 'vue' | 'svelte' | 'html'; targetAudience?: string; businessGoals?: string[]; }
• src/index.ts:447-448 (registration)

  Dispatch handler in the switch statement that routes calls to the suggestImprovements function.
  case 'suggest_improvements': return await suggestImprovements(args as unknown as SuggestionOptions);
• src/tools/ai-suggestions.ts:10-74 (handler)

  Full AI-powered implementation of suggestImprovements using Gemini API, potentially intended as the real handler (not currently wired).
  export async function suggestImprovements(args: SuggestionsRequest) { try { const { html, context = '', targetAudience = '', focusAreas = ['accessibility', 'performance', 'ux', 'aesthetics', 'responsiveness'] } = args; if (isGeminiAvailable()) { const prompt = `Analyze this HTML code and provide intelligent design improvement suggestions: HTML Code: ${html} ${context ? `Context: ${context}` : ''} ${targetAudience ? `Target Audience: ${targetAudience}` : ''} Focus Areas: ${focusAreas.join(', ')} Please provide detailed, actionable suggestions for improvement in the following areas: ${focusAreas.includes('accessibility') ? '**Accessibility**: WCAG compliance, screen reader support, keyboard navigation, color contrast, semantic HTML' : ''} ${focusAreas.includes('performance') ? '**Performance**: CSS optimization, bundle size, render performance, Core Web Vitals' : ''} ${focusAreas.includes('ux') ? '**User Experience**: Usability, interaction patterns, user flow, intuitive design' : ''} ${focusAreas.includes('aesthetics') ? '**Visual Design**: Typography, color harmony, spacing, visual hierarchy, modern design trends' : ''} ${focusAreas.includes('responsiveness') ? '**Responsive Design**: Mobile-first approach, breakpoint strategy, cross-device compatibility' : ''} For each suggestion, provide: 1. Current issue or opportunity 2. Specific recommendation 3. Implementation details with Tailwind classes 4. Expected impact/benefit 5. Priority level (High/Medium/Low) Format as structured markdown with clear sections and actionable code examples.`; const suggestions = await callGemini(prompt); return { content: [ { type: 'text', text: `# AI-Powered Design Improvement Suggestions\n\n${suggestions}` } ] }; } else { // Fallback manual suggestions const manualSuggestions = generateManualSuggestions(html, focusAreas); return { content: [ { type: 'text', text: manualSuggestions } ] }; } } catch (error) { console.error('Suggestions error:', error); throw new Error(`Failed to generate suggestions: ${error instanceof Error ? error.message : 'Unknown error'}`); } }