MCP UI/UX Prompt Refiner

import type { InterfaceType, DesignStyle, AnimationIntensity, TechStackRecommendation } from '../utils/types.js'; interface TechStackInput { interfaceType: InterfaceType; designStyle?: DesignStyle; animationIntensity?: AnimationIntensity; requirements?: string[]; preferences?: { framework?: string; styling?: string; complexity?: 'simple' | 'moderate' | 'complex'; }; } 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' } }; const STYLING_RECOMMENDATIONS: Record<DesignStyle, { primary: string; alternatives: string[]; reasoning: string }> = { minimalist: { primary: 'Tailwind CSS', alternatives: ['CSS Modules', 'Vanilla Extract', 'Panda CSS'], reasoning: 'Utility-first for rapid iteration, consistent spacing/sizing, easy to maintain' }, 'bold-experimental': { primary: 'Tailwind CSS + Custom CSS', alternatives: ['Styled Components', 'CSS Modules', 'Emotion'], reasoning: 'Flexibility for custom effects, CSS-in-JS for dynamic styles' }, 'corporate-professional': { primary: 'Tailwind CSS + shadcn/ui', alternatives: ['Chakra UI', 'Radix + CSS', 'Material UI'], reasoning: 'Consistent, accessible components with professional appearance' }, 'playful-creative': { primary: 'Tailwind CSS + Framer Motion', alternatives: ['Styled Components', 'Stitches', 'CSS Modules'], reasoning: 'Easy animation integration, dynamic color handling' }, 'luxury-elegant': { primary: 'CSS Modules or Vanilla Extract', alternatives: ['Tailwind CSS', 'Styled Components', 'SCSS'], reasoning: 'Precise control for refined details, custom typography handling' }, 'tech-futuristic': { primary: 'Tailwind CSS + Custom Properties', alternatives: ['CSS-in-JS', 'SCSS', 'PostCSS'], reasoning: 'Easy dark mode, gradient utilities, custom neon effects' }, 'organic-natural': { primary: 'Tailwind CSS', alternatives: ['CSS Modules', 'Styled Components', 'SCSS'], reasoning: 'Custom curves via clip-path, earth-tone color palette easy' }, brutalist: { primary: 'Plain CSS or CSS Modules', alternatives: ['Tailwind (minimal)', 'SCSS', 'No framework'], reasoning: 'Raw aesthetic fits minimal tooling approach' }, 'retro-vintage': { primary: 'SCSS or CSS Modules', alternatives: ['Tailwind CSS', 'Styled Components'], reasoning: 'Custom fonts, textures, specific color manipulation' }, glassmorphic: { primary: 'Tailwind CSS + backdrop-blur utilities', alternatives: ['CSS Modules', 'Styled Components'], reasoning: 'Native backdrop-filter support, layering utilities' }, neumorphic: { primary: 'CSS Modules or Tailwind with custom shadows', alternatives: ['Styled Components', 'SCSS'], reasoning: 'Precise shadow control for soft UI effect' }, custom: { primary: 'Tailwind CSS', alternatives: ['CSS Modules', 'Styled Components', 'SCSS'], reasoning: 'Versatile default for custom requirements' } }; const ANIMATION_LIBRARIES: Record<AnimationIntensity, { primary: string; alternatives: string[]; reasoning: string }> = { subtle: { primary: 'CSS Transitions', alternatives: ['Tailwind transitions', 'Auto-animate'], reasoning: 'Native CSS is sufficient for subtle effects, best performance' }, moderate: { primary: 'Framer Motion', alternatives: ['React Spring', 'Motion One', 'CSS Animations'], reasoning: 'Declarative animations, good defaults, gesture support' }, dramatic: { primary: 'Framer Motion + GSAP', alternatives: ['React Spring', 'Anime.js', 'Lottie'], reasoning: 'Complex timelines, scroll-triggered animations, precise control' }, cinematic: { primary: 'GSAP + ScrollTrigger', alternatives: ['Framer Motion', 'Theatre.js', 'Three.js'], reasoning: 'Industry-standard for complex animations, timeline control, scroll-driven' } }; function getUIComponentLibrary(interfaceType: InterfaceType, style: DesignStyle): TechStackRecommendation { const libraries: Record<string, TechStackRecommendation> = { 'dashboard-default': { category: 'UI Components', primary: 'shadcn/ui + Recharts', alternatives: ['Tremor', 'Ant Design', 'Material UI'], reasoning: 'Accessible, customizable components with built-in data visualization' }, 'admin-default': { category: 'UI Components', primary: 'shadcn/ui or Radix Primitives', alternatives: ['Ant Design', 'Chakra UI', 'Material UI'], reasoning: 'Comprehensive component set for admin interfaces' }, 'minimal': { category: 'UI Components', primary: 'Radix Primitives (unstyled)', alternatives: ['Headless UI', 'Reach UI', 'Custom'], reasoning: 'Unstyled primitives for complete design control' }, 'experimental': { category: 'UI Components', primary: 'Custom components + Radix', alternatives: ['Headless UI', 'Ariakit'], reasoning: 'Build custom with accessibility handled by primitives' }, 'default': { category: 'UI Components', primary: 'shadcn/ui', alternatives: ['Radix + Tailwind', 'Headless UI', 'Chakra UI'], reasoning: 'Beautiful, accessible, customizable component system' } }; if (['dashboard', 'admin-panel'].includes(interfaceType)) { return libraries[`${interfaceType.split('-')[0]}-default`] || libraries.default; } if (style === 'minimalist') return libraries.minimal; if (style === 'bold-experimental') return libraries.experimental; return libraries.default; } function getBackendRecommendations(interfaceType: InterfaceType): TechStackRecommendation[] { const recommendations: TechStackRecommendation[] = []; const needsAuth = ['website-saas', 'dashboard', 'admin-panel', 'social-platform', 'mobile-app']; const needsRealtime = ['dashboard', 'social-platform', 'mobile-app']; const needsDatabase = ['website-saas', 'website-ecommerce', 'dashboard', 'admin-panel', 'social-platform']; if (needsAuth.includes(interfaceType)) { recommendations.push({ category: 'Authentication', primary: 'NextAuth.js / Auth.js', alternatives: ['Clerk', 'Supabase Auth', 'Firebase Auth'], reasoning: 'Flexible providers, session management, easy integration' }); } if (needsRealtime.includes(interfaceType)) { recommendations.push({ category: 'Real-time', primary: 'Socket.io or Pusher', alternatives: ['Supabase Realtime', 'Ably', 'Firebase Realtime'], reasoning: 'WebSocket abstraction, fallbacks, presence features' }); } if (needsDatabase.includes(interfaceType)) { recommendations.push({ category: 'Database', primary: 'PostgreSQL + Prisma', alternatives: ['Supabase', 'PlanetScale + Drizzle', 'MongoDB'], reasoning: 'Type-safe queries, migrations, excellent DX' }); } return recommendations; } 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.* `; }