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

About This Tutorial

This tutorial focuses on the practice steps and completion checks for this level.

---

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.

---

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.

Scroll horizontally→

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 table scrolls horizontally. Keyboard users can focus the table and use the left and right arrow keys.

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