App Builder

App Builder - Application Building Orchestrator

Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.

🎯 Selective Reading Rule

Read ONLY files relevant to the request! Check the content map, find what you need.

---

📦 Templates (13)

Quick-start scaffolding for new projects. Read the matching template only!

---

🔗 Related Agents

---

Usage Example

User: "Make an Instagram clone with photo sharing and likes"

App Builder Process:
1. Project type: Social Media App
2. Tech stack: Next.js + Prisma + Cloudinary + Clerk
3. Create plan:
   ├─ Database schema (users, posts, likes, follows)
   ├─ API routes (auth, posts, likes, follows)
   ├─ Pages (feed, profile, upload)
   └─ Components (PostCard, Feed, LikeButton)
4. Coordinate agents
5. Report progress
6. Start preview

Agent Coordination

How App Builder orchestrates specialist agents.

Agent Pipeline

┌─────────────────────────────────────────────────────────────┐
│                   APP BUILDER (Orchestrator)                 │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                     PROJECT PLANNER                          │
│  • Task breakdown                                            │
│  • Dependency graph                                          │
│  • File structure planning                                   │
│  • Create {task-slug}.md in project root (MANDATORY)             │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│              CHECKPOINT: PLAN VERIFICATION                   │
│  🔴 VERIFY: Does {task-slug}.md exist in project root?       │
│  🔴 If NO → STOP → Create plan file first                    │
│  🔴 If YES → Proceed to specialist agents                    │
└─────────────────────────────────────────────────────────────┘
                              │
          ┌───────────────────┼───────────────────┐
          ▼                   ▼                   ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ DATABASE        │ │ BACKEND         │ │ FRONTEND        │
│ ARCHITECT       │ │ SPECIALIST      │ │ SPECIALIST      │
│                 │ │                 │ │                 │
│ • Schema design │ │ • API routes    │ │ • Components    │
│ • Migrations    │ │ • Controllers   │ │ • Pages         │
│ • Seed data     │ │ • Middleware    │ │ • Styling       │
└─────────────────┘ └─────────────────┘ └─────────────────┘
          │                   │                   │
          └───────────────────┼───────────────────┘
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                 PARALLEL PHASE (Optional)                    │
│  • Security Auditor → Vulnerability check                   │
│  • Test Engineer → Unit tests                               │
│  • Performance Optimizer → Bundle analysis                  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                     DEVOPS ENGINEER                          │
│  • Environment setup                                         │
│  • Preview deployment                                        │
│  • Health check                                              │
└─────────────────────────────────────────────────────────────┘

Execution Order

🔴 CRITICAL: Phase 1.5 is MANDATORY. No specialist agents proceed without {task-slug}.md verification.

Feature Building

How to analyze and implement new features.

Feature Analysis

Request: "add payment system"

Analysis:
├── Required Changes:
│   ├── Database: orders, payments tables
│   ├── Backend: /api/checkout, /api/webhooks/stripe
│   ├── Frontend: CheckoutForm, PaymentSuccess
│   └── Config: Stripe API keys
│
├── Dependencies:
│   ├── stripe package
│   └── Existing user authentication
│
└── Scope: DB + 2 API routes + 2 components + config

Iterative Enhancement Process

1. Analyze existing project
2. Create change plan
3. Present plan to user
4. Get approval
5. Apply changes
6. Test
7. Show preview

Error Handling

Recovery Strategy

1. Detect error
2. Try automatic fix
3. If failed, report to user
4. Suggest alternative
5. Rollback if necessary

Project Type Detection

Analyze user requests to determine project type and template.

Keyword Matrix

Detection Process

1. Tokenize user request
2. Extract keywords
3. Determine project type
4. Detect missing information → forward to project-planner / orchestrator
5. Suggest tech stack

Conflict Resolution

When a request matches multiple keywords (e.g. "a CLI to manage my e-commerce products" matches both cli and e-commerce), resolve in this order:

Project Scaffolding

Directory structure and core files for new projects.

---

Next.js Full-Stack Structure (Next.js 16 Optimized)

