Chapter 20 · Capstone Project

Chapter goals: Comprehensive application of everything learned in the previous 19 chapters — build a full-stack Todo app from scratch, walking through the complete workflow of需求 analysis, CLAUDE.md writing, MCP tool integration, Skill encapsulation, Hooks automation, and deployment verification.

20.1 Project Planning and CLAUDE.md

First initialize the project and write CLAUDE.md — this is the foundation of the entire workflow:

mkdir todo-app && cd todo-app
git init
npm create vite@latest . -- --template react-ts

# CLAUDE.md

## Project Overview
Full-stack Todo app: React + TypeScript frontend, Express + SQLite backend.

## Tech Stack
- Frontend: React 18, TypeScript, Tailwind CSS
- Backend: Express, better-sqlite3
- Tests: Vitest (frontend), Jest (backend)
- Package manager: pnpm

## Hard Constraints
- All API routes use the /api/v1/ prefix
- DB operations must go through the repository layer
- Every feature must have corresponding tests

## Verification Commands
- Frontend tests: pnpm test:front
- Backend tests: pnpm test:back
- Type check: pnpm typecheck
- Full verify: pnpm check

20.2 Requirements → Design → Coding

Start Claude Code and推进 by stage:

claude

> I want to build a Todo app. First read CLAUDE.md to understand the constraints,
  then write a feature list and implementation plan in docs/plan.md.

Claude generates a structured plan document. After reviewing and confirming, execute incrementally:

> Start implementing the first feature from plan.md (create tasks).
  Build the backend API and DB layer first, then the frontend components and tests.

20.3 Integrating MCP Tools

Configure filesystem and database tools for Claude:

// .claude/mcp.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
    },
    "sqlite": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./data/todo.db"]
    }
  }
}

After配置, Claude can directly query the database status todebug issues.

20.4 Skills and Hooks Automation

Encapsulate重复 operations as Skills; use Hooks for automated quality checks:

<!-- .claude/skills/deploy/SKILL.md -->
---
name: deploy-check
description: Pre-deploy checks: run all tests, type checks, and builds; only allow deployment after all pass.
---

## Steps
1. Run pnpm check (includes lint + typecheck + all tests)
2. Run pnpm build to confirm成功构建
3. If any step fails, report errors and stop
4. After all pass, output "✅ Deploy check passed"

// .claude/settings.json — Hooks
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "pnpm lint --fix --quiet"
      }
    ]
  }
}

Auto-run lint fix after every file edit by Claude.

20.5 Verification and Deployment

After completing development, have Claude执行 the full deployment flow:

> Use the deploy-check skill for pre-deployment verification.
  After all pass, help me generate a Dockerfile and docker-compose.yml.

Claude will:

1. Load the deploy-check Skill;
2. Execute检查 commands item by item;
3. Generate Docker config based on the project structure;
4. Commit code and tag.

Chapter Summary

• CLAUDE.md is the cornerstone of the entire workflow —写 constraints before writing code;
• MCP tools let Claude directly query databases and other外部 resources;
• Skills encapsulate复用 multi-step operations; Hooks automate quality assurance;
• Complete workflow: requirements → plan → code → test → deploy.

🧪 随堂测验

点击你认为正确的选项。答错时会展示正确答案与原因解析。

1. In the capstone project, why create CLAUDE.md before writing code?

2. In the capstone project, what is the value of the MCP sqlite server?

3. What is the division of labor between the deploy-check Skill and the PostToolUse Hook?

4. What is the correct order for the capstone workflow?

🛠️ Hands-on Practice

🎉 Congratulations on completing the core capstone! Continue to Chapter 21 to learn about recent新特性.