Part 0 — Your AI Dev Toolkit: The Right Tools, The Right Setup, The Right Stack

AI Workflow · Module 0

Your AI Dev Toolkit

"A craftsman blames their tools. An engineer chooses them."

5 Tools compared head-to-head

1 Stack recommended for most developers

30 min to a fully configured environment

You've heard that AI makes developers 10× more productive. You installed GitHub Copilot. It autocompletes some lines. You're not 10× more productive.

The problem isn't the AI. The problem is that you're using the wrong tool for your workflow, configured with default settings, with no project context given to it. That's like buying a professional camera and leaving it on auto mode.

This article comes before everything else in the series because every strategy, framework, and workflow in Parts 1–12 depends on one foundation: having the right tools set up correctly. Get this right once, and everything else compounds.

The Four Categories of AI Coding Tools

Before comparing specific tools, you need to understand what category of problem each one solves. There are four distinct categories — and most developers confuse them.

① AI-Native IDEs

Full editors rebuilt around AI. The AI sees your entire codebase, not just the open file. Best for new projects and greenfield work.

Examples: Cursor, Windsurf

② Terminal Agents

CLI-first AI that runs commands, edits files, and navigates the codebase autonomously. Best for complex multi-file tasks and automation.

Examples: Claude Code, Aider

③ IDE Extensions

Plugins that add AI to your existing editor without replacing it. Lower context window, but zero switching cost if you love your current setup.

Examples: GitHub Copilot, Codeium, Supermaven

④ Chat Interfaces

Standalone chat for design, architecture, debugging, code explanation. Best when you need to think with the AI, not just generate code.

Examples: Claude.ai, ChatGPT, Gemini

The mistake most developers make: treating these as alternatives. They are complements. The professionals in this field use an AI-Native IDE for building, a terminal agent for complex refactors, and a chat interface for architecture decisions — all in the same workday.

The Tool Comparison — Head to Head

Tool	Codebase Awareness	Autonomy Level	Best For	Cost
Cursor	Full repo (@codebase)	High (Agent mode)	Daily coding, features	$20/mo
Claude Code	Full repo (reads files)	Very High (terminal)	Complex multi-file tasks	Usage-based
GitHub Copilot	Open files only	Low (suggestions)	Inline autocomplete	$10/mo
Windsurf	Full repo (Cascade)	High (Cascade flow)	Cursor alternative	$15/mo
Claude.ai	What you paste	None (chat only)	Architecture, design	$20/mo

The Recommended Starter Stack

Stop deciding. Here is the stack that covers every workflow, works for any language, and is used by the highest-output developers in the industry:

<div style="display: flex; gap: 16px; align-items: flex-start; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.4); border-radius: 12px; padding: 18px;">
  <div style="background: #f97316; color: #000; font-weight: 900; font-size: 1rem; border-radius: 8px; padding: 8px 14px; flex-shrink: 0; text-align: center;">01</div>
  <div>
    <div style="color: #fdba74; font-weight: 700; font-size: 1rem; margin-bottom: 6px;">Cursor — Your Primary Editor</div>
    <div style="color: #fde68a; font-size: 0.9rem; line-height: 1.7;">Your daily driver. Use it for all feature work, bug fixes, and code generation. Enable Agent mode for multi-file tasks. Use <code>@codebase</code> to give it full project context. This replaces VS Code for most developers.</div>
  </div>
</div>

<div style="text-align: center; color: #334155; font-size: 1.2rem; padding: 2px 0;">↓</div>

<div style="display: flex; gap: 16px; align-items: flex-start; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.4); border-radius: 12px; padding: 18px;">
  <div style="background: #06b6d4; color: #000; font-weight: 900; font-size: 1rem; border-radius: 8px; padding: 8px 14px; flex-shrink: 0; text-align: center;">02</div>
  <div>
    <div style="color: #22d3ee; font-weight: 700; font-size: 1rem; margin-bottom: 6px;">Claude Code — Your Terminal Agent</div>
    <div style="color: #cffafe; font-size: 0.9rem; line-height: 1.7;">For large-scale refactors, test generation, documentation, and complex multi-file operations. Runs in your terminal, reads your full codebase, and executes changes autonomously. Activate it when the task spans more than 3 files.</div>
  </div>
</div>

<div style="text-align: center; color: #334155; font-size: 1.2rem; padding: 2px 0;">↓</div>

<div style="display: flex; gap: 16px; align-items: flex-start; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.4); border-radius: 12px; padding: 18px;">
  <div style="background: #a855f7; color: #fff; font-weight: 900; font-size: 1rem; border-radius: 8px; padding: 8px 14px; flex-shrink: 0; text-align: center;">03</div>
  <div>
    <div style="color: #c084fc; font-weight: 700; font-size: 1rem; margin-bottom: 6px;">Claude.ai — Your Thinking Partner</div>
    <div style="color: #e9d5ff; font-size: 0.9rem; line-height: 1.7;">For architecture decisions, system design, debugging complex problems, and anything where you need a conversation rather than code generation. Use Projects to maintain context across sessions for your current initiative.</div>
  </div>
</div>

Configuring Your Tools for Maximum Output

Setting Up Cursor Correctly

Default Cursor settings leave 60% of its power unused. Here are the changes that matter:

Step 1: Set your model

Cursor Settings → Models → Select claude-sonnet-4-5 as primary

Claude models consistently outperform GPT models for complex coding tasks in Cursor. Keep a GPT-4o fallback for speed on simple completions.

Step 2: Create your .cursorrules file

This is the most important configuration in your entire setup. It is a system prompt that Cursor injects into every single AI interaction in your project. Without it, the AI knows nothing about your tech stack, your conventions, or your constraints.



