Level 0 Practice: Your First Claude Code — Getting Stuck on Purpose

About This Tutorial

If you want to understand the concepts and mechanics first, see the Level 0 concept guide.

---

The reason I start by getting stuck on purpose is that feeling the limits of working without context is the foundation for everything in Level 1 and beyond. When you learn the solution after knowing what was missing, the role of CLAUDE.md becomes intuitive.

Who this is for: Anyone who has just installed Claude Code and is trying to use it in a project for the first time.

Estimated time: 5 min read + 10 min hands-on

---

Prerequisites: Setting Up the my-portfolio Project

This tutorial uses my-portfolio, a personal portfolio site built with Next.js 14 + TypeScript. I start from an almost-empty “blank project” state.

# Create a Next.js 14 project (if you haven't already)
npx create-next-app@14 my-portfolio \
  --typescript \
  --tailwind \
  --app \
  --src-dir \
  --import-alias "@/*"

cd my-portfolio

The directory structure right after creation looks like this:

my-portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   └── components/    # still empty
├── public/
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.mjs

If you haven’t installed Claude Code yet, run the following:

npm install -g @anthropic-ai/claude-code
claude --version

---

Step 1: Launch Claude Code

Launch Claude Code from inside the my-portfolio directory.

cd my-portfolio
claude

This opens an interactive REPL. When the prompt appears, Claude is waiting for input.

✓ Connected to Claude
>

---

Step 2: Ask Claude to Build the Portfolio — Without Any Context

Type this without any preparation:

> Build a portfolio site with Next.js

Claude returns a large amount of code, something like this:

// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-24">
      <h1 className="text-4xl font-bold">My Portfolio</h1>
      <section className="mt-8">
        <h2 className="text-2xl font-semibold">About</h2>
        <p>Your description here...</p>
      </section>
      <section className="mt-8">
        <h2 className="text-2xl font-semibold">Projects</h2>
        ...
      </section>
    </main>
  )
}

It looks reasonable at first glance, but there are a few problems:

• It’s unclear which file this code belongs in (app/page.tsx already exists — should I overwrite or append?)
• The project uses a src/ directory structure, but Claude doesn’t know whether to write to src/app/page.tsx or app/page.tsx
• I want components split into src/components/, but without that instruction, monolithic code comes back

---

Step 3: Asking for Refinement Doesn’t Line Up

Ask Claude to split it into components:

> Split it into components

Example output:

// components/About.tsx  ← path without src/
export default function About() { ... }

// components/Projects.tsx  ← same issue
export default function Projects() { ... }

components/About.tsx and src/components/About.tsx are different locations. Because Claude doesn’t know that --src-dir was passed to create-next-app, it generates the wrong path.

Continuing:

> Design it better with Tailwind CSS classes

Now more className attributes appear, but the project-specific color settings (custom colors in tailwind.config.ts) are not used — Claude simply doesn’t know what’s in that file.

---

Step 4: Confirm That This Is Level 0

No matter how many exchanges you have, things don’t line up — because Claude knows nothing about the project.

What Claude doesn’t know	Impact
Project was created with --src-dir	Paths become components/ instead of src/components/
TypeScript is being used	.js and .tsx files may get mixed
App Router (app/ directory) is used	Code targeting Pages Router may come back
Tailwind config contents	Custom colors and fonts are not applied

This is Level 0: the no-context state. Claude Code itself is working correctly — what’s missing is a configuration file that explains the project to Claude.

---

The my-portfolio at This Point

my-portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx     # unchanged from create-next-app
│   │   ├── page.tsx       # unchanged
│   │   └── globals.css
│   └── components/        # still empty
├── package.json
└── ...

I launched Claude Code and had a conversation, but no project files changed. This is where Level 0 ends.

---

Summary: What Level 0 Taught Me

• Without context, Claude Code cannot generate project-specific correct code
• Explaining “this project is…” every session is inefficient
• The solution is CLAUDE.md — a file that permanently tells Claude the project’s tech stack and structure

---

Next Level

Level 1 Practice: Create CLAUDE.md and Generate the About Page