Bài 15.4: Skill vs CLAUDE.md / subagent / hook / MCP

​

Mục tiêu học tập

• ✅ So sánh skill với 4 cơ chế còn lại trong Claude Code: CLAUDE.md, subagent, hook, MCP server
• ✅ Chọn đúng công cụ cho mỗi use case qua decision tree rõ ràng
• ✅ Thiết kế setup kết hợp nhiều cơ chế — không force mọi thứ vào skill
• ✅ Nhận diện 3 anti-pattern phổ biến khi dev lẫn lộn các cơ chế

​

Mở đầu: “Tôi đã có CLAUDE.md, tôi cần skill làm gì?”

“Your CLAUDE.md file sets the foundation, MCP servers connect the data, subagents specialize in their roles, and Skills bring the expertise — making every piece smarter and more capable.”

• So sánh skill với từng cơ chế riêng biệt
• Đưa decision tree để bạn quyết định nhanh
• Cho case study setup đầy đủ kết hợp cả 5 cơ chế

​

5 cơ chế customize Claude Code — overview

​

Mental model: Claude Code như một layered system

​

Skill vs CLAUDE.md — Load khi nào?

​

CLAUDE.md: Always-on

# CLAUDE.md

This project uses Next.js 14 with App Router, TypeScript strict mode,
and Tailwind CSS. We follow conventional commits. Never modify files in
/migrations/ directly — use `pnpm db:migrate` instead.

​

Skill: On-demand

​

Khi nào dùng cái nào?

​

Ví dụ thực tế — quyết định 5 trường hợp

​

Anti-pattern: CLAUDE.md phình to

​

Skill vs Subagent — Cùng context vs isolated

​

Skill: Join current context

​

Subagent: Separate context

​

Khi nào dùng cái nào?

• Bạn muốn cùng conversation smarter về task
• Expertise apply throughout remaining conversation
• Ví dụ: activate PR review skill → mọi review tiếp theo trong session vẫn có expertise đó

• Bạn muốn task độc lập — không pollute main context
• Cần tool access khác main conversation (ví dụ subagent có quyền Bash mà main không có)
• Parallelize: chạy 5 subagent concurrent cho 5 file khác nhau
• Ví dụ: delegate “phân tích 10 file log” cho subagent — kết quả về main, không bloat main context

​

Skill ↔ Subagent: Hoạt động cùng nhau

“Your front-end developer subagent can use a component pattern skill. Your UI reviewer subagent can use a design system skill, but both can load and use the same accessibility standard skill.”

.claude/
├── agents/
│   ├── frontend-reviewer.md    ← subagent: skills = [component-patterns, a11y-standard]
│   └── backend-reviewer.md     ← subagent: skills = [api-conventions, a11y-standard]
└── skills/
    ├── component-patterns/     ← riêng frontend
    ├── api-conventions/        ← riêng backend
    └── a11y-standard/          ← SHARED giữa 2 subagent

​

Skill vs Hook — Request-driven vs Event-driven

​

Hook: Fire on event

• File save → run linter
• Before bash call → validate input
• After Edit tool → auto-format

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "prettier --write ${file}"
          }
        ]
      }
    ]
  }
}

​

Skill: Fire on request

​

Khi nào dùng cái nào?

​

Rule of thumb

• Hook = “operation chạy không cần Claude suy nghĩ” — tự động, deterministic
• Skill = “knowledge để Claude dùng khi reasoning” — Claude vẫn là người quyết định

​

Case: Lint workflow

Skill lint-before-commit:
  description: "Runs linter before commits. Use when committing."

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "[[ \"$TOOL_INPUT\" == *\"git commit\"* ]] && pnpm lint"
          }
        ]
      }
    ]
  }
}

​

Skill vs MCP Server — Expertise vs Data connection

​

MCP (Model Context Protocol): Connection tới external world

• MCP server cho GitHub → Claude đọc/write issue, PR, code
• MCP server cho Postgres → Claude query database
• MCP server cho Slack → Claude đọc tin nhắn

MCP server github/ expose tools:
- list_issues
- create_pr
- get_file_content
- ...

MCP server postgres/ expose tools:
- execute_query
- list_tables
- describe_schema

​

Skill: Expertise về cách làm gì với data

​

Otto’s killer one-liner

“MCP connects to data, Skills teach Claude what to do with it.”

​

Ví dụ cụ thể — MCP + Skill hoạt động cùng nhau

MCP server: github-mcp (list PRs, read code, comment)
Skill: pr-review (checklist + style + tone)