## Project Context
[App name] is a [type of application] built with [tech stack].
Current focus: [what you're actively building right now]

## Tech Stack
- Language: TypeScript 5.8 with strict mode
- Framework: Next.js 16 (App Router)
- Database: PostgreSQL with Prisma ORM
- Testing: Vitest + Playwright
- Styling: Tailwind CSS

## Code Standards
- All functions must have explicit return types
- No `any` types — use `unknown` and narrow properly
- Error handling: always use Result types, never throw in business logic
- Prefer composition over inheritance
- Max function length: 40 lines. Extract if longer.

## Architecture Rules
- API routes: validation → service call → response (3 layers only)
- No business logic in components
- Database calls only in repository files under /lib/db/

## Do NOT
- Install new dependencies without asking first
- Use deprecated APIs
- Generate commented-out code
- Add console.log statements to production code

The more specific and current your .cursorrules, the better every piece of generated code will be. Update it when your stack or standards change.

Step 3: Enable and configure Agent mode

Agent mode lets Cursor autonomously read files, run terminal commands, and make multi-step changes. For any task that touches more than one file, use Agent instead of Chat.

Cursor Settings → Features → Enable Composer Agent Mode

Setting Up Claude Code

Claude Code is installed as a global npm package and run from your terminal inside any project directory.

# Install
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-project

# Launch
claude

Create a CLAUDE.md file in your project root. This is the Claude Code equivalent of .cursorrules — a persistent context file that Claude reads at the start of every session.

# CLAUDE.md

## Project: [Your App Name]

[1–2 sentence description of what this project does]

## Stack

- [List your tech stack]

## Build & Test Commands

- `npm run dev` — start dev server
- `npm test` — run unit tests
- `npm run test:e2e` — run Playwright e2e tests
- `npm run build` — production build
- `npm run lint` — ESLint check

## Key Directories

- `/app` — Next.js App Router pages and layouts
- `/lib` — Business logic and utilities
- `/lib/db` — Database repositories (only place for DB calls)
- `/components` — Reusable UI components
- `/tests` — All test files

## Important Conventions

- [Your most important coding conventions here]
- [Authentication pattern you use]
- [Error handling approach]

## Current Focus

[What you're actively working on — update this when your focus changes]

The CLAUDE.md file is the single highest-leverage file in your project for AI-assisted development. A well-written CLAUDE.md means you never have to re-explain your project's context again.

The Context Hierarchy — How AI Tools See Your Code

Understanding what each tool actually "sees" when you work with it explains why some interactions feel shallow and others feel like working with a colleague who knows your codebase.

Shallow Context (❌ Bad)

→ Opens an IDE extension
→ Pastes code into chat
→ No .cursorrules / CLAUDE.md
→ AI sees only the pasted snippet
→ Zero knowledge of conventions
→ Zero knowledge of architecture

Result: Generic code that doesn't fit your project

Deep Context (✅ Right)

→ Uses Cursor + .cursorrules
→ Uses @codebase in Composer
→ CLAUDE.md maintained
→ AI sees full repo structure
→ AI knows your conventions
→ AI knows your architecture

Result: Code that fits in on the first try

The Daily Workflow — Which Tool, When

The question most developers never answer clearly: which tool do I reach for right now?

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(249,115,22,0.08); border-radius: 8px;">
  <span style="color: #f97316; font-weight: 700; min-width: 200px;">New feature (1–3 files)</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #fdba74;">Cursor Agent mode + @codebase</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(34,211,238,0.06); border-radius: 8px;">
  <span style="color: #22d3ee; font-weight: 700; min-width: 200px;">Large refactor (5+ files)</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #67e8f9;">Claude Code in terminal</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(168,85,247,0.06); border-radius: 8px;">
  <span style="color: #a855f7; font-weight: 700; min-width: 200px;">Architecture decision</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #d8b4fe;">Claude.ai with a Project</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(34,197,94,0.06); border-radius: 8px;">
  <span style="color: #22c55e; font-weight: 700; min-width: 200px;">Quick inline fix / boilerplate</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #86efac;">Cursor inline chat (Cmd+K)</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(249,115,22,0.06); border-radius: 8px;">
  <span style="color: #f97316; font-weight: 700; min-width: 200px;">Debugging a hard bug</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #fdba74;">Claude Code (full error context) or Claude.ai</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(34,211,238,0.06); border-radius: 8px;">
  <span style="color: #22d3ee; font-weight: 700; min-width: 200px;">Writing tests</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #67e8f9;">Claude Code (see Part 13)</span>
</div>

<div style="display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(168,85,247,0.06); border-radius: 8px;">
  <span style="color: #a855f7; font-weight: 700; min-width: 200px;">Understanding legacy code</span>
  <span style="color: #94a3b8;">→</span>
  <span style="color: #d8b4fe;">Claude Code (see Part 14)</span>
</div>

Your Setup Checklist — Do This Today

30-Minute Setup — Do This Once

☐ Install Cursor and sign in at cursor.sh

☐ Install Claude Code: npm install -g @anthropic-ai/claude-code

☐ Create a .cursorrules file in your active project (use template above)

☐ Create a CLAUDE.md file in your active project (use template above)

☐ Set Cursor model to claude-sonnet-4-5

☐ Enable Cursor Agent mode in settings

☐ Add .cursorrules to .gitignore if it contains sensitive project details, OR commit it to share conventions with your team

☐ Add CLAUDE.md to git and commit — your whole team benefits

Next in AI Workflow

Part 1 — The AI-First Mindset

Your tools are configured. Now we rewire how you think about the work itself — from writing code to directing systems.