Level 4 Practice: Write Style Rules in Memory to Unify Quality

About This Tutorial

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

---

CLAUDE.md doesn’t have to live only at the project root. A CLAUDE.md placed in a subdirectory applies to everything under that directory, and ~/.claude/CLAUDE.md in your home folder becomes a global rule for all projects. I’ll use this hierarchy to stabilize the writing quality of blog articles.

---

Carrying Over from the Previous Level

In Level 3, I was able to produce blog posts at scale with /blog, but the writing style varied across articles.

Example of style inconsistency across generated articles:

Article 1: "Type inference is a feature that..."  (declarative)
Article 2: "You can use App Router to..."          (permissive tone)
Article 3: "Let's configure it as shown below."   (instructional tone)

---

Step 1: Create a User-Level CLAUDE.md

~/.claude/CLAUDE.md is a personal setting that applies to all projects. Write personal preferences and common rules here.

Full contents of ~/.claude/CLAUDE.md:

# User Settings — Global Instructions for Claude

## About Me

Frontend engineer. I primarily use Next.js / TypeScript / Tailwind CSS.
I use Claude Code for developing a personal blog and portfolio site.

## Communication Style

- Reply in English
- Be concise; lead with the main point
- For code explanations, focus on "why" rather than "what"
- If something is unclear, ask before implementing (don't assume and proceed)

## Default Coding Settings

- Language: TypeScript (don't omit type definitions)
- Styling: Tailwind CSS
- Testing: Vitest + Testing Library
- Package manager: npm

## Output Preferences

- Add a file path comment at the top of code blocks
- Output the full file, not just a diff
- When changing multiple files, list the files to be changed at the start

---

Step 2: Create a Blog-Specific CLAUDE.md

Create src/content/posts/CLAUDE.md. This file applies only when generating or editing blog articles.

Full contents of src/content/posts/CLAUDE.md:

# Blog Article Rules

The MDX files in this directory are blog posts.
When generating or editing articles, follow all rules below.

## Writing Style

- **Use a direct, confident tone**
- Prefer declarative statements: "it does X" over "you can do X"
- Avoid "Let's do X" or "Please do X" (feels pushy)
- Keep sentences to 60 characters or fewer where possible

## Structure Rules

- Open with 1–2 sentences on "what the reader will be able to do after reading this"
- Use 4–6 h2 headings (too few = insufficient depth, too many = unfocused)
- Write each section in "definition → example → application" order
- Always use working, runnable code examples

## Quality Standards

- Total word count: 600–1200 words
- Code blocks: at least 3 per article
- Add a file path or context comment to each code block

## Frontmatter

```yaml
---
title: "Article Title"
date: "YYYY-MM-DD"
description: "50–100 character summary. Becomes the search result snippet."
tags: ["tag1", "tag2"]   # 2–4 tags
published: false          # false before review
---

Prohibited

• Vague phrases like “I think” or “it might be”
• Library versions or APIs you haven’t verified
• Writing unconfirmed information as if it’s confirmed

---

## Step 3: Confirm the Hierarchy Appears in /memory

Launch Claude Code and run `/memory`.

```bash
cd my-portfolio
claude

> /memory

Example output:

Active memory files (in order of priority):
  1. /Users/yourname/.claude/CLAUDE.md           (global)
  2. /Users/yourname/my-portfolio/CLAUDE.md      (project)
  3. /Users/yourname/my-portfolio/src/content/posts/CLAUDE.md  (local)

Current directory: /Users/yourname/my-portfolio

You can confirm all three layers are recognized. Priority order is local > project > global.

---

Step 4: Confirm the Writing Style Is Now Unified

Generate a new article with /blog and check the style.

> /blog A Complete Guide to React useEffect

Opening of the generated src/content/posts/react-use-effect-guide.mdx:

---
title: "A Complete Guide to React useEffect"
date: "2026-03-29"
description: "Understand how useEffect works and how dependency arrays function, so you can prevent common infinite loops and unintended side effects."
tags: ["React", "Hooks", "useEffect"]
published: false
---

`useEffect` is the Hook for handling lifecycle behavior in function components.
This article covers how `useEffect` works internally and how dependency arrays function,
so you can avoid common misuse patterns.

## useEffect Basics

`useEffect` runs side effects — data fetching, DOM manipulation, timer setup — after a component renders.

The style is consistent: direct declarative sentences, no “Let’s do X” patterns.

---

Step 5: Split Rules into .claude/rules/

When rules grow, split them into .claude/rules/ and import them with @ in the project CLAUDE.md.

mkdir -p my-portfolio/.claude/rules

.claude/rules/writing-style.md:

# Writing Style Rules

- Use a direct, confident tone
- Prefer declarative statements
- Keep sentences under 60 characters
- Avoid "Let's do X"

.claude/rules/coding-style.md:

# Coding Style Rules

- Don't omit TypeScript type definitions
- Define components with export default function
- Styling with Tailwind CSS only
- Place test files as *.test.tsx, not in __tests__/

Add @ imports to the project CLAUDE.md:

## Rule References

@.claude/rules/writing-style.md
@.claude/rules/coding-style.md

Using @ imports lets me manage rules by category while keeping CLAUDE.md itself concise.

---

The my-portfolio at This Point

my-portfolio/
├── CLAUDE.md                     # Updated: @ imports added
├── .claude/
│   ├── settings.json
│   ├── commands/
│   │   ├── blog.md
│   │   └── review.md
│   └── rules/                    # Added: rule files
│       ├── writing-style.md
│       └── coding-style.md
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── About.tsx
│   │   └── Skills.tsx
│   └── content/
│       └── posts/
│           ├── CLAUDE.md         # Added: blog-specific rules
│           ├── typescript-type-inference.mdx
│           ├── nextjs-app-router-intro.mdx
│           └── react-use-effect-guide.mdx    # Added: article with unified style
└── ~/.claude/CLAUDE.md           # Added: user global settings (outside project)

---

Summary: What Level 4 Taught Me

• CLAUDE.md can be placed in three layers: ~/.claude/ (global), project root, and subdirectories
• A subdirectory CLAUDE.md applies only to operations under that directory
• Use @filepath to split and manage rule files
• Use /memory to confirm which CLAUDE.md files are active and their priority

---

Next Level

Level 5 Practice, “Complete Issue → Implement → Test → PR in One Prompt,” is in preparation.