MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

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

  Core handler function that processes TechStackInput and generates a comprehensive Markdown report recommending frameworks, styling, animations, UI libraries, backend, deployment, and more based on interface type and preferences.
  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 input schema used for validating arguments to the suggest_tech_stack tool.
  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)

  Registration of the suggest_tech_stack tool in the ListToolsRequestSchema handler, including name, description, and input schema.
  { 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)

  Dispatch logic in CallToolRequestSchema handler that validates input and invokes the suggestTechStack handler 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:15-76 (helper)

  Key helper constant providing framework recommendations mapped by InterfaceType, used by the handler.
  const FRAMEWORK_RECOMMENDATIONS: Record<InterfaceType, { primary: string; alternatives: string[]; reasoning: string }> = { 'website-landing': { primary: 'Next.js (App Router)', alternatives: ['Astro', 'Remix', 'SvelteKit'], reasoning: 'Static generation for performance, React ecosystem for components, easy deployment' }, 'website-saas': { primary: 'Next.js (App Router)', alternatives: ['Remix', 'Nuxt 3', 'SvelteKit'], reasoning: 'Full-stack capabilities, API routes, authentication patterns, SSR for SEO' }, 'website-portfolio': { primary: 'Astro', alternatives: ['Next.js', 'SvelteKit', 'Gatsby'], reasoning: 'Zero JS by default for speed, excellent for content-focused sites, partial hydration' }, 'website-ecommerce': { primary: 'Next.js with Shopify/Medusa', alternatives: ['Remix', 'Hydrogen (Shopify)', 'Nuxt + Saleor'], reasoning: 'Commerce integrations, ISR for product pages, robust ecosystem' }, 'dashboard': { primary: 'Next.js or Vite + React', alternatives: ['Vue 3 + Vite', 'Angular', 'SvelteKit'], reasoning: 'Rich component ecosystem, state management options, real-time capabilities' }, 'mobile-app': { primary: 'React Native with Expo', alternatives: ['Flutter', 'SwiftUI + Kotlin (native)', 'Capacitor + React'], reasoning: 'Cross-platform with native feel, large ecosystem, fast development' }, 'desktop-app': { primary: 'Electron with React/Vue', alternatives: ['Tauri (Rust)', 'Flutter Desktop', '.NET MAUI'], reasoning: 'Web tech familiarity, cross-platform, rich UI capabilities' }, 'cli-terminal': { primary: 'Node.js with Commander/Ink', alternatives: ['Go with Cobra/Bubble Tea', 'Rust with Clap', 'Python with Rich/Click'], reasoning: 'JavaScript familiarity, Ink for React-like CLI UIs, good ecosystem' }, 'presentation': { primary: 'Reveal.js or Slidev', alternatives: ['MDX Deck', 'Spectacle', 'Keynote/PowerPoint'], reasoning: 'Code-based slides, version control, custom animations possible' }, 'admin-panel': { primary: 'React Admin or Refine', alternatives: ['AdminJS', 'Strapi', 'Custom Next.js'], reasoning: 'Pre-built CRUD patterns, customizable, integrates with any backend' }, 'social-platform': { primary: 'Next.js with real-time backend', alternatives: ['Remix', 'SvelteKit', 'Nuxt 3'], reasoning: 'SSR for feed, real-time updates, image optimization, auth patterns' }, 'custom': { primary: 'Next.js (versatile default)', alternatives: ['Remix', 'SvelteKit', 'Astro'], reasoning: 'Flexible for most use cases, strong ecosystem, good defaults' } };