Capstone: Build a Memory System

Time: 30-60 minutes | Skills: Context Window, CLAUDE.md, User Memory, /compact

The Scenario

You are building a small web application that has a frontend (HTML, CSS, JavaScript) and a backend (a simple API). Different parts of the project use different conventions, and you want Claude to remember the right rules for each part — automatically, every session.

Your goal is to create a complete, layered memory system using everything you learned in this module: global user memory, project memory, nested subdirectory memory, and context window management.

Setup

Create the project structure. Open your terminal and run:

mkdir memory-system-project
cd memory-system-project
mkdir frontend
mkdir frontend\css
mkdir frontend\js
mkdir backend
mkdir backend\routes
mkdir backend\models

Start Claude Code in the project folder:
```
claude
```

Part 1: Global User Memory

First, set up your personal preferences that should apply to every project you work on.

Ask Claude to create or update your global user memory:

Update my global CLAUDE.md (the one in ~/.claude/) with these preferences:
- I am a beginner and prefer simple explanations
- Always add code comments explaining what each section does
- Use 2-space indentation for all files
- When creating files, include a comment at the top with the file name and purpose

Verify it was created by asking:
```
Show me what is in my global CLAUDE.md
```

Part 2: Root Project Memory

Now create the project-level CLAUDE.md that describes the overall project.

Ask Claude to create the root CLAUDE.md:

Create a CLAUDE.md in the project root with this information:

Project Name: Task Tracker App
Description: A simple web app for tracking to-do items
Structure:
- /frontend/ contains HTML, CSS, and JavaScript
- /backend/ contains the API server
General rules:
- Use descriptive variable names (no single-letter variables)
- All functions must have a comment explaining their purpose
- Error handling is required for all API calls

Review the file Claude creates and ask for any adjustments.

Part 3: Frontend Nested Memory

Create a CLAUDE.md inside the frontend/ directory with frontend-specific rules.

Ask Claude:

Create a CLAUDE.md in the frontend/ directory with these rules:
- Use vanilla JavaScript only (no frameworks)
- CSS class names should use kebab-case (e.g., task-item, add-button)
- HTML files should include a meta viewport tag for mobile
- JavaScript should use const and let, never var
- All event listeners should be added in a DOMContentLoaded handler

Part 4: Backend Nested Memory

Create a CLAUDE.md inside the backend/ directory with backend-specific rules.

Ask Claude:

Create a CLAUDE.md in the backend/ directory with these rules:
- Use Node.js with Express
- All route handlers should use async/await
- API responses should always include a "success" boolean and a "data" or "error" field
- Use camelCase for all variable and function names
- Every route file should export a router object

Part 5: Test the Memory Layers

Now verify that Claude follows the right rules depending on which part of the project you are working in.

Test frontend rules:
```
Create a file frontend/js/app.js that initializes the task tracker app.
It should add an event listener for a button click that adds a new task.
```
Check: Does the file use const/let (not var)? Are there comments? Is there a DOMContentLoaded handler? Does it have 2-space indentation?
Test backend rules:
```
Create a file backend/routes/tasks.js that has GET and POST routes
for managing tasks.
```
Check: Does it use async/await? Does it return { success: true, data: ... } format? Does it use camelCase? Does it export a router?
Test that both layers combine:
```
What coding conventions should I follow in the frontend versus the backend?
```
Claude should describe different rules for each, proving it reads the nested CLAUDE.md files correctly.

Part 6: Context Window Management

Now practice managing context during a longer session.

Check your current usage:
```
/cost
```

Compact with focus — you are done setting up memory and want to shift to development:

/compact We finished setting up the memory system. Summarize the project structure and rules.

Check usage again:
```
/cost
```
Compare the input token count to before — it should be significantly lower.

Continue working — ask Claude to create one more file:

Create frontend/index.html with a basic task tracker interface.
Include an input field, an "Add Task" button, and an empty task list.

Save key decisions before ending:

Update the root CLAUDE.md to note that we created the initial project
files: frontend/js/app.js, backend/routes/tasks.js, and frontend/index.html

Part 7: Fresh Session Test

The ultimate test — does everything survive a restart?

Exit the session:
```
/exit
```
Start a new session in the same folder:
```
claude
```
Ask Claude what it knows:
```
What do you know about this project? What rules should you follow?
```
Claude should describe the project, its structure, and the coding conventions — all from the CLAUDE.md files, without any memory of your previous conversation.
Test rule adherence:
```
Create a new file frontend/css/style.css with basic styling for the task tracker.
```
Check: Does it use kebab-case class names? Does it have a comment at the top? Does it use 2-space indentation?

Self-Assessment

What makes a great memory system?

A great memory system is layered (global, project, subdirectory), concise (bullet points, not essays), and maintained (updated as the project evolves). If you checked all the boxes above, you have built exactly that. Your Claude Code sessions will be more productive from here on out.

Help Us Improve

How was this lesson? Take 2 minutes to share your feedback — it helps us make the tutorials better for everyone.

Give Feedback →

The Scenario​

Setup​

Part 1: Global User Memory​

Part 2: Root Project Memory​

Part 3: Frontend Nested Memory​

Part 4: Backend Nested Memory​

Part 5: Test the Memory Layers​

Part 6: Context Window Management​

Part 7: Fresh Session Test​

Self-Assessment​