Level 3 Practice: Mass-Produce Blog Posts with the /blog Command

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

The Skills section from Level 2 is done. Now I’m adding a blog feature. To eliminate the repetitive manual work of creating an MDX file and writing frontmatter every time I write an article, I’ll create a custom command that generates an article scaffold with just /blog <title>.

---

Carrying Over from the Previous Level

.claude/settings.json (GitHub MCP) and src/components/Skills.tsx are complete from Level 2.

Create the /blog Command

Create .claude/commands/blog.md:

# Blog Post Generator

Generate an MDX file in `src/content/posts/` using `$ARGUMENTS` as the title.

## File Naming Rules

Convert the title to kebab-case for the filename.
Example: "TypeScript Type Inference" → `typescript-type-inference.mdx`

## Frontmatter Format

```mdx
---
title: "$ARGUMENTS"
description: "Summarize the content in 1–2 sentences"
publishedAt: "today's date (YYYY-MM-DD)"
tags: ["related-tag-1", "related-tag-2"]
---
```

## Article Structure

1. **Introduction** — Why learn this topic, who it's for, estimated reading time (3–4 sentences)
2. **Core Concept** — Beginner-friendly explanation with concrete examples
3. **Code Example** — At least one working sample
4. **Practical Use Cases** — How to apply this in real development
5. **Summary** — 3–5 bullet points covering the key takeaways

## Constraints

- Write in a clear, direct style
- Specify the language on all code blocks (e.g., ` ```typescript `)
- Aim for explanations accessible to beginners

Run It

/blog TypeScript Type Inference for Beginners

Generated src/content/posts/typescript-type-inference.mdx:

---
title: "TypeScript Type Inference for Beginners"
description: "A beginner-friendly explanation of how TypeScript automatically infers types, with concrete code examples."
publishedAt: "2026-03-29"
tags: ["TypeScript", "beginner", "type-system"]
---

When you start using TypeScript, you may feel that writing types every time is tedious. TypeScript actually has a feature called **type inference** that can automatically determine types in many situations.

**Who this is for**: Developers who are just getting started with TypeScript.

**Estimated reading time**: About 10 minutes

## What Is Type Inference?

TypeScript infers types automatically from the values assigned to variables.

```typescript
// TypeScript infers these without explicit annotations
const name = "Alice"   // inferred as string
const age = 25         // inferred as number
const isActive = true  // inferred as boolean

// Incorrect assignments become errors
// name = 123  // Error: Type 'number' is not assignable to type 'string'

…

Generate another one:

/blog Introduction to Next.js App Router

`src/content/posts/nextjs-app-router-intro.mdx` is generated.

## Add a Code Review Command Too

`.claude/commands/review.md`:

```markdown
# Code Review

Check the current change diff (git diff) and review it from the following angles:

1. TypeScript type safety (use of `any`, missing type definitions)
2. React best practices (unnecessary re-renders, `useEffect` dependency arrays)
3. Accessibility (`alt` attributes, ARIA labels)

List issues in the format "Severity (high/medium/low): description".
If there are no issues, respond with "✅ Review complete: no issues found".

The my-portfolio at This Point

• .claude/commands/blog.md — blog post generation command
• .claude/commands/review.md — code review command
• src/content/posts/typescript-type-inference.mdx
• src/content/posts/nextjs-app-router-intro.mdx

---

Next Level

I can now produce blog posts at scale. However, the writing style varies from article to article. Next I’ll design memory to unify quality.

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