Everything I learned from Anthropic's course. And how I'll use it when I redesign this site

Field Note 008 was about finishing Anthropic's Claude Code in Action course and finding a deprecated feature mid-lesson. This one is what comes next. Everything I learned, and how it maps to the fieldnotes-ai redesign coming up.

Designer feedback is incoming. When it lands, I'll be using Claude Code to execute the full frontend refactor. This note is my preparation. Written now so I don't have to remember it all later.

Before touching a single file

The biggest shift from the course is understanding that Claude Code works best when you slow it down before it speeds up.

Planning Mode, activated with Shift+Tab, puts Claude into read-only. It explores the codebase, asks clarifying questions, builds a full plan. Nothing gets changed until you approve. For a redesign touching components, styles, content model, and routing all at once, this is not optional.

The rule that stuck: if you can describe the change in one sentence, skip it. If you can't, use it.

Thinking Mode adds reasoning depth to any individual prompt. The phrases scale from light to heavy: "think", "think more", "think a lot", "think longer", and "ultrathink" at the top. Embed them directly in any prompt. "Ultrathink about the best component structure for this layout." It works. The terminal even syntax-highlights it.

Don't use ultrathink on everything. More thinking means more tokens and more time. Save it for the genuinely hard problems.

Combine both. Planning Mode plus a thinking phrase before anything is touched. That's the setup for any complex change.

Keeping sessions clean

Long refactor sessions get noisy. Four commands worth knowing before you start:

Escape interrupts Claude mid-task and lets you redirect without starting over. Double-tap Escape rewinds the conversation to an earlier point while keeping the context you care about. /compact summarises the session and continues, useful when a session gets long. /clear wipes everything, for when you're switching to a completely different part of the codebase.

Setting up MCP servers from day one

For this refactor I'll need two MCP servers connected to the fieldnotes-ai project before any work starts.

Contentful MCP gives Claude access to the content model and entries directly. No more copy-pasting field names into prompts or explaining the schema from scratch every session. Claude will know it.

Playwright MCP lets Claude open a real browser and see what it builds. For a visual redesign this is the most valuable thing on the list. Claude can navigate to localhost, inspect the rendered output, and make informed decisions about styling rather than guessing from code alone.

Both get added with the same command pattern:

claude mcp add contentful npx @contentful/mcp@latest

claude mcp add playwright npx @playwright/mcp@latest

To skip permission prompts for Playwright, add mcp__playwright with double underscores to the allow array in .claude/settings.local.json.

Protecting the codebase this time Field Note 006 was about a Contentful Management Token ending up in git history through a Claude Code MCP config file. GitGuardian caught it. That cannot happen again.

Two things going in from day one. First, .claude/ goes into .gitignore before the first commit. Not after something goes wrong. Before. Second, a PreToolUse hook that blocks Claude from reading .env files. It watches both Read and Grep tools, since either can expose file contents. The hook reads the tool call JSON from stdin, checks the file path, and exits with code 2 if .env appears anywhere in the path. Claude receives the error message and understands why the operation was blocked.

"matcher": "Read|Grep"

The pipe is an OR. Both tools covered with one hook. Simple and reliable.

Making Claude smarter about the project

Everything Claude needs to know about fieldnotes-ai goes into CLAUDE.md before the refactor starts. The Contentful content model. The design tokens. Component conventions. The rules about what lives in the CMS versus what's hardcoded.

This is what the deprecated # shortcut was trying to be. CLAUDE.md is better. Version-controlled, structured, loads every session automatically.

Repetitive tasks get turned into custom commands in .claude/commands/. Each markdown file becomes a slash command. Use $ARGUMENTS to make them flexible. /audit, /write_tests, anything that gets run more than twice.

The honest version of this note

Three weeks ago I didn't know Planning Mode existed. Didn't know you could type "ultrathink" into a prompt and have it mean something. Didn't know hooks could protect sensitive files before Claude even tries to read them.

The course taught me all of it. One feature in the course was already gone by the time I took it. That's fine. That's the pace. The rest of the material was genuinely worth it.

When the designer feedback lands, I'll be using all of this. If something breaks or something works unexpectedly well, there will be a Field Note about it.

That's the whole point of this site.