• Match skill pr-review → load instructions
• Instructions nói: gh pr view 142 hoặc dùng MCP github.get_pr(142) lấy diff
• Instructions nói: check X, Y, Z theo checklist
• Instructions nói: comment review qua MCP github.comment_pr(142, ...)

• Chỉ MCP không skill → Claude có thể đọc PR nhưng review không theo style team
• Chỉ skill không MCP → Claude biết cách review nhưng không access được PR

​

Setup cho team thực tế

“Skills can call MCP servers. That means Claude can connect with Gmail, Slack, Telegram and even your CRM.”

​

Decision

​

Decision Tree — Chọn cơ chế nào?

​

Flowchart dạng checklist

• Cần fetch data từ GitHub/Slack/DB/API? → MCP server
• Cần side-effect tự động khi save/call tool? → Hook
• Instruction luôn luôn áp dụng trong mọi conversation của project? → CLAUDE.md
• Muốn task chạy isolated, không pollute main context? → Subagent
• Instruction chỉ áp dụng khi user hỏi về task đó, Claude tự nhận? → Skill

​

Setup hoàn chỉnh: Case study team engineering

​

Tầng 1: CLAUDE.md — Foundation

# CLAUDE.md

This project uses Next.js 14 (App Router), TypeScript strict mode,
and Tailwind CSS. Database: Postgres 16 with Drizzle ORM.

Conventions:
- Conventional commits (feat, fix, chore, refactor, docs, test)
- PR target main, squash merge
- Never modify /migrations/ directly (use `pnpm db:migrate`)
- All API routes in src/app/api/
- Test coverage must stay ≥ 80%

Tools available: pnpm, gh (GitHub CLI), docker, drizzle-kit.

​

Tầng 2: MCP servers — Data connections

Configured MCP servers:
- github (list issues, read PRs, create reviews)
- linear (track tickets)
- postgres (query read-only to staging DB)
- sentry (error analytics)

​

Tầng 3: Skills — Expertise

.claude/skills/
├── pr-review/                      ← team review standard
├── commit-format/                  ← conventional commits + scope
├── drizzle-migration/              ← tạo migration đúng style
├── api-route-generator/            ← scaffold API theo convention
├── incident-postmortem/            ← template postmortem
└── onboarding-tour/                ← cho new hire

​

Tầng 4: Subagents — Specialized roles

.claude/agents/
├── frontend-reviewer.md
│   └── skills: [pr-review, a11y-audit, design-system-check]
├── backend-reviewer.md
│   └── skills: [pr-review, api-conventions, sql-perf-check]
└── security-auditor.md
    └── skills: [security-scan, owasp-checklist]

​

Tầng 5: Hooks — Automation

{
  "hooks": {
    "PostToolUse": [
      { "matcher": "Edit.*\\.ts$", "hooks": [{ "command": "pnpm prettier --write ${file}" }] }
    ],
    "PreToolUse": [
      { "matcher": "Bash.*git push.*", "hooks": [{ "command": "pnpm lint && pnpm test" }] }
    ]
  }
}

​

Kết quả

• Dev mở task “thêm API endpoint”. CLAUDE.md đã cho Claude biết stack + convention.
• Dev gõ “tạo API route cho POST /api/users”. Skill api-route-generator trigger (đúng convention team).
• Claude generate code qua MCP file system + pnpm tool.
• Dev edit code → Hook prettier --write auto format.
• Dev commit. Skill commit-format trigger khi nói “viết commit message”.
• Dev push → Hook pnpm lint && pnpm test chạy.
• Dev mở PR qua MCP GitHub. Skill pr-review bảo subagent backend-reviewer review → subagent dùng skills pr-review, api-conventions, sql-perf-check cho review toàn diện.

​

Anti-patterns — Khi dev lẫn lộn các cơ chế

​

❌ Anti-pattern 1: Nhồi review checklist vào CLAUDE.md

​

❌ Anti-pattern 2: Dùng skill thay cho hook

​

❌ Anti-pattern 3: MCP cho mọi thứ

​

❌ Anti-pattern 4: Subagent thay vì skill

​

Áp dụng ngay

​

Bài tập 1: Audit CLAUDE.md của bạn (~10 phút)

• Section cần giữ ở CLAUDE.md: _____
• Section cần move thành skill: _____
• Ước tính % giảm size CLAUDE.md: _____

​

Bài tập 2: Thiết kế setup cho use case của bạn (~10 phút)

​

Tóm tắt bài học

​

Bài tiếp theo

​

Tài liệu tham khảo

• Anthropic Academy — “Skills vs. other Claude Code features”
• Video — “Choosing the right feature”
• Model Context Protocol — MCP spec
• Otto, “Claude Agent Skills Explained” — quote sources