AI Workflow Guide

AI-Consistent Project Setup

Complete every phase before prompting — so AI output stays identical across every session

Why does this matter?

AI has no memory between sessions — every new prompt starts from zero. Without complete context, AI guesses everything: libraries, patterns, naming conventions. The result is code that looks different every time even with the same prompt. The fix: inject context before every prompt.

1.1

Create Next.js Project

npx create-next-app@latest my-project \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"
Why this matters

--app = App Router (Next.js 14+). Without it, AI may generate Pages Router code. --import-alias "@/*" prevents AI from using deep relative imports like ../../../. Official template = correct structure, no fixes needed later.

1.2

Install Core Dependencies Immediately

# State & Validation
yarn add zustand zod dayjs

# UI & UX (Theme, Animation, Icons, Print)
yarn add next-themes react-spring lucide-react react-to-print

# Forms & Styles
yarn add react-hook-form clsx tailwind-merge

# Optional: Logic & Auth
yarn add @tanstack/react-query class-variance-authority @supabase/supabase-js @supabase/ssr
Why this matters

AI generates code based on what is in package.json. By locking these libraries (State, Form, Animation, Theme, etc.) first, you ensure AI uses the correct patterns (zustand vs redux, react-hook-form vs state) consistently across every session.

Pre-Prompt Checklist

Check every box before prompting AI to do anything new in the project

Progress0 / 18 done

One-time Setup

Before Every Prompt

Standard Prompt Template

Copy and fill in the brackets each time

Read `.agents/CONTEXT.md` and `.agents/design-system.md` first

TASK: [create / fix / refactor]
TARGET: [component / hook / function name]
LOCATION: src/components/features/[folder]/
INPUTS: [props or parameters]
BEHAVIOR: [logic description]
CONSTRAINTS:
  - Use [specific library] only
  - Do not use [unwanted thing]
  - Must use named export
OUTPUT: TypeScript + Tailwind CSS