project-name/
├── src/
│   ├── app/                        # Routes only (thin layer)
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css             # Tailwind v4 config (@theme) lives here
│   │   ├── (auth)/                 # Route group - auth pages
│   │   │   ├── login/page.tsx
│   │   │   └── register/page.tsx
│   │   ├── (dashboard)/            # Route group - dashboard layout
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   └── api/                    # Route Handlers (webhooks/external only)
│   │       └── [resource]/route.ts
│   │
│   ├── components/                 # UI components
│   │   ├── ui/                     # Reusable primitives (Button, Input)
│   │   └── forms/                  # Client forms (useActionState)
│   │
│   ├── lib/                        # Shared utilities & server-only logic
│   │   ├── db.ts                   # Prisma singleton client
│   │   ├── dal.ts                  # Data Access Layer (server-only, DTOs)
│   │   └── utils.ts                # Helper functions
│   │
│   ├── actions/                    # Server Actions (mutations)
│   │
│   └── types/                      # Global TypeScript types
│
├── prisma/
│   ├── schema.prisma
│   ├── migrations/
│   └── seed.ts
│
├── public/
├── proxy.ts                        # Network boundary (auth, redirects)
├── .env.example
├── .env.local
├── package.json
├── next.config.ts
├── tsconfig.json
└── README.md

---

Structure Principles

---

---

