The 2026 engineer toolchain has evolved from "IDE + Copilot" to "terminal + agentic AI." The fastest and most discussed among engineers is Anthropic launched Claude Code.
This article is for engineers "who already know how to code, but haven't systematically used Claude Code yet." If you are currently using CursorWhether you're using GitHub Copilot, or still copy-pasting code into a ChatGPT window, this article will cover everything you need to know at once: how to install, how to write CLAUDE.md, how to run an agentic workflow, how to divide tasks with Cursor, pitfalls to avoid, and finally, 7 practical tips + 2 bonus ones for you.
1. What is Claude Code? Understand in 1 minute
Claude Code is an AI programming assistant that runs in the terminal, officially launched by Anthropic, powered by the Claude family of models (Opus 4, Sonnet 4, Haiku 4).
Its official positioning is "agentic coding tool," which differs from Copilot and Cursor, which you've used in the past, in its underlying philosophy:
- CopilotAutocomplete in the IDE, you type half and it completes the rest.
- CursorAn IDE forked from VS Code, integrating chat and Composer into the editor.
- Claude CodeRun it directly in your terminal. It can read your entire repo, run shell commands, modify files, run tests, and open PRs.
To be honest, the biggest difference between this and Cursor is that it's "not an IDE fork." Claude Code doesn't have its own editor; it's just a CLI tool that runs alongside your familiar VS Code, Neovim, or JetBrains. You don't have to switch IDEs, and you don't need to learn new shortcuts.
2024-2026 TimelineTake a quick look:
- 2024 Q1: Anthropic releases Claude 3, and engineers start using the API to write various coding agents.
- 2024 Q4: Fierce competition among Cursor, Continue, and Aider heats up.
- 2025 Q1: Claude Code enters research preview, only available to Anthropic's own engineers and a few closed beta users.
- Mid-2025: Claude Code opens to Pro/Max users.
- 2025 Q4 ~ 2026: Claude Code becomes the tool with the most engineers switching over from Cursor on X and Hacker News, and communities begin sharing CLAUDE.md templates in large numbers.
By June 2026, Claude Code will have built-in VS Code extensions, JetBrains plugins, and MCP The ability to integrate, no longer just at the "run it in terminal" stage.
Looking further, Claude Code is not just "another AI programming tool"; it represents a paradigm shift in the engineer's toolchain: from "AI helps you complete" to "AI helps you run the entire task." In the past, you would give a command like "Help me write this function," but now you give a command like "Help me replace this whole module and run the tests to confirm nothing is broken." This difference isn't just a matter of scale; it's a difference in "role." Copilot is an assistant, while Claude Code is a colleague.
Why is this happening in 2026? Three prerequisites are maturing simultaneously:
- Model inference capabilityThe Claude 4 series has broken through the threshold of "trustworthy agents to complete the entire task" on the two metrics of long-context retrieval and multi-step reasoning.
- Standard for Tool CallsMCP standardizes what tools AI can use, leading to an explosion in the tool ecosystem.
- Engineer acceptanceAfter two years of market education by Cursor/Copilot in 2024-2025, engineers' acceptance and critical judgment of "AI writing code" have matured, allowing them to distinguish which tasks to assign to AI and which to write themselves.
Two, why are engineers switching from Cursor to Claude Code?
You might have heard "everyone is using Claude Code now," but the cost of switching tools isn't low. So why are some people still switching? Three key differences.
Can the context window really fit
The Claude series of models supports a 200K token context window, with some enterprise plans reaching 1M. In contrast, Cursor's default context is mostly confined to "open files + files you @ mention." Claude Code can read through an entire medium-sized repo at once.
These tasks, "refactoring an entire module," "finding cross-file bugs," and "explaining a legacy codebase," are vastly different. Cursor's Composer often "forgets previous context" during refactors involving more than 30 files. Claude Code does not.
Let me give you a specific example: Imagine you've inherited a legacy Django project with 50,000 lines of code and you want to understand the complete data flow for a specific endpoint. With Cursor, you'd have to open files one by one to read them. With Claude Code, you could simply say, "Trace the complete flow of POST /orders from input to database write, listing every key function," and it would find, read files, and piece together the flowchart itself. For tasks like this, an insufficient context window is a death sentence.
2. Agentic workflow is native
Cursor's Composer is more like "multi-file editing." You give it commands, and it modifies multiple files at once. Claude Code is "given a task, and it decides on its own which files to read, which commands to run, which code to write, and which tests to run."
The main point is: Claude Code can execute shell commands by default (you can deny/approve/allow), which means it can by itself:
- 跑
npm testHave you tested it? - 跑
git diffSee what I changed - 跑
rgLook for cross-file references - 跑
tsc --noEmitSelf type check
In Cursor, you have to manually switch back to the terminal to run it, and then paste the result back.
3. CLAUDE.md Persisting "Project Knowledge"
CLAUDE.md is the "project description" for Claude Code, placed in the repo root and automatically read on startup. You write the architecture, coding style, tech stack, and testing conventions into it once. After that, Claude Code will bring this context with it whenever it runs any task.
Compare Cursor's .cursorrules While also similar, the community discussion and ecosystem (example repos, awesome lists) are currently more mature for CLAUDE.md.
Suitable people vs. unsuitable people
| condition | Suitable for Claude Code | Not suitable for Claude Code |
|---|---|---|
| Working mode | Terminal-heavy, Git-heavy | Pure IDE GUI, use the terminal less. |
| Task type | refactor, debug, write tests, organize legacy | Pure autocomplete, single-line completion |
| Codebase Size | Medium to Large (10K+ LOC) | One-off script, toy project |
| Budget | Willing to pay $20-200 per month | Only the free plan |
| Willingness to learn | Willing to spend 1-2 days familiarizing myself with new tools | Absolutely do not want to change my workflow. |
True witness (public source)
- Anthropic's official blog mentioned that internal engineers saw a "significant increase in PR throughput" after using Claude Code (specific numbers to be confirmed by official announcements).
- On X / Twitter
@swyx、@simonwTechnology reviewers have repeatedly posted examples of Claude Code running agentic tasks. - Hacker News has repeatedly featured threads like "Show HN: my CLAUDE.md template" in 2025.
This isn't marketing talk; it's organic momentum from the community itself.
The true cost of switching tools
To be honest, switching from Cursor to Claude Code wasn't painless. Here are a few of the real costs you'll encounter:
- I need to retrain my shortcut memory.Change Cursor's cmd+K, cmd+L to slash commands within the terminal.
- Different file browsing methods: I'm used to clicking around in Cursor's file tree, I need to change to using
@mention - No inline completionClaude Code is "conversational + agentic," without the "press Tab to complete a line" experience of Cursor/Copilot.
- You need to learn to read diffs.All changes will be presented in diff format in the terminal, so get used to reviewing them in the terminal.
Practical advice is to first try it out on a small project for a week to get used to the workflow before deciding whether to switch completely. Or, as mentioned earlier, use both and handle different scenarios respectively.
III. Installation and Setup: Get Started in 5 Minutes
I'll show you the process directly.
Step 1: Confirm requirements
- macOS / Linux / WSL on Windows
- Node.js 18+
- One Anthropic account (Pro: $20/month, Max: $100 or $200/month, or an API key provided with the API)
Step 2: npm install
npm install -g @anthropic-ai/claude-codeAfter installing, run it for a bit. claude --version Confirmation.
Step 3: First Start & Authentication
In the root directory of any repo:
cd ~/your-project
claudeThe first startup will prompt an authentication process, with two options:
- Log in with subscription planOpen your browser and log in to your claude.ai account, then authorize back to the terminal. This is the easiest step for Pro/Max users.
- Using API keyGo to console.anthropic.com to get your API key and paste it into your terminal. Suitable for company paid / API credit users.
Once authentication is complete, the terminal will enter Claude Code's interactive mode, and the prompt will become Hello.You can just type.
Step 4: VS Code Extension Integration (Highly Recommended)
In VS Code Extensions, search for "Claude Code" to install the official extension. After installation:
- VS Code inside cmd+shift+P →
Claude Code: OpenDirect call - Files modified by Claude code will reload in VS Code in real-time.
- You can diff accept/reject within VS Code.
JetBrains users also have plugins, the logic is the same.
Step 5: Must-See Initial Setup: 5 Items
- API key / SubscriptionConfirm
~/.config/claude/There are valid credentials. - CLAUDE.mdCreate one in the repo root. This will be explained in detail later in this article.
- Permissions：The first time you run a bash command, it will ask you
yes/no/alwaysSuggestionDon't always allow directly Danger commandremove、curl | sh、git push --force）。 - ShortcutsLearn
/clear(Qing Dynasty context)/compact(Compressed history)/model(Cut model)/cost(See how much the flowers cost) These four instructions. - GitConfirm that the repo is in a clean state before letting Claude Code start working, for convenience.
git diffRevert.
Settings complete, running a simple test:
This repository provides a collection of Python scripts for common data science tasks.If it can summarize correctly, it means both authentication and basic functions are in order.
Advanced settings: Environment variables
Some teams set these environment variables for convenience in management:
ANTHROPIC_API_KEYSet API key directly, skip interactive authenticationCLAUDE_CODE_MAX_OUTPUT_TOKENSLimit single reply lengthCLAUDE_CODE_DISABLE_TELEMETRY：Turn off telemetry (common for company compliance)
The setup method is the same as with general shell env, write it into ~/.zshrc or ~/.bashrc:
export ANTHROPIC_API_KEY="sk-ant-xxx"
export CLAUDE_CODE_DISABLE_TELEMETRY=1Settings .claudeignore
跟 .gitignore Same concept. Tell Claude Code not to read certain files. The most common ones are:
# .claudeignore
node_modules/
.next/
dist/
build/
*.log
.env*
secrets/
**/*.lockWhy is it important? Because stuffing these files into the context not only wastes tokens but also dilutes the model's attention..lock Files are particularly heavy, one package-lock.json It might consume 5-10K tokens.
4. Core Functionality 1: Conversation and Context (Most Important)
The biggest difference between Claude Code and ChatGPT is that it has file system access. You don't need to copy and paste code; you can just use "@ filename."
How to use a 200K token context window?
200K tokens is approximately:
- Approximately 500-700 pages of A4 plain text
- Approximately 50-100 medium-sized TypeScript files (200-500 lines each)
- the entire source code of a medium-sized open-source project
But it's not "the more, the better." Here's the key point: the more the context is filled, the lower the model's retrieval accuracy will be. Practical recommendations:
- Small task (modify a function)Attach only the file and 1-2 related files.
- Refactor a module：@ the entire directory, but shut down the session after running and restart.
- The Big Task (Refactor the Entire System)In stages, each stage using a new session + new CLAUDE.md context.
@-mention syntax
Claude Code Support @ The mention at the beginning is super practical.
Extract the prompt from `@backend/app/agents/planner.py`, place it under `@backend/app/prompts/`, and update all imports.It will:
- 讀
planner.py - 掃
prompts/Directory structure - 跑
rgFind all importsplannerplace - Propose a revision plan
- Execute after you confirm
When should I start a new session? When should I continue?
| Context | Suggestion |
|---|---|
| Multiple subtasks for the same feature | Continue with the session |
| Switch to a completely different feature | Open new session/clear or reopen the terminal |
| Context over 100K tokens | 跑 /compact Compress, or start a new session directly |
| The model started giving irrelevant answers. | Usually, the context is too cluttered, so I'll start a new session. |
There's a golden rule in the community: "One session per PR." This makes reviews logically cleaner and the commit history easier to manage.
Three commands for context management
The three most commonly used commands in practical application are:
/clearClearing the context directly is equivalent to starting a new session without restarting the terminal./compactHere's a summary of the current context, retaining the conclusion but reducing tokens. This is suitable when a single feature has been discussed for too long./costView how many tokens have been used in the current session and how much it has cost. It's useful for debugging your prompt costs.
Practical experience: Before starting the next sub-task after completing a sub-task, first /compact Please summarize the changes and decisions made in the previous section into 200-500 words, in order to make space for the next section.
The impact of contextual order
Claude series models show a slight difference in retrieval accuracy when information is at the beginning versus the end of the context. Community testing indicates that placing the most important instructions at the end of the prompt yields the most stable results. Practical implementation:
> Background: This is a FastAPI project with Postgres as the database.
> Relevant files: @backend/app/api/users.py @backend/app/models/user.py
>
> Task: Add cursor-based pagination to the GET /users endpoint.
> Default page size is 20, maximum is 100.Putting the "task" at the end helps the model remember details better.
V. Core Feature 2: Agentic Workflow (Multi-step Automation)
This is the biggest difference between Claude Code and Cursor Composer.
Cursor Composer vs. Claude Code Agentic
| project | Cursor Composer | Claude Code |
|---|---|---|
| Edit multiple files simultaneously | Yes | Yes |
| Run shell yourself | Terminal tool | Native support |
| Run the test yourself | No | Okay |
| Read the error message yourself and make corrections. | Limited | Can loop |
| Open a PR for myself | No | can (through gh Command-line interface |
| User confirmation interface | inline diff | terminal y/n/a |
Real Case 1: Refactor the entire module
Task: Turn backend/app/agents/ Change all agents below from sync to async.
Modify all `.py` files under `@backend/app/agents/` to change the `run()` method to `async run()`, and update all call sites (in `@backend/app/api/`) to use `await` accordingly. After making the changes, please run `pytest` to confirm.Claude Code will:
- List
agents/Download all files - Read them one by one.
- Propose a refactoring plan (what methods to change, and which callers to update accordingly)
- I'll wait for your confirmation.
- Execute modification
- 跑
pytest - If it fails, read the error message and fix it yourself.
Real-life Case 2: Writing Unit Tests
Write pytest unit tests for the `Brief` class in `@backend/app/core/brief.py`, covering validation for each field, edge cases, and JSON serialization/deserialization. Run the tests once to confirm they pass.It writes tests, runs them, debugs failures itself, runs again, until it's green.
Real-world Case 3: Debug Stack Trace
Paste the stack trace directly, or let it run to reproduce:
Run npm test, see which tests failed, and find the root cause.It runs tests → reads output → finds corresponding source → forms a hypothesis → modifies code → and runs tests again.
YOLO mode risk
Claude Code has an advanced mode called "auto-accept" or colloquially known as "YOLO mode," which is equivalent to automatically saying "yes" to all permission prompts.
Application scenarios:
- Running in a sandbox / Docker container
- Use git worktree to open a separate branch
- Run a well-defined repetitive task (e.g., "change all console.log to logger.info")
Never YOLO directly in a production repo, especially the main branch.
The essence of an agentic loop
Understand how Claude Code runs agentic tasks, it's a simple loop behind it:
- Read task → Plan steps
- Execution steps (read file, modify file, run shell)
- Observations (Tested? Output correct?)
- If it's incorrect, return to step 1 to correct it.
- When it's right, report back.
This loop is almost identical to the working pattern of human engineers. The only difference is that a human's loop is 30 minutes, while Claude Code's loop is 30 seconds. However, the drawback is that humans have "intuition" which allows them to skip certain steps, while Claude Code does not, so it sometimes "over-executes," changing things that were already correct.
What you should do at this point is: add a stop condition to the prompt.
Change the `formatDate` function in `@utils/date.ts` to use dayjs.
After making the changes, run `npm test`. If all tests pass, stop. Do not modify any other files."Stop when everything is green, don't touch other files" is the stop condition.
6. Core Function 3: CLAUDE.md Settings (Required)
CLAUDE.md is not optional. Without it, the quality of Claude Code running tasks will drop significantly.
Why is it necessary?
Every time we start a session, Claude Code automatically reads from the repo root. CLAUDE.mdtreat the content as part of the system prompt. This means that as soon as it starts up, it knows:
- What is your project about?
- I am a large language model, trained by Google.
- Your coding style preferences
- Which files/directories are important
- Which commands can I run and which should I avoid?
Without CLAUDE.md, you'll have to re-explain "our project uses FastAPI, tests are in backend/tests, and tests are run with pytest" every new session.
Example CLAUDE.md
Here's the code:
# CLAUDE.md
## Project Overview
This is a SaaS platform with a backend built on FastAPI and Postgres, and a frontend built on Next.js 14 (App Router).
Its core functionality is to convert user-submitted “ideas” into content for multiple platforms (Instagram, SEO, Threads, Facebook).
## Tech Stack
- Backend: Python 3.11, FastAPI, SQLAlchemy, Alembic, pytest
- Frontend: Next.js 14, TypeScript, Tailwind, shadcn/ui
- DB: Postgres 15
- Infra: Docker Compose (local), Railway (production)
## Repo Structure
backend/
app/
agents/ # Various LLM agents
api/ # FastAPI routes
core/ # Core domain models
prompts/ # Prompt templates
tests/ # pytest tests
frontend/
src/app/ # Next.js app router pages
src/components/ # shared components
src/lib/ # utilities + API client
## Coding Conventions
- Python: black + ruff; type hints are required
- TypeScript: strict mode; `any` is prohibited
- Function length < 50 lines; split if longer
- Use the Conventional Commits format for commit messages
## Testing
- Run backend tests: `cd backend && pytest -q`
- Run frontend tests: `cd frontend && npm test`
- Any changes to code under `core/` must be accompanied by corresponding tests
## Commands
- Start the backend: `cd backend && uvicorn app.main:app --reload`
- Start the frontend: `cd frontend && npm run dev`
- DB migration: `cd backend && alembic upgrade head`
## Don'ts
- Do not push directly to `main`
- Do not include emojis in commits
- Do not ask for permission before installing a new npm packageThis CLAUDE.md is not long, but it covers the context most frequently needed by Claude Code when running tasks.
CLAUDE.md vs. cursorrules
| project | CLAUDE.md | .cursorrules |
|---|---|---|
| Filename | CLAUDE.md | .cursorrules or .cursor/rules/*.mdc |
| Format | Markdown | Plain text / mdc |
| Auto-load | Yes | Yes |
| Nested directory | You can put one in each subdirectory. | There are scope-based rules |
| Community Template | A lot of awesome-claude-code repositories on GitHub. | awesome-cursorrules |
The philosophies are similar, but Claude Code handles "long markdown structures" better and can accommodate more details.
Subdirectory CLAUDE.md
Claude Code supports nested CLAUDE.md. In addition to the one at the repo root, you can place more specialized CLAUDE.md files in subdirectories. For example:
backend/CLAUDE.mdWriting backend details (FastAPI common patterns, DB schema version control)frontend/CLAUDE.mdFrontend details (how to break down components, state management rules)infra/CLAUDE.mdHow to structure infra (Terraform modules, secret storage)
When Claude Code works in a subdirectory, it automatically loads "that directory + all parent CLAUDE.md files." This allows you to keep the root CLAUDE.md concise, with details distributed across different domains.
7 Principles for Writing CLAUDE.md
Practical Review:
- This project aims to develop a novel solution for [briefly state the core problem/goal].The model immediately understands the direction.
- Tech stack, list versions clearlyto avoid it hallucinating older APIs (FastAPI 0.111 vs 0.95 are different).
- Draw the directory structure as a tree diagram.10 times easier to read than a text description.
- Coding Conventions: Do / Don'tthan abstract descriptions.
- Common commandsso I don't have to grep package.json every time.
- Clearly state prohibitionsis more effective than "I hope you do this." Models are more sensitive to "don't."
- Review every 2-4 weeksDelete outdated items and add new ones.
7. Advanced: Model Selection and Subscription Plans
Claude Model Hierarchy
By June 2026, the mainstream will be the Claude 4 series:
| model | Strengths | Suitable scene |
|---|---|---|
| Opus 4 | The best at deduction, the best at debugging complex logic | Resolve race conditions, design system architecture, write complex algorithms |
| Sonnet 4 | Balanced, with good speed and quality. | Daily coding, refactoring, writing tests |
| Four haiku stanzas, Embracing the quiet grace, Nature's gentle touch. | Fastest and cheapest | Write commit message, simple format conversion, batch processing |
Claude Code can be used within /model Directive switch.
Which one to use for different scenarios?
- Debug a bug that's been eluding you for 3 hours → Use Opus 4. Although it's slow and expensive, it reasons a few steps further.
- Rename all files in a directory → Using Sonnet 4. The task is simple but large in volume, Sonnet is the sweet spot.
- Write commit message Quick, cheap, good enough. Choose two, you can't have all three. Haiku 4, yes.
- Large refactor + run tests Using Sonnet 4 primarily, switch to Opus 4 when encountering difficulties.
Subscription Plans vs. API
By mid-2026, the main choices:
| Plan | Price (USD/month) | Who is it suitable for? |
|---|---|---|
| Claude Pro | $20 | Individual developer, light usage |
| Claude Max | $100 | Moderate use, 2-4 hours per day |
| Claude Max (Advanced) | $200 | Heavy usage, agentic workflow heavy |
| API with its own key | Usage-based billing | Company-paid, team-shared |
Subscription plans have rate limits (message limit per 5 hours), while the API is calculated by token.
Practical Experience: For individual heavy users, the Max $100 plan is usually more cost-effective than the API; if you run 10 or more agentic tasks per day, the Max $200 plan is more stable. For teams, we recommend using the API combined with an internal proxy to facilitate cost management.
Practical Strategies for Cost Control
If you go the API route, it’s common to burn $20–50 per day if you don’t manage it properly. Here are three tips for cutting costs:
- The default model uses Sonnet 4, switching to Opus 4 only when encountering difficulties.use
Please provide the text you would like me to translate into English (US).跟opusSwitch. - Multi-purpose
/compactCompress the old context to avoid sending the entire conversation history each turn. - Process the task using Haiku.For example, mechanical tasks like "list all TODO comments" or "reorder imports" are 30 times cheaper with Haiku than with Opus.
Eight, 7 Practical Skills for Engineers
This section is the most important part of this article. Each technique is explained in three steps: "Use Case → Operation → Result".
Tip 1: Have Claude Code read CLAUDE.md first for every repo.
Use caseJust joined a project and want to quickly understand the architecture.
Operation:
Read CLAUDE.md and README.md, then draw a system architecture diagram for me using mermaid.
Draw out the main modules, data flows, and external dependencies.ResultClaude Code generates architecture diagrams based on the descriptions in CLAUDE.md, saving you 30 minutes of reading source code.
Tip 2: Reference official documentation with @docs
Use case：Use a library you're not familiar with (e.g., Drizzle ORM, tRPC v11, Tanstack Query v5).
OperationAdd a section to CLAUDE.md:
## External Docs
- Drizzle ORM: https://orm.drizzle.team/docs
- tRPC v11: https://trpc.io/docs/v11or directly include a URL in the prompt:
Refer to https://orm.drizzle.team/docs/sql-schema-declaration,
Please help me convert @schema/users.ts from raw SQL to a Drizzle schema.ResultClaude Code fetches URL content using the latest syntax from the official documentation and does not hallucinate old APIs.
Technique 3: Use Plan Mode for Complex Requirements, Not Chat
Use caseTo create a feature spanning 5 files, but you're unsure how to break it down.
OperationFirst, have it plan, don't write directly:
Here is an implementation plan for the "User Export PDF Report" feature:
**Backend:**
* **Module:** Report Generation
* **Files to Add/Modify:**
* `routes/reports.js`: New file to handle report-related API routes.
* **Purpose:** Define a new POST endpoint (e.g., `/api/reports/export`) to handle the PDF report generation request from the frontend. This route will receive any necessary parameters for report generation.
* `controllers/reportController.js`: New file to contain the logic for report generation.
* **Purpose:** Implement the logic for fetching data required for the report, processing it, and then generating the PDF. This will involve interacting with the PDF generation library.
* `services/pdfGenerator.js`: New file for PDF generation utility.
* **Purpose:** Encapsulate the PDF generation logic using an external library. This file will contain functions to create PDF documents from data.
* `models/DataModel.js`: (If applicable) Might need to modify existing data models or create new ones if specific data structures are required for the report.
* **Purpose:** Define or adapt data structures that will be used to fetch and format data for the PDF report.
* **Description of Changes/Additions:**
* **routes/reports.js:**
* Define a route `POST /api/reports/export`.
* This route will call the `generateReport` function from `reportController.js`.
* It will handle request parameters and send back the generated PDF file or a link to it.
* **controllers/reportController.js:**
* Implement `generateReport(req, res)` function.
* Fetch necessary data (e.g., from databases or other API calls).
* Format the data as required for the PDF.
* Call the `pdfGenerator.js` service to create the PDF.
* Send the PDF file as a response.
* **services/pdfGenerator.js:**
* Implement a function like `createPdfReport(data)` that takes data as input.
* Utilize a chosen PDF generation library (e.g., `pdfmake`, `puppeteer`, `html-pdf`) to construct the PDF.
* Return the PDF content (e.g., as a Buffer or stream).
* **models/DataModel.js:**
* Update or create database models and associated queries to retrieve the report data efficiently.
* **Expected Tests:**
* **Unit Tests (for `reportController.js` and `pdfGenerator.js`):**
* Test that `generateReport` correctly fetches data when provided with valid parameters.
* Test that `generateReport` calls the PDF generation service with the correct data.
* Test that `pdfGenerator.js` creates a PDF document with expected content and structure when given sample data.
* Test error handling scenarios (e.g., data fetching failures, PDF generation errors).
* **Integration Tests (for the API route):**
* Send a POST request to `/api/reports/export` with valid payload.
* Assert that the response status code is 200 (or appropriate success code).
* Assert that the `Content-Type` header is `application/pdf`.
* Assert that the response body is a valid PDF file (e.g., by checking for specific PDF markers or using a library to parse it).
* Test with various valid and invalid input parameters to ensure correct behavior and error responses.
**Frontend:**
* **Module:** User Interface / Reporting
* **Files to Add/Modify:**
* `components/ReportExportButton.vue` (or `.jsx`, `.tsx` depending on your framework): New component.
* **Purpose:** A UI component containing the button that triggers the PDF export. It will handle user interaction.
* `services/api.js` (or similar): New or modified file for API calls.
* **Purpose:** Define a function to call the backend API for PDF generation.
* `pages/UserDashboard.vue` (or relevant page): Existing page where the button will be placed.
* **Purpose:** Integrate the `ReportExportButton` component and manage the state related to the export process.
* **Description of Changes/Additions:**
* **components/ReportExportButton.vue:**
* Create a button element.
* Attach a click event handler to this button.
* When clicked, this handler will call the API service function to initiate the PDF generation.
* Optionally, manage loading states (e.g., disable button while generating) and display user feedback (e.g., "Generating report...").
* **services/api.js:**
* Add a function `exportPdfReport(params)` that makes a POST request to `/api/reports/export`.
* It should handle the response from the backend – e.g., receive the PDF stream or blob and trigger a download.
* Implement error handling for API calls.
* **pages/UserDashboard.vue:**
* Import and include the `ReportExportButton` component.
* Pass any necessary parameters to the `exportPdfReport` function via the button component or directly in the page's event handler if params are managed there.
* **Expected Tests:**
* **Unit Tests (for components and services):**
* Test that clicking the `ReportExportButton` triggers the correct API call.
* Test that the button displays a loading state when the API call is in progress.
* Test that the `exportPdfReport` service function correctly makes the HTTP request with the expected URL and method.
* Test that `exportPdfReport` correctly handles successful API responses by triggering a file download.
* Test that `exportPdfReport` correctly handles API errors by displaying an error message to the user.
* **End-to-End (E2E) Tests:**
* Simulate a user navigating to the page.
* Click the "Export PDF Report" button.
* Assert that a PDF file download is initiated.
* (Optional but recommended) If possible, programmatically verify the downloaded file is a valid PDF and contains expected content.Please have them execute it after confirming the plan.
Execute according to the plan above. Show me the diff for each file after it's modified.ResultAvoid Claude Code writing 200 lines of code in a hot flush, only to discover the direction was wrong and start all over.
Tip 4: Write Commit Messages With One Command
Use caseFinished editing a bunch of files, too lazy to write a commit message.
Operation:
Run `git diff --staged` and generate a commit message in Conventional Commits format based on the changes. The subject line should be under 50 characters, and the body should list the main changes.Or even further:
Commit the current staged changes using Conventional Commits format. You decide the type (feat/fix/refactor/chore), then execute `git commit` directly.ResultCommit history becomes tidy, no need to think about the format every time.
Technique 5: Run Multiple Tasks with git worktree
Use caseYou want to run two agentic tasks simultaneously but don't want them to conflict.
Operation:
# Create two worktrees next to the main worktree
git worktree add ../myrepo-feature-a feature-a
git worktree add ../myrepo-feature-b feature-b
# Open two terminal windows and run `claude` in each worktree
cd ../myrepo-feature-a && claude
cd ../myrepo-feature-b && claudeResultTwo Claude Code sessions work independently on different branches without interfering with each other, and then merge their work.
Tip 6: MCP Integration (Slack, Linear, Notion, etc.)
Use caseYou want Claude Code to read issues from Linear, suggest code changes, and then report progress on Slack.
OperationMCP (Model Context Protocol) is an open protocol from Anthropic, with built-in support from Claude Code. ~/.config/claude/claude_desktop_config.json Add MCP server:
{
"mcpServers": {
"linear": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-linear"],
"env": { "LINEAR_API_KEY": "lin_api_xxx" }
},
"slack": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-slack"],
"env": { "SLACK_BOT_TOKEN": "xoxb-xxx" }
}
}
}Then, within Claude Code:
> Retrieve the details of issue ENG-123 from Linear, modify the code according to the requirements,
> and report your progress in the #eng-updates Slack channel once you're done.ResultCross-tool automation, eliminating manual window switching.
Tip 7: Write your own sub-agent to handle repetitive tasks
Use caseEvery day, I need to organize yesterday's PRs into a changelog.
Operation：Claude Code supports the "sub-agent" concept, allowing tasks to be delegated to a specialized agent. Create a prompt template:
# .claude/agents/changelog.md
You are a changelog writer.
Given a list of merged PRs from the past 24 hours:
1. Group them by type (feat, fix, refactor, chore)
2. Write a user-facing description for each
3. Output Markdown formatted for CHANGELOG.mdThen run:
Using the changelog agent, run `gh pr list --state merged --search "merged:>=YESTERDAY"`, and organize it into a changelog and append it to CHANGELOG.md.ResultTemplate repetitive tasks, one command per day.
Extra Chapter: Tip 8 Bonus — Rehearsing with Dry-Run Mode
Common practice in real-world scenarios: dry-run before large refactoring.
I'm going to change all loggers under @backend/app/agents/ from print to structlog.
Please first list which files will be affected and how many lines will be changed in each file. Don't actually make the changes yet. I'll decide after reviewing the plan.This tactic is especially effective for destructive changes. Claude Code will give you a "I plan to do this" checklist, and you only proceed after agreeing. The rehearsal cost is much lower than discovering the direction is wrong after it's completed.
Extra: Tip 9 — Using --resume Continue interrupted session
Sometimes the session is interrupted halfway, the terminal is accidentally closed, or the network connection is lost. Claude Code supports claude --resumeIt will list recent sessions, and you can select one to continue, so the context won't be lost.
This instruction is a lifesaver for scenarios like "an agentic task that ran for 30 minutes."
IX. Claude Code vs. Cursor vs. Copilot: A Three-Way Comparison
Comparison table
| dimension | Claude Code | Cursor | GitHub Copilot |
|---|---|---|---|
| Form | Terminal CLI | IDE (VS Code fork) | IDE extension |
| Default model | Claude Opus / Sonnet / Haiku | GPT-5, Claude, Gemini available | GPT-5, Claude optional |
| Context window | 200K (partially 1M plan) | About 100-200K | Not public, actual test is smaller |
| Agentic capabilities | Strong (native shell + loop) | Multiple files (Composer) | Weak (mainly autocomplete + chat) |
| IDE integration | VS Code / JetBrains Extension | It's an IDE itself | VS Code / JetBrains Native |
| Privacy | API mode does not train, Pro/Max defaults to not training | Privacy Mode | Commercial version does not train |
| Price | Pro $20 / Max $100 / Max $200 | Pro $20 / Ultra $40 | Individual $10 / Business $19 |
| Suitable scene | Large refactor, debug, agentic task | Multi-file edit in IDE | Inline code completion |
(Prices are based on publicly available information as of June 2026, and are subject to official confirmation.)
Which decision tree to choose
- You mainly write code in the form of "completions" and don't want to switch IDEs. GitHub Copilot
- You want multi-file editing within an IDE and are used to the VS Code GUI. Cursor
- You do a lot of agentic tasks, are accustomed to the terminal, and need to run across multiple repos. Claude Code
- You have enough budget and want to use it all. → Using Cursor + Claude Code Together (Common Community Combination)
Comparing Claude and GPT-5 models themselves, you can refer to this article.
Practical recipe for using all three.
In practice, many engineers in 2026 will adopt a "Three Musketeers" configuration:
- CopilotThe last mile of IDE completion, press Tab to write a line
- CursorMedium-sized multi-file edit, for example, "Add dark mode support to these 5 components."
- Claude CodeLarge agentic task, such as "Replace the entire auth system from NextAuth to Clerk, including tests."
The three tools each have their own responsibilities and don't conflict. The key is to distinguish which task requires which tool, rather than looking for a "one-size-fits-all winner."
X. Common Pitfalls and Best Practices
Last section, spoiler warning.
Pitfall 1: More context isn't always better.
Feeding 100 files into the context dilutes the model's attention, causing it to miss details. In practice, "@ the 5-10 most relevant files" usually works better than "@ the entire directory."
Pitfall 2: CLAUDE.md is not better the longer it is
In the community, someone wrote CLAUDE.md that was 3000 words long, and it caused the model's attention to wander. It's recommended to keep it within 500-1500 words and include only the "Top 5 Most Important Things." Details can be written in CLAUDE.md in a subdirectory or in separate docs.
Pitfall 3: YOLO mode set too high
把 rm -rf、git push --force、curl | sh "Always allow" is equivalent to giving root shell access to the AI. Recommendation:
- Approve dangerous commands manually
- Repo operations (add, commit, checkout) can always be allowed
- Run tests, build can always be allowed.
- Any destructive operations (drop table, rm, force push) must be done manually.
Pitfall 4: When should you manually review?
The code written by Claude Code in the following situationsMust human review:
- Logic involving auth, payment, and PII
- DB migration (especially destructive operations)
- Production environment config changes
- Handling secrets/credentials for third-party API integrations
- Regex / SQL injection / XSS related protection
Other situations (internal tooling, test code, docs, prototypes) can be let go and run.
Pitfall 5: Blindly trusting the results of an agentic loop
When Claude Code finishes an agentic task, it tells you "Tests passed, committed." However, community testing has shown that in a few cases, it will:
- Skip the failed tests and say "All passed."
- type error
anyCover it up - Add lint warnings
// eslint-disable-next-lineCover it up
It's not that the model is "bad," it's that its definition of "task completion" is different from yours. Countermeasure: Explicitly write in CLAUDE.md "prohibit skipping tests, prohibit using 'any', and prohibit arbitrarily adding eslint-disable," and use this in PR reviews. git diff Scan the keywords yourself.
Pit 6: MCP server security
MCP integration is powerful, but each MCP server equates to giving Claude Code external permissions. Slack MCP can send messages, Linear MCP can modify issues, and GitHub MCP can open PRs. Recommendation:
- Only install MCP servers that are highly trusted by the official or community.
- Run with a read-only token (especially for Linear, Notion)
- Important channels should not have Claude Code send messages directly. Please write a draft for me to review first.
Conclusion
Claude Code isn't "another tool that's stronger than Cursor," it's a tool of another philosophy: terminal-first, agentic-first, CLAUDE.md-driven.
If your work—80%—involves using the terminal, Git, cross-file refactoring, or debugging bugs that take a long time to resolve, Claude Code will be more efficient than the chat window in your IDE.If your work 80% involves single-file autocompletion within an IDE, Cursor or Copilot will still suffice.
In practice, by 2026, the setup for most mid-level and above engineers will be "Cursor / VS Code + Copilot for daily completion, Claude Code for agentic tasks and refactoring." They will be used in tandem, complementing each other.
The key point is that AI tools are amplifiers, not replacements. They can amplify the productivity of engineers who "plan, review, and judge," but they will also amplify the mistakes of those who "don't plan, don't review, and don't judge." The faster Claude Code runs, the more you need to learn to "stop and think if this change is correct."
Here's the final message for you: Treat Claude Code as a colleague, not a god. It makes mistakes, hallucinates, and takes detours, but it's faster than you, doesn't get tired, and can run multiple tasks simultaneously. Learning to collaborate with it is 10 times more important than learning all the commands.
FAQ
Q1: Is Claude Code free?
No. Claude Code CLI itself is free to download, but you need a paid plan to run it: Claude Pro ($20/month), Max ($100 or $200/month), or pay-as-you-go using your own Anthropic API key.There are a limited number of trial credits available, but they’re not enough for daily use. For individual developers, Pro is the best option to start with; heavy users typically upgrade to Max.
Q2: Which is better, Claude Code or Cursor?
It depends on how you use it. Cursor is an IDE, suitable for multi-file editing within an editor and for people accustomed to GUI operations. Claude Code is a terminal CLI, suitable for engineers who do agentic tasks, large-scale refactoring, and cross-repository work. Many people use both: Cursor for daily coding and Claude Code for running agentic tasks. There's no absolute winner; it depends on your workflow.
Does Claude Code require an API key?
Not necessarily. If you have a Claude Pro or Max subscription, you can authorize it by logging into your claude.ai account; no API key is required. If you're going the API route (company-paid, team shared, or want finer cost control), you'll need to get an API key from console.anthropic.com. You can switch between these two modes at any time, and Claude Code supports both.
Q4: How should CLAUDE.md be written?
500-1500 words, covering: Project Overview (1 paragraph), Tech Stack (list), Repo Structure (tree), Coding Conventions (5-10 key points), Common Commands (start, test, build), Prohibitions (do not push to main, do not install new packages without asking). Do not be too detailed; place important principles at the top and details in subdirectories. A large number of templates can be found on GitHub at awesome-claude-code.
Q5: Is Claude Code suitable for beginners?
Partial fit. If you're already familiar with the terminal, Git, and basic shell operations, Claude Code can be a great learning tool, explaining what's happening at each step. However, if you've never written code before and can't understand stack traces, I recommend starting with Cursor or GitHub Copilot in conjunction with an IDE, as they have a lower barrier to entry. Once you're comfortable with the development workflow, switching to Claude Code will feel more natural.
References
- Anthropic Official Claude Code Documentation: https://docs.claude.com/en/docs/claude-code
- Claude Code Product Page: https://www.anthropic.com/claude-code
- Model Context Protocol Official: https://modelcontextprotocol.io
- Anthropic Claude Model Introduction: https://www.anthropic.com/claude
- GitHub's awesome-claude-code template collection: https://github.com/anthropics
- Hacker News Claude Code Related Discussions: https://news.ycombinator.com
- Cursor Official: https://cursor.com
- GitHub Copilot Official: https://github.com/features/copilot
FAQPage Schema (JSON-LD Draft)
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is Claude Code free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No.The Claude Code CLI itself is free to download, but you need a paid plan to run it: Claude Pro ($20/month), Max ($100 or $200/month), or pay-as-you-go using your own Anthropic API key.There are a few trial credits available, but they aren’t enough for daily use. For individual developers, Pro is the best choice to start with; heavy users typically upgrade to Max."
}
},
{
"@type": "Question",
"name": "Which is better: Claude Code or Cursor?",
"acceptedAnswer": {
"@type": "Answer",
"text": "It depends on how you use it.Cursor is an IDE, suitable for multi-file editing within an editor and for those accustomed to GUI operations; Claude Code is a terminal CLI, suitable for engineers working on agentic tasks, large-scale refactoring, and cross-repo projects. Many people use both: Cursor for writing everyday code and Claude Code for running agentic tasks.There’s no clear winner—it depends on your workflow."
}
},
{
"@type": "Question",
"name": "Does Claude Code require an API key?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Not necessarily. If you have a Claude Pro or Max subscription, simply log in to your claude.ai account to authorize access—no API key is required.If you’re using the API route (for corporate payment, team sharing, or more granular cost control), you’ll need to obtain an API key from console.anthropic.com. You can switch between these two modes at any time—Claude Code supports both."
}
},
{
"@type": "Question",
"name": "How should I write a CLAUDE.md file?",
"acceptedAnswer": {
"@type": "Answer",
"text": "500–1,500 words, covering: project overview, tech stack, repo structure, coding conventions, common commands, and prohibited actions. Don’t go into too much detail—list key principles at the top and include specifics in subdirectories.There are plenty of templates to reference on GitHub under `awesome-claude-code`."
}
},
{
"@type": "Question",
"name": "Is Claude Code suitable for beginners?",
"acceptedAnswer": {
"@type": "Answer",
"text": "It’s partially suitable. If you’re already familiar with the terminal, Git, and basic shell operations, Claude Code can be a great learning tool—it explains what each step does.However, if you’ve never written code before and don’t understand stack traces, I recommend starting with Cursor or GitHub Copilot alongside an IDE—the learning curve is lower. Once you’re familiar with the development process, switching to Claude Code will be much smoother."
}
}
]
}
