Lộ trình học›Claude API›Building with the Claude API Mở bản đồ

6.80 · Claude Code in action — Workflows thực tế

Bài viếtTrung cấp → Nâng25 phút đọc

Claude Code không phải "gõ prompt → nhận code". Nó là engineer đồng đội — needs context, needs direction, có thể iterate.

Sau bài này, bạn sẽ
  1. Use /init để setup CLAUDE.md
  2. Apply 3-step workflow: context → plan → implement
  3. TDD workflow với Claude Code
  4. Best practices for productive usage

Mở đầu: Không phải code generator, là teammate

Pattern Anthropic recommend: feed context → plan → implement. Adherence này cải thiện quality đáng kể.

/init — first thing mỗi project

cd my-project
claude
> /init

Claude:

  1. Scan codebase structure
  2. Read README, package.json, main files
  3. Identify: languages, frameworks, patterns, commands
  4. Generate CLAUDE.md

CLAUDE.md example

Project overview

React + TypeScript SPA. PostgreSQL backend via GraphQL.

Build & test

  • npm run dev — dev server
  • npm run build — production build
  • npm test — run tests
  • npm run lint — ESLint check

Coding conventions

  • Use functional components with hooks (no classes)
  • Prefer TypeScript strict mode
  • Tests alongside component: foo.tsx + foo.test.tsx

Architecture

  • src/components/ — presentation
  • src/hooks/ — reusable logic
  • src/api/ — GraphQL queries/mutations
  • src/lib/ — utilities

Auto-generated. Review + customize.

### Future sessions

CLAUDE.md loaded automatically. Claude knows:
- Build commands
- Coding style
- Architecture

Don't need re-explain.

---

Workflow 1: Context → Plan → Implement

Step 1: Context

Prompt trong Claude Code
Read src/auth/login.tsx and related files

Claude reads, understands existing pattern.

Step 2: Plan (NO CODE YET)

Prompt trong Claude Code
Plan to add two-factor authentication.
Do NOT write code yet. Just outline the approach.

Claude:

Plan:
1. Add 2FA setup screen in /settings/security
2. Store TOTP secret in users table (new migration)
3. Add /auth/verify-2fa endpoint
4. Update login flow: after password, check if 2FA enabled → prompt code
5. Add hook `useTwoFactor()` for state management
6. Tests: unit + integration

Review plan. Adjust:

Prompt trong Claude Code
Good. Also add: backup codes (6 codes user downloads once).

Step 3: Implement

Prompt trong Claude Code
Implement the plan

Claude execute step-by-step:

  • Create migration
  • Add components
  • Add endpoint
  • Write tests
  • Run tests

Each step visible → can interrupt if going wrong.

Why 3 steps?

  • Plan cheap to fix. Code expensive.
  • Catch misunderstanding early.
  • Claude's plan often better than your first sketch.

Workflow 2: Test-Driven (TDD)

Prompt trong Claude Code
Read src/lib/date-utils.ts

Brainstorm test cases for new function `format_relative_time(date)` 
that returns "2 hours ago", "yesterday", etc.

From that list, select 8 most important. Write tests in date-utils.test.ts.
Tests should fail initially since function doesn't exist.

Now implement `format_relative_time` to pass all tests.

Flow:

  1. Tests written first
  2. Tests fail (RED)
  3. Implement
  4. Tests pass (GREEN)
  5. Claude runs tests to verify

TDD particularly powerful với Claude — clear success criteria, Claude can iterate until tests pass.

Workflow 3: Bug fixing

Prompt trong Claude Code
There's a bug: /api/users returns 500 when user doesn't exist, 
should return 404.

1. Find the relevant handler
2. Write failing test for the 404 case
3. Fix the handler
4. Run tests to confirm

Claude:

  • Grep for "api/users"
  • Read handler
  • Write test (verify fails)
  • Edit handler
  • Run tests (pass)

Structured + verifiable.

Workflow 4: Refactor

Prompt trong Claude Code
Read src/components/UserProfile.tsx

This component is 400 lines. Plan how to split into smaller components.

Do the refactor. Keep same behavior. Run tests after.

Claude:

  • Analyze component
  • Propose split (e.g., Header, Bio, Actions subcomponents)
  • Execute refactor with Edit
  • Verify via npm test

