UI Expert MCP Server

Instructions

Implementation Reference

• src/index.ts:418-462 (handler)

  The core handler function for the 'improve_component' tool. It takes parsed input parameters including component code, framework, optional improvements, and accessibility focus, then returns a markdown-formatted string with detailed improvement suggestions across performance, accessibility, code quality, styling, and best practices.
  function improveComponent(params: z.infer<typeof ImproveComponentSchema>): string { const { componentCode, framework, improvements = [], accessibility } = params; // This is a simplified example - in a real implementation, // you'd parse and analyze the component code return `# Component Improvement Suggestions ## Original Component: \`\`\`${framework} ${componentCode} \`\`\` ## Improvements: ### 1. Performance Optimizations - Add React.memo() wrapper to prevent unnecessary re-renders - Use useCallback for event handlers - Implement lazy loading for heavy dependencies ### 2. Accessibility Enhancements ${accessibility ? `- Add proper ARIA labels and roles - Ensure keyboard navigation support - Implement focus management - Add screen reader announcements` : '- Consider adding ARIA labels for better accessibility'} ### 3. Code Quality - Extract magic numbers into constants - Add proper TypeScript types - Implement error boundaries - Add loading and error states ### 4. Styling Improvements - Use CSS modules or styled-components for scoped styles - Implement responsive design with mobile-first approach - Add hover and focus states - Use CSS custom properties for theming ### 5. Best Practices - Add prop validation - Implement proper component composition - Use semantic HTML elements - Add unit tests ${improvements.length > 0 ? `\n### Requested Improvements:\n${improvements.map(imp => `- ${imp}`).join('\n')}` : ''}`; }
• src/index.ts:26-31 (schema)

  Zod schema defining the input parameters for the 'improve_component' tool: required componentCode and framework, optional improvements array and accessibility boolean.
  const ImproveComponentSchema = z.object({ componentCode: z.string().describe("Current component code"), framework: z.string().describe("Frontend framework being used"), improvements: z.array(z.string()).optional().describe("Specific improvements requested"), accessibility: z.boolean().optional().describe("Focus on accessibility improvements"), });
• src/index.ts:93-110 (registration)

  Tool registration in the ListTools response, defining name, description, and inputSchema matching the Zod schema.
  { name: "improve_component", description: "Improve existing UI component with best practices", inputSchema: { type: "object", properties: { componentCode: { type: "string", description: "Current component code" }, framework: { type: "string", description: "Frontend framework" }, improvements: { type: "array", items: { type: "string" }, description: "Specific improvements requested" }, accessibility: { type: "boolean", description: "Focus on accessibility" }, }, required: ["componentCode", "framework"], }, },
• src/index.ts:159-169 (registration)

  Handler case in the CallToolRequest switch statement that parses input with ImproveComponentSchema and calls the improveComponent function.
  case "improve_component": { const parsed = ImproveComponentSchema.parse(args); return { content: [ { type: "text", text: improveComponent(parsed), }, ], }; }