Setting Up CLAUDE.md

Before we write a single line of code, let's give Claude Code the context it needs to be an effective pair programmer on our todo project.

💡Info

Your code will look different from the examples — and that's OK. Claude Code generates code non-deterministically. Your component names, variable names, CSS classes, and even file structure may differ from what's shown in this chapter. That's completely normal. Focus on whether the feature works, not on matching the code character-by-character. If your app does what the section describes, you're on track.

Why CLAUDE.md matters here

In Chapter 1 you learned that CLAUDE.md gives Claude Code persistent memory. For our todo app, this is critical. We want Claude Code to know:

What framework and libraries we're using
What our coding style looks like
What we've already built (so it doesn't break things)

⭐Important

A well-written CLAUDE.md is the difference between Claude Code generating generic code and generating code that fits your project perfectly.

Create the project CLAUDE.md

Open Claude Code in your todo-app directory:

Terminal

$cd todo-app && claude

Then give it this prompt:

"Create a CLAUDE.md file for this project. This is a Next.js todo app using TypeScript, Tailwind CSS, and the App Router with the src directory structure. We're building a full CRUD todo application. Use functional components with hooks. Prefer 'use client' components for interactive features. Use Tailwind for all styling, no CSS modules."

What Claude Code generates

Claude Code will create a CLAUDE.md that looks something like this:

# Todo App
 
## Project Overview
A full-featured todo application built with Next.js 14+, TypeScript, and Tailwind CSS.
 
## Tech Stack
- Next.js (App Router)
- TypeScript
- Tailwind CSS
 
## Conventions
- Use functional components with React hooks
- Mark interactive components with 'use client'
- Use Tailwind CSS for all styling (no CSS modules)
- Keep components in src/components/
- Keep types in src/types/
- Use descriptive variable names
 
## File Structure
- src/app/ - Pages and layouts (App Router)
- src/components/ - Reusable React components
- src/types/ - TypeScript type definitions

✅Tip

Don't worry about getting it perfect right now. The beauty of CLAUDE.md is that you can update it as the project evolves. Claude Code even suggests updates when your patterns change.

Verify it works

Test that Claude Code reads the file by asking:

"What tech stack is this project using?"

Claude Code should answer based on the CLAUDE.md without needing to scan the entire project. This saves time and keeps responses accurate.

💡Info

Every time you start a new Claude Code session in this directory, it automatically reads CLAUDE.md first. Think of it as your project's onboarding document for AI.

Structuring prompts with context

As your prompts get more complex, you can use XML tags to separate your instructions from data you want Claude to process. For example:

"Here are the requirements for the next feature: The user should be able to filter todos by category using pill-shaped buttons. Show an 'All' option that displays everything. Plan this feature."

The <requirements> tags tell Claude where your instructions end and the data begins. You'll use this technique throughout the course whenever you paste errors, share requirements, or include reference content.

Add a .gitignore check

While we're setting up, make sure your .gitignore is solid:

"Check the .gitignore and make sure it covers node_modules, .next, .env files, and any OS files like .DS_Store"

Good foundations save hours of debugging later. Now let's plan what we're actually building.