Templates

Project Templates

Quick-start templates for scaffolding new projects.

---

🎯 Selective Reading Rule

Read ONLY the template matching user's project type!

---

Usage

1. User says "create [type] app" 2. Match to appropriate template 3. Read ONLY that template's TEMPLATE.md 4. Follow its tech stack and structure

Astro Static Site Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── components/      # .astro components
│   ├── content/         # MDX content
│   │   ├── blog/
│   │   └── config.ts    # Collection schemas
│   ├── layouts/         # Page layouts
│   ├── pages/           # File-based routing
│   └── styles/
├── 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 tailwind sitemap 3. Configure astro.config.mjs 4. Create content collections 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

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── popup/           # Extension popup
│   ├── options/         # Options page
│   ├── background/      # Service worker
│   ├── content/         # Content scripts
│   ├── components/
│   ├── hooks/
│   └── lib/
│       ├── storage.ts   # Chrome storage helpers
│       └── messaging.ts # Message passing
├── public/
│   ├── icons/
│   └── manifest.json
└── package.json

---

Manifest V3 Concepts

---

Permissions

---

Setup Steps

1. npm create vite {{name}} -- --template react-ts 2. Add Chrome types: npm install -D @types/chrome 3. Configure Vite for multi-entry 4. Create manifest.json 5. npm run dev (watch mode) 6. Load in Chrome: chrome://extensions → Load unpacked

---

Development Tips

---

Best Practices

• Use type-safe messaging
• Wrap Chrome APIs in promises
• Minimize permissions
• Handle offline gracefully

CLI Tool Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── index.ts         # Entry point
│   ├── cli.ts           # CLI setup
│   ├── commands/        # Command handlers
│   ├── lib/
│   │   ├── config.ts    # Config loader
│   │   └── logger.ts    # Styled output
│   └── types/
├── bin/
│   └── cli.js           # Executable
└── package.json

---

CLI Design Principles

---

Key Components

---

Setup Steps

1. Create project directory 2. npm init -y 3. Install deps: npm install commander @inquirer/prompts chalk ora cosmiconfig 4. Configure bin in package.json 5. npm link for local testing

---

Publishing

npm login
npm publish

---

Best Practices

• Provide helpful error messages
• Support both interactive and non-interactive modes
• Use consistent output styling
• Validate inputs with Zod
• Exit with proper codes (0 success, 1 error)

Electron Desktop App Template

Tech Stack

---

Directory Structure

project-name/
├── electron/
│   ├── main.ts          # Main process
│   ├── preload.ts       # Preload script
│   └── ipc/             # IPC handlers
├── src/
│   ├── App.tsx
│   ├── components/
│   │   ├── TitleBar.tsx # Custom title bar
│   │   └── ...
│   └── hooks/
├── public/
└── package.json

---

Process Model

---

Key Concepts

---

Setup Steps

1. npm create vite {{name}} -- --template react-ts 2. Install: npm install -D electron electron-builder vite-plugin-electron 3. Create electron/ directory 4. Configure main process 5. npm run electron:dev

---

Build Targets

---

Best Practices

• Use preload script for main/renderer bridge
• Type-safe IPC with typed handlers
• Custom title bar for native feel
• Handle window state (maximize, minimize)
• Auto-updates with electron-updater

Express.js API Template

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── app.ts           # Express setup
│   ├── config/          # Environment
│   ├── routes/          # Route handlers
│   ├── controllers/     # Business logic
│   ├── services/        # Data access
│   ├── middleware/
│   │   ├── auth.ts      # JWT verify
│   │   ├── error.ts     # Error handler
│   │   └── validate.ts  # Zod validation
│   ├── schemas/         # Zod schemas
│   └── utils/
└── 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

• Layer architecture (routes → controllers → services)
• Validate all inputs with Zod
• Centralized error handling
• Environment-based config
• Use Prisma for type-safe DB access

Flutter App Template

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
• Riverpod for state, React Query pattern for server state
• Freezed for immutable data classes
• Go Router for declarative navigation
• Material 3 theming

Turborepo Monorepo Template

Tech Stack

---

