MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

• src/tools/tech-stack.ts:243-482 (handler)

  The core handler function that takes TechStackInput and returns a comprehensive markdown-formatted tech stack recommendation including frameworks, styling, animations, UI components, backend, deployment, and setup instructions.
  export function suggestTechStack(input: TechStackInput): string { const { interfaceType, designStyle = 'minimalist', animationIntensity = 'moderate', requirements, preferences } = input; const framework = FRAMEWORK_RECOMMENDATIONS[interfaceType]; const styling = STYLING_RECOMMENDATIONS[designStyle]; const animation = ANIMATION_LIBRARIES[animationIntensity]; const uiComponents = getUIComponentLibrary(interfaceType, designStyle); const backend = getBackendRecommendations(interfaceType); return `# Tech Stack Recommendation ## Overview **Interface Type**: ${interfaceType.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} **Design Style**: ${designStyle.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} **Animation Level**: ${animationIntensity} ${requirements ? `**Special Requirements**: ${requirements.join(', ')}` : ''} --- ## Frontend Framework ### Recommended: ${framework.primary} **Why**: ${framework.reasoning} **Alternatives**: ${framework.alternatives.map(alt => `- ${alt}`).join('\n')} ${preferences?.framework ? `**User Preference**: ${preferences.framework} (consider if it meets requirements)` : ''} --- ## Styling Approach ### Recommended: ${styling.primary} **Why**: ${styling.reasoning} **Alternatives**: ${styling.alternatives.map(alt => `- ${alt}`).join('\n')} ### Styling Setup Checklist - [ ] Configure design tokens (colors, spacing, typography) - [ ] Set up dark mode support - [ ] Create base component styles - [ ] Implement responsive utilities - [ ] Add animation utilities --- ## Animation Library ### Recommended: ${animation.primary} **Why**: ${animation.reasoning} **Alternatives**: ${animation.alternatives.map(alt => `- ${alt}`).join('\n')} ### Animation Setup \`\`\`bash # For Framer Motion npm install framer-motion # For GSAP (if using) npm install gsap @gsap/react \`\`\` ### Key Animation Patterns to Implement 1. Page transitions (route changes) 2. Scroll-triggered reveals 3. Hover/interaction states 4. Loading states 5. Micro-interactions --- ## UI Component Library ### Recommended: ${uiComponents.primary} **Why**: ${uiComponents.reasoning} **Alternatives**: ${uiComponents.alternatives.map(alt => `- ${alt}`).join('\n')} ### Essential Components - [ ] Button (with variants and states) - [ ] Input / Form controls - [ ] Card / Container - [ ] Modal / Dialog - [ ] Navigation components - [ ] Loading indicators - [ ] Toast / Notifications --- ${backend.length > 0 ? `## Backend & Infrastructure ${backend.map(rec => ` ### ${rec.category} **Recommended**: ${rec.primary} **Why**: ${rec.reasoning} **Alternatives**: ${rec.alternatives.join(', ')} `).join('\n')} ---` : ''} ## Development Tools ### Essential | Tool | Purpose | Recommendation | |------|---------|----------------| | Package Manager | Dependency management | pnpm (fast, efficient) | | Linting | Code quality | ESLint + Prettier | | Type Checking | Type safety | TypeScript | | Testing | Quality assurance | Vitest + Testing Library | | Dev Server | Local development | Vite or Next.js dev | ### Recommended Dev Dependencies \`\`\`bash # Core dev tools npm install -D typescript @types/react @types/node npm install -D eslint prettier eslint-config-prettier npm install -D vitest @testing-library/react # Type checking npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin \`\`\` --- ## Deployment & Hosting ### Recommended Platforms | Platform | Best For | Features | |----------|----------|----------| | **Vercel** | Next.js, React | Edge functions, preview deploys, analytics | | **Netlify** | Static sites, Astro | Form handling, functions, identity | | **Railway** | Full-stack apps | Databases, background jobs | | **Cloudflare Pages** | Static + Workers | Global CDN, edge compute | ### Deployment Checklist - [ ] Environment variables configured - [ ] Build optimization (bundle size) - [ ] Image optimization configured - [ ] Caching headers set - [ ] Error tracking (Sentry) - [ ] Analytics (Vercel/Plausible) --- ## Performance Optimization ### Build-time Optimizations - Static generation where possible - Image optimization (next/image, astro:assets) - Font optimization (next/font, fontsource) - Code splitting by route ### Runtime Optimizations - Lazy load below-fold content - Prefetch likely navigation targets - Use Intersection Observer for animations - Implement skeleton loaders ### Performance Budget | Metric | Target | Tool | |--------|--------|------| | LCP | < 2.5s | Lighthouse | | FID | < 100ms | Lighthouse | | CLS | < 0.1 | Lighthouse | | Bundle Size | < 200KB JS | Bundle analyzer | --- ## Project Setup Commands \`\`\`bash # Create Next.js project npx create-next-app@latest my-project --typescript --tailwind --app # Add essential dependencies cd my-project npm install framer-motion npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu npm install clsx tailwind-merge # Add shadcn/ui (optional) npx shadcn-ui@latest init \`\`\` --- ## Folder Structure Recommendation \`\`\` src/ ├── app/ # Next.js App Router │ ├── (marketing)/ # Marketing pages group │ ├── (dashboard)/ # Dashboard pages group │ ├── api/ # API routes │ └── layout.tsx # Root layout ├── components/ │ ├── ui/ # Base UI components │ ├── sections/ # Page sections │ └── layouts/ # Layout components ├── lib/ │ ├── utils.ts # Utility functions │ ├── animations.ts # Animation configs │ └── constants.ts # App constants ├── hooks/ # Custom React hooks ├── styles/ │ └── globals.css # Global styles └── types/ # TypeScript types \`\`\` --- ## Quality Assurance ### Pre-launch Checklist - [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge) - [ ] Mobile responsiveness verified - [ ] Accessibility audit passed (axe, WAVE) - [ ] Performance audit (Lighthouse 90+) - [ ] SEO meta tags configured - [ ] Error tracking configured - [ ] Analytics implemented - [ ] Security headers set --- *This tech stack is optimized for creating a ${designStyle} ${interfaceType.replace(/-/g, ' ')} with ${animationIntensity} animations. Adjust based on team expertise and specific requirements.* `; }
• src/server.ts:95-109 (schema)

  Zod schema defining the input validation for the suggest_tech_stack tool parameters.
  const SuggestTechStackSchema = z.object({ interfaceType: z.enum([ 'website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom' ]).describe('Type of interface'), designStyle: z.enum([ 'minimalist', 'bold-experimental', 'corporate-professional', 'playful-creative', 'luxury-elegant', 'tech-futuristic', 'organic-natural', 'brutalist', 'retro-vintage', 'glassmorphic', 'neumorphic', 'custom' ]).optional().describe('Design style being used'), animationIntensity: z.enum(['subtle', 'moderate', 'dramatic', 'cinematic']) .optional().describe('Animation level'), requirements: z.array(z.string()).optional().describe('Special requirements'), });
• src/server.ts:225-254 (registration)

  Tool registration in the ListTools response, defining name, description, and input schema for MCP.
  { name: 'suggest_tech_stack', description: 'Get technology stack recommendations including frameworks, styling approaches, animation libraries, and deployment options based on your interface type and design requirements.', inputSchema: { type: 'object', properties: { interfaceType: { type: 'string', enum: ['website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom'], description: 'Type of interface' }, designStyle: { type: 'string', enum: ['minimalist', 'bold-experimental', 'corporate-professional', 'playful-creative', 'luxury-elegant', 'tech-futuristic', 'organic-natural', 'brutalist', 'retro-vintage', 'glassmorphic', 'neumorphic', 'custom'], description: 'Design style being used' }, animationIntensity: { type: 'string', enum: ['subtle', 'moderate', 'dramatic', 'cinematic'], description: 'Animation level' }, requirements: { type: 'array', items: { type: 'string' }, description: 'Special requirements' } }, required: ['interfaceType'] } }
• src/server.ts:309-318 (registration)

  Handler dispatch in CallToolRequest that parses input with schema and calls the suggestTechStack function.
  case 'suggest_tech_stack': { const parsed = SuggestTechStackSchema.parse(args); const result = suggestTechStack({ interfaceType: parsed.interfaceType as InterfaceType, designStyle: parsed.designStyle as DesignStyle | undefined, animationIntensity: parsed.animationIntensity as AnimationIntensity | undefined, requirements: parsed.requirements, }); return { content: [{ type: 'text', text: result }] }; }
• src/tools/tech-stack.ts:3-13 (helper)

  TypeScript interface defining the input structure for the suggestTechStack handler.
  interface TechStackInput { interfaceType: InterfaceType; designStyle?: DesignStyle; animationIntensity?: AnimationIntensity; requirements?: string[]; preferences?: { framework?: string; styling?: string; complexity?: 'simple' | 'moderate' | 'complex'; }; }