Workflow 5: Learning codebase

Prompt trong Claude Code
What are the main patterns in this codebase? Show 2-3 examples.

How does authentication work end-to-end?

Generate a diagram (ASCII) of the main data flow.

Onboarding tool — faster than reading docs.

# command — enforce rules

Found pattern Claude missed? Add rule:

Prompt trong Claude Code
# Always prefer `useCallback` for event handlers passed to child components
# Prefix private helper functions with underscore

Claude asks: project / local / user. Choose appropriate.

Future sessions: Claude follows rule automatically.

Multi-step with TodoWrite

Claude Code auto-uses TodoWrite for long tasks:

Prompt trong Claude Code
Implement user dashboard redesign:
- New layout
- Chart widgets
- Responsive
- Tests

Claude creates todos:

● Design new layout (in_progress)
● Implement chart widgets
● Add responsive breakpoints
● Write tests

Marks complete as progress. Visible trackable.

Handling large changes

Claude Code hadsome safety:

  • Confirms destructive ops (rm -rf, force push)
  • Shows diff before write
  • Respects .gitignore
  • Won't run untrusted scripts without asking

Review prompts. Don't just press Yes blindly.

Best practices

1. One task per session

Fresh /clear for unrelated tasks. Prevents context pollution.

2. Commit frequently

Claude + git = magic. Commit after each working state. Easy rollback.

3. Review generated code

Don't ship without read. Claude sometimes:

  • Over-engineers
  • Misses edge case
  • Inconsistent style (unless CLAUDE.md sharp)

4. Use extended thinking for hard problems

Prompt trong Claude Code
--think "Fix this race condition bug"

(CLI flag or prompt pattern)

Claude reason more carefully.

5. Cost monitor

Prompt trong Claude Code
/cost

Check spend per session. Tune down model if hitting limits.

Common sessions

Daily — morning standup

cd project
claude
> What changed since yesterday? Summarize from git log.
> Any CI failures I should look at? Check GitHub Actions.

5-min summary.

Weekly — tech debt

Prompt trong Claude Code
Analyze codebase for technical debt. List top 5 items với impact estimate.

Prioritized backlog.

Code review

Prompt trong Claude Code
Review PR #123 changes. Focus on correctness, security, performance.

Second pair of eyes.

Documentation

Prompt trong Claude Code
Update README to reflect the new features added this week.

Auto-sync docs.

Headless usage (automation)

Claude Code runs without interactive:

claude -p "Run linter, fix all auto-fixable issues, commit with message 'chore: lint fixes'"

Use trong CI/CD, cron jobs.

Anti-patterns

"Just build it"

Prompt trong Claude Code
Build a full e-commerce site

Too vague. Claude ships sub-par attempt.

Fix: Break down. Plan first. Iterate.

No CLAUDE.md

Every session Claude re-learn codebase.

Fix: /init ngay first session. Update over time.

Skip plan step

Jump to implement → Claude misdirected → rewrite.

Fix: Always plan first for non-trivial tasks.

Ignore Claude's plan feedback

Claude says "Warning: this approach has X issue". Ignore → bug.

Fix: Read plans carefully. Engage.

Full codebase write access in prod

Claude makes mistake → merge directly.

Fix: Always feature branch + PR review.

Áp dụng ngay

Bài tập 1: 3-step workflow (30 phút)

Pick real feature you want add. Run:

  1. Context: feed 3-5 relevant files
  2. Plan: detailed, no code
  3. Implement: execute

Compare vs single-shot. Quality usually much higher.

Bài tập 2: TDD workflow (30 phút)

New function needed? Try TDD:

  • Brainstorm tests
  • Write tests (fail)
  • Implement
  • Verify pass

Note quality + maintainability.

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

Những điều cốt lõi
  • 3-step workflow: Context → Plan → Implement. Best practice.
  • /init tạo CLAUDE.md. Commit + share với team.
  • TDD với Claude Code — tests first, Claude iterate to pass.
  • # command ghi rules dynamically.
  • Commit frequently — rollback easy.
Bạn đã hoàn thành bài này chưa?Tiến độ lưu trên trình duyệt của bạn.