v1.0 — 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?--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 & Data
npm install zustand @tanstack/react-query

# Validation
npm install zod

# UI Utilities
npm install clsx tailwind-merge class-variance-authority

# Icons
npm install lucide-react

# Supabase (if using)
npm install @supabase/supabase-js @supabase/ssr
Why?AI generates code based on what is in package.json. Without locking these first, AI may choose axios over fetch, or redux over zustand — making code inconsistent across sessions.

✅ Pre-Prompt Checklist

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

0 / 15 done

One-time Setup

Before Every Prompt

📋 Standard Prompt Template

Copy and fill in the brackets each time

Read `.agent/CONTEXT.md` and `.agent/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