Path Aliases (tsconfig.json)

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/actions/*": ["./src/actions/*"]
    }
  }
}

---

When to Use What

Tech Stack Selection (2026)

Default and alternative technology choices for web applications.

Default Stack (Web App - 2026)

Frontend:
  framework: Next.js 16 (Stable)
  language: TypeScript 5.7+
  styling: Tailwind CSS v4
  state: React 19 Actions / Server Components
  caching: Next.js 16 Cache Components (Stable)
  bundler: Turbopack (Stable for Dev & Build)

Backend:
  runtime: Node.js 24 (Krypton LTS)
  framework: Next.js API Routes / Hono (for Edge)
  validation: Zod / TypeBox

Database:
  primary: PostgreSQL
  orm: Prisma / Drizzle
  hosting: Supabase / Neon

Auth:
  provider: Auth.js (v5) / Clerk

Monorepo:
  tool: Turborepo 2.0

Alternative Options

Astro Static Site Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── components/      # .astro components
│   ├── content/         # Collection entries (blog/, docs/ .md/.mdx)
│   ├── layouts/         # Page layouts
│   ├── pages/           # File-based routing (only reserved dir)
│   ├── styles/
│   │   └── global.css   # @import "tailwindcss";
│   └── content.config.ts # Collection definitions (Content Layer, in src/ root)
├── public/              # Static assets
├── astro.config.mjs
└── package.json

---

Key Concepts

---

Setup Steps

1. npm create astro@latest {{name}} 2. Add integrations: npx astro add mdx sitemap 3. Add Tailwind v4: npx astro add tailwind (installs @tailwindcss/vite, not the legacy @astrojs/tailwind) 4. Define collections in src/content.config.ts using loaders + Zod schemas 5. npm run dev

---

Deployment

---

Best Practices

• Use Content Collections for type safety
• Leverage static generation
• Add islands only where needed
• Optimize images with Astro Image

Chrome Extension Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

CRXJS + Vite: manifest.config.ts is the source of truth, Vite resolves entries.

project-name/
├── src/
│   ├── popup/           # { index.html, main.tsx, Popup.tsx }
│   ├── options/         # { index.html, main.tsx, Options.tsx }
│   ├── background/      # service-worker.ts (MV3 service worker)
│   ├── content/         # { content-script.ts, content.css }
│   ├── components/      # Shared React
│   └── lib/
│       ├── storage.ts   # Chrome storage helpers
│       └── messaging.ts # Message passing
├── public/              # Static assets (icons)
├── manifest.config.ts   # defineManifest() — typed manifest
├── vite.config.ts       # crx({ manifest }) + react + tailwind
└── package.json

---

Manifest V3 Concepts

---

Permissions

---

Setup Steps

1. npm create vite@latest {{name}} -- --template react-ts 2. Install CRXJS: npm install -D @crxjs/vite-plugin@latest 3. Add Chrome types: npm install -D @types/chrome 4. Create manifest.config.ts with defineManifest, wire crx({ manifest }) in vite.config.ts 5. npm run dev (HMR for popup/options/content) 6. Load in Chrome: chrome://extensions → Load unpacked → select dist/

---

Development Tips

---

Best Practices

• Use type-safe messaging
• Wrap Chrome APIs in promises
• MV3 background is an ephemeral service worker — persist state in chrome.storage, not module globals; use event listeners + alarms, not long-lived timers
• Minimize permissions
• Scope content-script styles to avoid host-page bleed

CLI Tool Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── index.ts         # Entry: #!/usr/bin/env node shebang, wires Commander
│   ├── commands/        # One file per command (factory functions)
│   ├── lib/             # Core logic (framework-agnostic, testable)
│   ├── utils/           # logger (chalk/ora), prompt wrappers
│   └── config.ts        # cosmiconfig loader
├── dist/                # Build output (tsup/tsc)
└── package.json         # "type":"module", "bin":{...}

---

CLI Design Principles

---

Key Components

---

Setup Steps

1. Create project directory 2. npm init -y then set "type": "module" 3. Install deps: npm install commander @inquirer/prompts chalk ora cosmiconfig 4. Point bin at compiled ./dist/index.js, keep #!/usr/bin/env node shebang 5. npm link for local testing

---

Publishing

npm login
npm publish

---

Best Practices

• Keep src/index.ts thin; attach commands via .addCommand() factories in src/commands/
• Put business logic in lib//utils/ so commands stay testable wrappers
• ESM by default; build with tsup/esbuild
• Support both interactive and non-interactive (--yes) modes
• Validate inputs with Zod; exit with proper codes (0 success, 1 error)
• Alternatives worth knowing: @clack/prompts (polished prompts), citty (lightweight ESM command framework)

Electron Desktop App Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

electron-vite layout: main / preload / renderer separation is the 2026 standard.

project-name/
├── src/
│   ├── main/            # Main process (lifecycle, windows, IPC handlers)
│   │   └── index.ts
│   ├── preload/         # contextBridge — type-safe IPC surface
│   │   ├── index.ts
│   │   └── index.d.ts   # Ambient types shared with renderer
│   └── renderer/        # React app
│       ├── index.html
│       └── src/
│           ├── main.tsx
│           ├── App.tsx
│           └── components/
├── resources/           # App icons / static (build-time)
├── build/               # Builder assets (entitlements, icons)
├── electron.vite.config.ts
├── electron-builder.yml
└── package.json         # scripts: electron-vite dev | build | preview

---

Process Model

---

Key Concepts

---

Setup Steps

1. npm create @quick-start/electron@latest {{name}} -- --template react-ts 2. cd {{name}} && npm install 3. Add Tailwind v4: npm install tailwindcss @tailwindcss/vite 4. Define IPC types in src/preload/index.d.ts 5. npm run dev

---

Build Targets

---

Best Practices

• contextIsolation: true (default v12+), sandbox: true (default v20+), nodeIntegration: false (default v5+) — never enable Node for remote content
• Expose a narrow API via contextBridge.exposeInMainWorld, never raw ipcRenderer
• Validate IPC sender against an allowlist; set a restrictive CSP (script-src 'self')
• Type-safe IPC: share types from preload/index.d.ts into the renderer
• Auto-updates with electron-updater

Express.js API Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── app.ts           # Express app + middleware wiring (no listen)
│   ├── server.ts        # Bootstrap: listen() — split for testability
│   ├── config/          # Environment
│   ├── routes/          # Route definitions only
│   ├── controllers/     # HTTP layer (req/res, calls services)
│   ├── services/        # Business logic
│   ├── middlewares/
│   │   ├── auth.ts      # JWT verify
│   │   ├── error.ts     # Error handler
│   │   └── validate.ts  # Zod validation
│   ├── schemas/         # Zod schemas
│   └── utils/
├── tests/
└── package.json

---

Middleware Stack

---

API Response Format

---

Setup Steps

1. Create project directory 2. npm init -y 3. Install deps: npm install express prisma zod bcrypt jsonwebtoken 4. Configure Prisma 5. npm run db:push 6. npm run dev

---

Best Practices

• Split app.ts (wiring) from server.ts (listen) so the app imports cleanly into tests
• Layer architecture (routes → controllers → services)
• Validate all inputs with Zod at the route boundary
• Centralized error handler last (Express 5 auto-forwards rejected promises — no manual catch wrapper needed)
• Environment-based config
• Use Prisma for type-safe DB access

Flutter App Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project_name/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/
│   │   ├── constants/
│   │   ├── theme/
│   │   ├── router/
│   │   └── utils/
│   ├── features/
│   │   ├── auth/
│   │   │   ├── data/
│   │   │   ├── domain/
│   │   │   └── presentation/
│   │   └── home/
│   ├── shared/
│   │   ├── widgets/
│   │   └── providers/
│   └── services/
│       ├── api/
│       └── storage/
├── test/
└── pubspec.yaml

---

Architecture Layers

---

Key Packages

---

Setup Steps

1. flutter create {{name}} --org com.{{bundle}} 2. Update pubspec.yaml 3. flutter pub get 4. Run code generation: dart run build_runner build 5. flutter run

---

Best Practices

• Feature-first folder structure (data / domain / presentation per feature)
• Riverpod 3 with riverpod_annotation codegen (generated ref is just Ref; plain Notifier, no AutoDisposeNotifier)
• Legacy StateProvider/StateNotifierProvider moved to package:riverpod/legacy.dart
• Freezed for immutable data classes
• Go Router for declarative navigation
• Material 3 theming

Turborepo Monorepo Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── apps/
│   ├── web/             # Next.js app
│   ├── api/             # Express API
│   └── docs/            # Documentation
├── packages/
│   ├── ui/              # Shared components (@repo/ui)
│   ├── config/          # ESLint, TS, Tailwind presets (@repo/config)
│   ├── types/           # Shared types (@repo/types)
│   └── utils/           # Shared utilities (@repo/utils)
├── turbo.json           # "tasks" key (renamed from "pipeline" in v2)
├── pnpm-workspace.yaml
└── package.json         # requires "packageManager" field

---

Key Concepts

---

Turbo Tasks (turbo.json)

tasks is the v2 key. The pipeline key was renamed — migrate with npx @turbo/codemod rename-pipeline.

---

Setup Steps

1. Create root directory 2. pnpm init 3. Create pnpm-workspace.yaml 4. Create turbo.json 5. Add apps and packages 6. pnpm install 7. pnpm dev

---

Common Commands

---

Best Practices

• Split apps/ (deployable) from packages/ (libraries, shared config)
• Namespace internal packages with @repo/*; reference via workspace:*
• Define entrypoints with the exports field (better tree-shaking than barrel files)
• Share tsconfig/eslint from packages/config
• Declare task env/globalEnv explicitly (v2 strict env mode)
• Use Turbo remote caching for CI

Next.js Full-Stack Template (2026 Edition)

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma       # Database schema
├── src/
│   ├── app/
│   │   ├── (auth)/         # Route groups for Login/Register
│   │   ├── (dashboard)/    # Protected routes
│   │   ├── api/            # Route Handlers (only for Webhooks/External integration)
│   │   ├── layout.tsx      # Root Layout (Metadata, Providers)
│   │   ├── page.tsx        # Landing Page
│   │   └── globals.css     # Tailwind v4 config (@theme) lives here
│   ├── components/
│   │   ├── ui/             # Reusable UI (Button, Input)
│   │   └── forms/          # Client forms using useActionState
│   ├── lib/
│   │   ├── db.ts           # Prisma singleton client
│   │   ├── utils.ts        # Helper functions
│   │   └── dal.ts          # Data Access Layer (Server-only)
│   ├── actions/            # Server Actions (Mutations)
│   └── types/              # Global TS Types
├── public/
├── next.config.ts          # TypeScript Config
└── package.json

---

Key Concepts (Updated)

---

Environment Variables

---

Setup Steps

1. Initialize Project:

   npx create-next-app@latest my-app --typescript --tailwind --eslint
   # Select Yes for App Router
   # Select No for src directory (optional, this template uses src)

2. Install DB & Validation:

   npm install prisma @prisma/client zod
   npm install -D ts-node # For running seed scripts

3. Configure Tailwind v4 (If missing): Ensure src/app/globals.css uses the new import syntax instead of a config file:

   @import "tailwindcss";

   @theme {
     --color-primary: oklch(0.5 0.2 240);
     --font-sans: "Inter", sans-serif;
   }

4. Initialize Database:

   npx prisma init
   # Update schema.prisma
   npm run db:push

5. Run Developer Server:

   npm run dev --turbo
   # --turbo to enable faster Turbopack

---

Best Practices (2026 Standards)

• Fetch Data: Call Prisma directly in Server Components (async/await). Do not use useEffect for initial data fetching.
• Mutations: Use Server Actions combined with React 19's useActionState to handle loading and error states instead of manual useState.
• Type Safety: Share Zod schemas between Server Actions (input validation) and Client Forms.
• Security: Always validate input data with Zod before passing it to Prisma.
• Styling: Use native CSS variables in Tailwind v4 for easier dynamic theming.

Next.js SaaS Template (Updated 2026)

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma    # Database Schema
├── src/
│   ├── actions/         # NEW: Server Actions (Replaces API Routes for data mutation)
│   │   ├── auth-actions.ts
│   │   ├── billing-actions.ts
│   │   └── user-actions.ts
│   ├── app/
│   │   ├── (auth)/      # Route Group: Login, register
│   │   ├── (dashboard)/ # Route Group: Protected routes (App Layout)
│   │   ├── (marketing)/ # Route Group: Landing, pricing (Marketing Layout)
│   │   └── api/         # Only used for Webhooks or Edge cases
│   │       └── webhooks/stripe/
│   ├── components/
│   │   ├── emails/      # React Email templates
│   │   ├── forms/       # Client components using useActionState (React 19)
│   │   └── ui/          # Shadcn UI
│   ├── lib/
│   │   ├── auth.ts      # Auth.js v5 config
│   │   ├── db.ts        # Prisma Singleton
│   │   ├── data/        # Data Access Layer (server-only reads)
│   │   └── stripe.ts    # Stripe Singleton
│   └── styles/
│       └── globals.css  # Tailwind v4 imports (CSS only)
└── package.json

---

SaaS Features

---

Database Schema

---

Environment Variables

---

Setup Steps

1. Initialize project (Node 24):

   npx create-next-app@latest {{name}} --typescript --eslint

2. Install core libraries:

   npm install next-auth@beta stripe resend @prisma/client

3. Install Tailwind v4 (Add to globals.css):

   @import "tailwindcss";

4. Configure environment (.env.local)

5. Sync Database:

   npx prisma db push

6. Run local Webhook:

   npm run stripe:listen

7. Run project:

   npm run dev

Next.js Static Site Template (Modern Edition)

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

Streamlined structure thanks to Tailwind v4 (theme configuration lives inside CSS).

project-name/
├── src/
│   ├── app/
│   │   ├── layout.tsx    # Contains root SEO Metadata
│   │   ├── page.tsx      # Landing Page
│   │   ├── globals.css   # Import Tailwind v4 & @theme config
│   │   ├── not-found.tsx # Custom 404 page
│   │   ├── sitemap.ts    # Generated sitemap (Metadata convention)
│   │   ├── robots.ts     # Generated robots.txt (Metadata convention)
│   │   ├── opengraph-image.tsx # Dynamic OG image
│   │   └── (routes)/     # Route groups (about, contact...)
│   ├── components/
│   │   ├── layout/       # Header, Footer
│   │   ├── sections/     # Hero, Features, Pricing, CTA
│   │   └── ui/           # Atomic components (Button, Card)
│   └── lib/
│       └── utils.ts      # Helper functions (cn, formatters)
├── content/              # Markdown/MDX content
├── public/               # Static assets (images, fonts)
├── next.config.ts        # Next.js Config (TypeScript)
└── package.json

---

Static Export Config

Using next.config.ts instead of .js for better type safety.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'export',        // Required for Static Hosting (S3, GitHub Pages)
  images: { 
    unoptimized: true      // Required if not using Node.js server image optimization
  },
  trailingSlash: true,     // Recommended for SEO and fixing 404s on some hosts
  reactStrictMode: true,
};

export default nextConfig;

---

SEO Implementation (Metadata API)

Deprecated next-seo. Configure directly in layout.tsx or page.tsx.

// src/app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | Product Name',
    default: 'Home - Product Name',
  },
  description: 'SEO optimized description for the landing page.',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://mysite.com',
    siteName: 'My Brand',
  },
};

---

Landing Page Sections

---

Animation Patterns (Framer Motion)

---

Setup Steps

1. Initialize Project:

   npx create-next-app@latest my-site --typescript --tailwind --eslint
   # Select 'Yes' for App Router
   # Select 'No' for 'Would you like to customize the default import alias?'

2. Install Auxiliary Libraries:

   npm install framer-motion lucide-react clsx tailwind-merge
   # clsx and tailwind-merge help handle dynamic classes better

3. Configure Tailwind v4 (in src/app/globals.css):

   @import "tailwindcss";

   @theme {
     --color-primary: #3b82f6;
     --font-sans: 'Inter', sans-serif;
   }

4. Development:

   npm run dev --turbopack

---

Deployment

---

Best Practices (Modern)

• React Server Components (RSC): Default all components to Server Components. Only add 'use client' when you need state (useState) or event listeners (onClick).
• Image Optimization: Use the <Image /> component but remember unoptimized: true for static export or use an external image CDN (Cloudinary/Imgix).
• Font Optimization: Use next/font (Google Fonts) to automatically host fonts and prevent layout shift.
• Responsive: Mobile-first design using Tailwind prefixes like sm:, md:, lg:.

Nuxt 4 Full-Stack Template (2026 Edition)

Modern full-stack template for Nuxt 4. Versions reflect the latest stable line verified 2026-05; pin to current stable when scaffolding.

Tech Stack

---

Directory Structure (Nuxt 4 Standard)

Nuxt 4 defaults srcDir to app/, keeping client code separate from server/ and root config.

project-name/
├── app/                  # Application source (Nuxt 4 srcDir)
│   ├── assets/css/
│   │   └── main.css      # Tailwind v4 import
│   ├── components/       # Auto-imported components
│   ├── composables/      # Auto-imported logic
│   ├── layouts/
│   ├── middleware/
│   ├── pages/            # File-based routing
│   ├── plugins/
│   ├── stores/           # Pinia stores
│   ├── app.vue           # Root component
│   └── app.config.ts     # Reactive runtime config
├── server/               # Nitro server engine
│   ├── api/              # API routes (e.g. /api/users)
│   ├── routes/           # Server routes
│   └── utils/            # Server-only helpers (Prisma client)
├── shared/               # Isomorphic code (types, Zod schemas)
├── prisma/
│   └── schema.prisma
├── public/
├── nuxt.config.ts
└── package.json

---

Key Concepts (2026)

---

Environment Variables

---

Setup Steps

1. Initialize project:

   npx nuxi@latest init my-app

2. Install core deps:

   npm install @pinia/nuxt @prisma/client zod
   npm install -D prisma

3. Setup Tailwind v4 (first-party Vite plugin, NOT @nuxtjs/tailwindcss):

   npm install tailwindcss @tailwindcss/vite

Add to nuxt.config.ts:

   import tailwindcss from '@tailwindcss/vite'
   export default defineNuxtConfig({
     vite: { plugins: [tailwindcss()] },
     css: ['~/assets/css/main.css']
   })

4. Configure CSS in app/assets/css/main.css:

   @import "tailwindcss";
   @theme {
     --color-primary: oklch(0.6 0.15 150);
   }

5. Run development:

   npm run dev

---

Best Practices

• Data Fetching: Use useFetch/useAsyncData for SSR-friendly data; reserve server: false for client-only work.
• State: Use Pinia (defineStore) for global state, Nuxt's useState for simple shared SSR state.
• Validation: Define Zod schemas in shared/ and reuse on client forms and Nitro API routes.
• Type Safety: API route types are inferred automatically with $fetch.
• Server-only: Instantiate the Prisma client in server/utils/ so it never leaks to the client bundle.

FastAPI API Template

Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.

Tech Stack

---

Directory Structure

Domain/module layout (scales better than file-type for non-trivial apps). Each domain owns its router, schemas, models, service.

project-name/
├── alembic/             # Migrations
├── src/
│   ├── auth/
│   │   ├── router.py    # APIRouter
│   │   ├── schemas.py   # Pydantic models
│   │   ├── models.py    # SQLAlchemy models
│   │   ├── service.py   # Business logic
│   │   ├── dependencies.py
│   │   └── exceptions.py
│   ├── posts/           # Same shape per domain
│   ├── config.py        # Global settings (BaseSettings)
│   ├── database.py      # Async engine / session
│   ├── models.py        # Shared base models
│   ├── exceptions.py    # Global exceptions
│   └── main.py          # FastAPI() + include_router
├── tests/
├── requirements/        # base.txt / dev.txt / prod.txt
├── alembic.ini
└── .env

---

Key Concepts

---

API Structure

---

Setup Steps

1. python -m venv venv 2. source venv/bin/activate 3. pip install fastapi uvicorn "sqlalchemy[asyncio]" alembic pydantic pydantic-settings 4. Create .env 5. alembic upgrade head 6. uvicorn src.main:app --reload

---

Best Practices

• Use async everywhere (AsyncSession, async dependencies; wrap sync SDKs in run_in_threadpool)
• Per-module BaseSettings over one global config
• Pydantic v2 for validation
• SQLAlchemy 2.0 async sessions
• Alembic migrations: static, reversible, descriptive slugs
• pytest-asyncio for tests; use dependency_overrides to mock

React Native App Template (2026 Edition)

Modern mobile app, optimized for New Architecture and React 19. Versions reflect the latest stable line verified 2026-05; NativeWind v5 is pre-release — pin deliberately when scaffolding.

Tech Stack

---

Directory Structure

Expo Router keeps app/ for routes only; everything else lives under src/ with the @/* alias.

project-name/
├── src/
│   ├── app/             # Expo Router (file-based routing ONLY)
│   │   ├── _layout.tsx  # Root Layout (Stack/Tabs config)
│   │   ├── index.tsx    # Main Screen
│   │   ├── (tabs)/      # Route Group for Tab Bar
│   │   │   ├── _layout.tsx
│   │   │   ├── home.tsx
│   │   │   └── profile.tsx
│   │   ├── +not-found.tsx
│   │   └── [id].tsx     # Dynamic Route (Typed)
│   ├── components/
│   │   ├── ui/          # Primitive Components (Button, Text)
│   │   └── features/    # Complex Components
│   ├── hooks/           # Custom Hooks
│   ├── lib/
│   │   ├── api.ts       # Axios/Fetch client
│   │   └── storage.ts   # SecureStore wrapper
│   ├── store/           # Zustand stores
│   └── constants/       # Colors, Theme config
├── assets/              # Fonts, Images
├── global.css           # NativeWind v5 entry: @import "tailwindcss"
├── babel.config.js      # NativeWind Babel preset
├── metro.config.js      # withNativeWind wrapper
└── app.json             # Expo Config

---

Navigation Patterns (Expo Router)

---

Key Packages & Purpose

---

Setup Steps (2026 Standard)

1. Initialize Project:

   npx create-expo-app@latest my-app --template default
   cd my-app

2. Install Core Dependencies:

   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar

3. Install NativeWind v5 (pre-release, Tailwind v4 CSS-first):

   npm install nativewind@next tailwindcss react-native-reanimated

4. Configure NativeWind (Babel, Metro & CSS):

• Add the preset to babel.config.js: presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"].
• Wrap Metro: withNativeWind(config, { input: './global.css' }) in metro.config.js.
• Create global.css with @import "tailwindcss"; (theme via @theme, no tailwind.config.js).
• Import global.css in src/app/_layout.tsx.

5. Run Project:

   npx expo start -c
   # Press 'i' for iOS simulator or 'a' for Android emulator

---

Best Practices (Updated)

• New Architecture: Ensure newArchEnabled: true in app.json to leverage TurboModules and Fabric Renderer.
• Typed Routes: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., router.push('/path')).
• React 19: Reduce usage of useMemo or useCallback thanks to React Compiler (if enabled).
• Components: Build UI primitives (Box, Text) with NativeWind className for reusability.
• Assets: Use expo-image instead of default <Image /> for better caching and performance.
• API: Always wrap API calls with TanStack Query, avoid direct calls in useEffect.