suggest_tech_stack
Recommends technology stacks with frameworks, styling approaches, animation libraries, and deployment options based on interface type and design requirements.
Instructions
Get technology stack recommendations including frameworks, styling approaches, animation libraries, and deployment options based on your interface type and design requirements.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| interfaceType | Yes | Type of interface | |
| designStyle | No | Design style being used | |
| animationIntensity | No | Animation level | |
| requirements | No | Special requirements |
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'; }; }