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

About This Tutorial

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

By creating CLAUDE.md, Claude retains the project’s tech stack and rules across sessions. The repetitive overhead of explaining the project every time disappears, and code quality and consistency improve.

Who this is for: Anyone who completed Level 0, or anyone who wants to experience the effect of CLAUDE.md firsthand.

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

Carrying Over from the Previous Level

In Level 0, I experienced the limits of working without context.

Claude didn’t know the directory structure (src/ layout)
It couldn’t distinguish App Router from Pages Router, so file paths were wrong
It couldn’t apply Tailwind custom settings

Current state of my-portfolio:

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

Step 1: Create CLAUDE.md

Create my-portfolio/CLAUDE.md. This file becomes the “project description” Claude reads.

# Create at the root of the my-portfolio directory
touch my-portfolio/CLAUDE.md

Add the following content:

# my-portfolio — Project Description for Claude

## Overview

A personal portfolio site showcasing background, skills, projects, and blog posts.

## Tech Stack

- **Framework**: Next.js 14 (App Router)
- **Language**: TypeScript 5
- **Styling**: Tailwind CSS 3
- **Package manager**: npm

## Directory Structure

src/ ├── app/ # Next.js App Router pages │ ├── layout.tsx # Root layout │ ├── page.tsx # Top page │ └── globals.css # Global styles ├── components/ # Reusable UI components └── lib/ # Utilities and helper functions


## Coding Conventions

- Place components in `src/components/` (not `components/`)
- File names use PascalCase: `About.tsx`, `Skills.tsx`
- Define components with `export default function`
- Always add TypeScript type definitions to Props (`interface` or `type`)
- Use only Tailwind CSS utility classes for styling (no CSS Modules)
- Add `"use client"` only to components that require state management or DOM manipulation

## Common Commands

```bash
npm run dev      # Start dev server (localhost:3000)
npm run build    # Production build
npm run lint     # Run ESLint
npm run type-check  # TypeScript type check

Notes

Files under src/app/ are pages. Files in src/components/ are components.
Server Components are the default. Add "use client" when using React hooks like useState.
Place images in public/images/ and load them with the Image component from next/image.


---

## Step 2: Launch Claude Code and Confirm It's Loaded

Launch Claude Code and use `/memory` to confirm CLAUDE.md is loaded.

```bash
cd my-portfolio
claude

After launching, run /memory:

> /memory

Example output:

Active memory files:
  ✓ /Users/yourname/my-portfolio/CLAUDE.md
    - Project: my-portfolio (Next.js 14, TypeScript, Tailwind CSS)
    - Components: src/components/
    - App Router enabled

You can confirm that CLAUDE.md has been recognized.

Step 3: Request the About Component

Make the same type of request as in Level 0 — but now CLAUDE.md is in place.

> Add an About page component.
> It should include name, job title, bio, and social links (GitHub, Twitter).

Claude generates src/components/About.tsx at the correct path.

Generated src/components/About.tsx:

interface AboutProps {
  name: string
  role: string
  bio: string
  links: {
    github?: string
    twitter?: string
  }
}

export default function About({ name, role, bio, links }: AboutProps) {
  return (
    <section className="py-16 px-4 max-w-3xl mx-auto">
      <h2 className="text-3xl font-bold text-gray-900 mb-4">About</h2>

      <div className="flex flex-col md:flex-row gap-8 items-start">
        <div className="flex-1">
          <h3 className="text-xl font-semibold text-gray-800">{name}</h3>
          <p className="text-gray-600 mt-1">{role}</p>
          <p className="text-gray-700 mt-4 leading-relaxed">{bio}</p>

          <div className="flex gap-4 mt-6">
            {links.github && (
              <a
                href={links.github}
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                GitHub
              </a>
            )}
            {links.twitter && (
              <a
                href={links.twitter}
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                Twitter
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}

Compare with Level 0:

Check	Level 0 (no CLAUDE.md)	Level 1 (with CLAUDE.md)
File path	`components/About.tsx`	`src/components/About.tsx`
TypeScript types	Missing or vague	Explicit `interface AboutProps`
Styling	Mixed approaches	Tailwind CSS only
Component form	Variable	`export default function`

Step 4: Wire It Into the Top Page

Wire the generated About component into src/app/page.tsx.

> Add the About component to src/app/page.tsx.
> Placeholder dummy data is fine.

Claude’s updated src/app/page.tsx:

import About from "@/components/About"

export default function Home() {
  return (
    <main className="min-h-screen">
      <About
        name="Taro Yamada"
        role="Frontend Engineer"
        bio="I specialize in web application development using Next.js and TypeScript.
             I also contribute to open source and write technical blog posts."
        links={{
          github: "https://github.com/taro-yamada",
          twitter: "https://twitter.com/taro_yamada",
        }}
      />
    </main>
  )
}

The @/ alias is automatically picked up from the paths setting in tsconfig.json. Even without explicitly writing the import-alias "@/*" info in CLAUDE.md, Claude can reference tsconfig.json.

The my-portfolio at This Point

my-portfolio/
├── CLAUDE.md                     # Added: project description for Claude
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx              # Updated: About component wired in
│   │   └── globals.css
│   └── components/
│       └── About.tsx             # Added: About component
├── package.json
└── ...

By adding CLAUDE.md, Claude now understands the project structure and generates code at the correct paths and in the correct form.

Summary: What Level 1 Taught Me

CLAUDE.md is a “project description” that persists across sessions
Writing the tech stack, directory structure, and coding conventions stabilizes Claude’s output quality
Use /memory to confirm which CLAUDE.md files are loaded

Next Level

Level 2 Practice: Read GitHub Issues and Implement the Skills Component