4.3 · Claude Code trong thực tế

Mở đầu: Xem con người vs Claude làm cùng một việc

Dev người làm thế nào (flow thực tế, có timer)

Minute 0–5

Mở project, tìm file layout. Vì không nhớ Tailwind config ở đâu, find . -name "tailwind.config*". Thấy, mở.

Minute 5–12

Đọc docs Tailwind về darkMode: 'class'. Thêm vào config.

Minute 12–20

Tìm toggle component — không có. Tạo mới. Cần sate management → dùng next-themes? Chọn next-themes. npm install.

Minute 20–35

Code component, import vào layout, test.

Minute 35–45

Dark mode hoạt động ở page chính. Nhưng nhiều component child vẫn bg-white cứng → phải grep tìm, thay bg-white bằng bg-white dark:bg-slate-900. Làm thủ công cho 20 file.

Minute 45–55

Chạy dev server, test. Có button primary vẫn sáng quá → vào primary.tsx sửa.

Minute 55–60

Commit, viết message.

Tổng: 60 phút.

Claude Code làm thế nào

Bạn gõ:

Thêm dark mode toggle cho dashboard. Dùng next-themes. Toggle đặt 
ở header navbar. Scan codebase và update mọi hardcoded color 
(bg-white, text-black, etc.) sang variant Tailwind dark: tương ứng. 
Test ở trang /dashboard và /settings.

Sau đó Claude:

0:00: Gather — Read package.json, Grep tìm layout root, Read tailwind.config. 0:05: Lập plan (text), show cho bạn:

Plan:
1. npm install next-themes (Bash)
2. Update tailwind.config.ts: darkMode: 'class'
3. Tạo ThemeProvider component
4. Wrap layout root với ThemeProvider  
5. Tạo DarkModeToggle component trong components/
6. Add toggle vào Header component
7. Grep toàn bộ "bg-white", "text-black", "bg-gray-*" → update
8. Restart dev server, test /dashboard, /settings
9. Screenshot verify

0:07: Bạn approve. Claude chạy từng bước. 1:30: Done. Commit với message chuẩn.

Tổng: 1.5 phút prompt + 2 phút review = 3.5 phút.

Dev người: 60 phút. Claude Code: 3.5 phút. Cùng output chất lượng.

Câu hỏi: Claude làm điều đó bằng tool gì? Trả lời câu hỏi đó chính là nội dung bài này.

Claude Code có những tool gì sẵn?

Claude Code đi kèm một bộ built-in tool bao quát 90% task developer thường làm. Đây là 10 tool cốt lõi:

┌────────────────────────────────────────────────────────────┐
│                                                            │
│  🔍 DISCOVERY                  ✏️ MODIFICATION             │
│  ├── Glob   — tìm file          ├── Write  — tạo file      │
│  ├── Grep   — tìm pattern       ├── Edit   — sửa 1 chỗ    │
│  └── Read   — đọc file          └── MultiEdit — sửa nhiều │
│                                                            │
│  ⚙️ EXECUTION                   📋 ORGANIZATION            │
│  ├── Bash       — chạy shell    ├── TodoWrite — task list │
│  └── BashOutput — đọc stdout    └── Agent     — subagent  │
│                                                            │
│  🌐 EXTERNAL                                               │
│  ├── WebFetch    — fetch URL                               │
│  └── WebSearch   — search web                              │
│                                                            │
└────────────────────────────────────────────────────────────┘

Phân loại theo cách dùng

Điều thực sự mạnh: Orchestration

Có tool tốt thôi chưa đủ. Cái làm Claude Code thực sự mạnh là khả năng kết hợp tool thông minh để giải task đa bước.

Ví dụ: Refactor rename function

Prompt: "Rename function getOldUserData thành getUserProfile khắp codebase."

Orchestration thực tế của Claude:

┌──────────────────────────────────────────────────────────┐
│                                                          │
│  Bước 1: Grep "getOldUserData"                           │
│           → Tìm được 14 call site ở 8 file               │
│                                                          │
│  Bước 2: Read 8 file đó                                  │
│           → Hiểu context, verify đúng function cần rename│
│                                                          │
│  Bước 3: Edit function declaration                       │
│           → Ở lib/users/get-user.ts                      │
│                                                          │
│  Bước 4: MultiEdit 14 call site                          │
│           → Ở 8 file                                     │
│                                                          │
│  Bước 5: Grep lại "getOldUserData"                       │
│           → Verify 0 kết quả (đã clean hết)              │
│                                                          │
│  Bước 6: Bash "npm run typecheck"                        │
│           → Xác nhận không có type error                 │
│                                                          │
│  Bước 7: Bash "npm run test"                             │
│           → Test pass                                    │
│                                                          │
└──────────────────────────────────────────────────────────┘