Directory Structure

project-name/
├── apps/
│   ├── web/             # Next.js app
│   ├── api/             # Express API
│   └── docs/            # Documentation
├── packages/
│   ├── ui/              # Shared components
│   ├── config/          # ESLint, TS, Tailwind
│   ├── types/           # Shared types
│   └── utils/           # Shared utilities
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

---

Key Concepts

---

Turbo 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

• Shared configs in packages/config
• Shared types in packages/types
• Internal packages with workspace:*
• Use Turbo remote caching for CI

Next.js Full-Stack Template (2026 Edition)

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)

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 v6 config
│   │   ├── db.ts        # Prisma Singleton
│   │   └── 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)

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
│   │   └── (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)

Mẫu template Full-Stack hiện đại cho Nuxt 4, tối ưu hóa hiệu suất với Vue Vapor Mode và Tailwind v4.

Tech Stack

---

Directory Structure (Nuxt 4 Standard)

Sử dụng cấu trúc app/ để giữ thư mục gốc gọn gàng.

project-name/
├── app/                  # Application Source
│   ├── assets/
│   │   └── css/
│   │       └── main.css  # Tailwind v4 imports
│   ├── components/       # Auto-imported components
│   ├── composables/      # Auto-imported logic
│   ├── layouts/
│   ├── pages/            # File-based routing
│   ├── app.vue           # Root component
│   └── router.options.ts
├── server/               # Nitro Server Engine
│   ├── api/              # API Routes (e.g. /api/users)
│   ├── routes/           # Server Routes
│   └── utils/            # Server-only helpers (Prisma)
├── prisma/
│   └── schema.prisma
├── public/
├── nuxt.config.ts        # Main Config
└── package.json

---

Key Concepts (2026)

---

Environment Variables

---

Setup Steps

1. Initialize Project:

   npx nuxi@latest init my-app
   # Select "Nuxt 4 structure" if prompted

2. Install Core Deps:

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

3. Setup Tailwind v4: Install the Vite plugin (new standard):

   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
   # Runs with Turbo/Vite

---

Best Practices

• Vapor Mode: Kích hoạt cho các component nặng về render:

  <script setup lang="ts" vapor>
  // Component này sẽ compile sang chế độ Vapor (No VDOM)
  </script>

• Data Fetching: Sử dụng useFetch với server: false cho các tác vụ client-only, hoặc dùng Server Functions để type-safety tốt hơn.
• State: Dùng defineStore (Pinia) cho global state, useState của Nuxt cho state đơn giản chia sẻ giữa Server/Client.
• Type Safety: Tự động tạo type cho API routes ($fetch typed automatically).

FastAPI API Template

Tech Stack

---

Directory Structure

project-name/
├── alembic/             # Migrations
├── app/
│   ├── main.py          # FastAPI app
│   ├── config.py        # Settings
│   ├── database.py      # DB connection
│   ├── models/          # SQLAlchemy models
│   ├── schemas/         # Pydantic schemas
│   ├── routers/         # API routes
│   ├── services/        # Business logic
│   ├── dependencies/    # DI
│   └── utils/
├── tests/
├── .env.example
└── requirements.txt

---

Key Concepts

---

API Structure

---

Setup Steps

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

---

Best Practices

• Use async everywhere
• Pydantic v2 for validation
• SQLAlchemy 2.0 async sessions
• Alembic for migrations
• pytest-asyncio for tests

React Native App Template (2026 Edition)

Modern mobile app template, optimized for New Architecture and React 19.

Tech Stack

---

Directory Structure

Standardized structure for Expo Router and NativeWind v4.

project-name/
├── app/                 # Expo Router (File-based routing)
│   ├── _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   # 404 Page
│   └── [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           # Entry point for NativeWind v4
├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
├── babel.config.js      # NativeWind Babel Plugin
└── 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 v4:

   npm install nativewind tailwindcss react-native-reanimated

4. Configure NativeWind (Babel & CSS):

• Add plugin to babel.config.js: plugins: ["nativewind/babel"].
• Create global.css with: @import "tailwindcss";.
• Import global.css in 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.