7 tool call trong 30 giây. Con người làm thủ công dễ miss 1-2 call site → bug runtime 2 tuần sau.

Bài học: Orchestration quan trọng hơn từng tool

Một coding assistant có 50 tool nhưng không biết kết hợp = vô dụng. Claude Code có 10 tool nhưng orchestrate xuất sắc = làm được việc lớn.

Ví dụ thực chiến: Một session 5 phút với Claude Code

Tình huống

Bạn có repo uigen (sẽ cài ở Bài 4.5). Mở Claude Code trong repo đó.

Session

You: Xem project này là gì, tech stack, flow chính.

Claude:
  [Read] package.json
  [Read] README.md
  [Glob] src/**/*.{ts,tsx}  → 47 file
  [Read] src/app/page.tsx
  [Read] src/lib/prompts/generation.tsx

  Đây là uigen — web app Next.js 14 dùng Claude API để generate 
  React component từ prompt người dùng. Tech stack:
  - Next.js 14 (App Router)
  - Prisma + SQLite (persistence)
  - Anthropic SDK (gọi Claude API)
  - Tailwind CSS
  
  Flow chính:
  1. User nhập prompt "tạo cho tôi một pricing card"
  2. Frontend gọi /api/generate
  3. Backend call Claude API với system prompt template
  4. Response stream về UI real-time
  5. Code được lưu vào SQLite

You: Có vẻ prompt template trong generation.tsx hơi chung chung. 
     Làm cho nó generate component đa dạng style hơn.

Claude:
  [Read] src/lib/prompts/generation.tsx  (chi tiết)
  
  Prompt hiện tại chỉ nói "create a React component" rồi thôi.
  Tôi đề xuất thêm:
  1. Diversity directives (style variants)
  2. Examples để Claude có "taste"
  3. Anti-patterns để tránh output boring
  
  Muốn tôi proceed không?

You: Yes.

Claude:
  [Edit] src/lib/prompts/generation.tsx
    + Thêm 15 dòng diversity directives
    + Thêm 3 example outputs khác style
  [Bash] npm run dev
  [Bash] curl localhost:3000/api/generate -d '{"prompt":"pricing card"}'
  
  ✅ Test OK. Output giờ có warm sunset gradient (orange-pink), 
  asymmetric layout. Khác hẳn "purple-blue" mặc định.

5 phút, 8 tool call, thay đổi đáng kể. Dev người làm thủ công: tìm file (5p) + đọc hiểu (10p) + suy nghĩ thêm gì (15p) + test (10p) = 40 phút.

Case studies theo ngành

Sales Engineering — Custom demo nhanh

Trước: "Khách hỏi 'demo feature X được không?' — dev lead phải fork repo, hack demo, deploy. 2 ngày."

Với Claude Code orchestration:

• Glob + Read hiểu codebase
• Bash fork + checkout branch
• Edit hack config cho demo
• Bash deploy preview
• Kết quả: 2 ngày → 2 giờ, win nhiều deal hơn

DevOps — Audit Kubernetes manifest

Trước: "30 manifest files, cần check security best practice. Thủ công 1 tuần."

Với Claude Code:

• Glob tìm *.yaml
• Read từng file
• Cross-check với OWASP K8s checklist
• Output report markdown với ưu tiên
• Kết quả: 1 tuần → 4 giờ

Game Development — Bug triage từ Steam review

Trước: "QA đọc 500 Steam review/tuần, chia loại, tạo ticket. 2 ngày."

Với Claude Code:

• WebFetch Steam review page
• Classify (bug vs feature vs praise)
• Match với codebase bằng Grep key terms
• Write ticket draft cho Jira
• Kết quả: 2 ngày → 3 giờ

Health Tech — Generate FHIR schema từ sample

Trước: "Có 50 JSON sample từ EHR partner, phải tự tay viết FHIR resource schema. 1 tuần."

Với Claude Code:

• Read tất cả sample
• Infer schema pattern
• Write schema files
• Bash validate với FHIR validator
• Iterate
• Kết quả: 1 tuần → 1 ngày, coverage 95%

Anti-patterns: Khi Claude orchestrate sai

Claude skip gather context, đi thẳng vào code

Biểu hiện: bạn vừa gõ prompt, Claude Write file ngay không Read hay Grep gì. Thường xảy ra với prompt mơ hồ.

Tại sao sai

Không hiểu context → output thường không fit codebase.

Cách đúng

Prompt rõ "Đọc các file liên quan trước, plan, rồi hỏi tôi approve." Hoặc dùng Planning Mode (Bài 4.7).

Claude đọc QUÁ nhiều file trước khi action

Biểu hiện: bạn hỏi task nhỏ, Claude Read 40 file. Tốn token, chậm.

Tại sao sai

Có thể prompt không cung cấp đủ scope, Claude "paranoid" đọc hết.

Cách đúng

Giới hạn scope trong prompt: "Chỉ nhìn vào @src/features/billing/..."

Claude stuck trong loop Grep → Read → Grep → Read

Biểu hiện: 15 tool call, vẫn chưa action. Claude bị lạc.

Cách đúng: Esc interrupt. Cho Claude context cụ thể hơn (file cụ thể hoặc description chi tiết hơn).

Bạn tin Claude "đã làm" mà không verify

Biểu hiện: Claude bảo "done" → bạn commit và push — nhưng thực tế test fail Claude không report.

Cách đúng: Luôn verify — đọc diff, chạy test độc lập, mở app. Claude Code có khi over-claim success.

Mẹo nâng cao

Mẹo 1: Prompt để Claude "suy nghĩ trước hành động"

Trước khi edit file nào, show cho tôi plan:
1. Files you'll read
2. Files you'll modify
3. Tests you'll run
Đợi tôi approve rồi mới execute.

Pattern này = Planning Mode manual. Giúp bạn kiểm soát token spend.

Mẹo 2: Giới hạn scope rõ ràng

Chỉ làm việc trong @src/features/auth/. Đừng touch file ngoài thư 
mục này. Nếu thấy cần sửa file khác, liệt kê cho tôi xem thay vì 
tự sửa.

Mẹo 3: Hỏi Claude list tool cho task

Cho task "refactor rename hàm foo thành bar", bạn sẽ dùng tool nào 
theo thứ tự gì? Không execute, chỉ plan.

Giúp bạn học cách Claude "nghĩ".

Áp dụng ngay

Bài tập 1: Dự đoán tool use (10 phút)

Với mỗi prompt dưới, ghi trước bạn đoán Claude sẽ dùng những tool gì (theo thứ tự):

1. "Xem project này có dùng TypeScript strict mode không?" Đoán: ________________________________

1. "Thêm header 'X-Request-ID' vào mọi API response." Đoán: ________________________________

1. "Viết README.md dựa trên code hiện có." Đoán: ________________________________

1. "Tìm trong codebase có chỗ nào dùng any type, suggest cách replace." Đoán: ________________________________

Sau khi đoán, chạy từng prompt trong Claude Code và so sánh với thực tế.

Chấm điểm:

• 4/4 đúng: Bạn có mental model chuẩn về Claude
• 2–3/4: OK, vẫn học được
• 0–1/4: Đọc lại phần "tool classification" phía trên

Bài tập 2 (optional, 20 phút): Quan sát orchestration

Bước 1: Trong uigen project, gõ:

Thêm một button "Export as PDF" ở trang /dashboard. Khi nhấn, 
export nội dung page thành PDF. Dùng library @react-pdf/renderer. 
Viết test tối thiểu.

Bước 2: Ghi lại từng tool call của Claude. Tổng bao nhiêu?

• Số Read: ____
• Số Grep: ____
• Số Edit: ____
• Số Bash: ____
• Tool khác: ____

Bước 3

Nếu phải làm thủ công, bạn sẽ cần bao nhiêu bước tương đương?

Bước 4

Tỷ lệ thời gian: thủ công _____ phút vs Claude _____ phút.

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

Tài liệu tham khảo

• Claude Code docs — built-in tools
• Agent design patterns — Anthropic
• Bài 4.10 — MCP để thêm tool mới cho Claude
• Bài 4.6 — CLAUDE.md để định hướng cách Claude dùng tool