Pular para o conteúdo
← Back to Skalablog

Published article

5 Claude Code Tutorial Tips: Setup, IDE, Hooks

Software EngineeringClaude CodeClaudeAnthropic

Claude Code, Anthropic terminal-based coding agent, works best when paired with your IDE and configured with Claude.md, MCP servers, slash commands, and hooks. This Claude Code tutorial gives you the setup sequence, the pricing pitfalls, and the habits that keep long sessions useful.

Claude Code Tutorial: What the Tool Actually Does

Claude Code is Anthropic agentic coding tool that runs as a command-line interface and can plan, edit files, and execute commands in your project. This Claude Code tutorial covers the setup, IDE integration, memory, MCP servers, and hooks you need to use it daily without runaway costs.

The video this article is based on was published by the Brazilian channel Full Cycle in July 2025, presented by Wesley Willians, who reports using Claude Code alongside Cursor, Windsurf Code, and GitHub Copilot rather than instead of them. His core workflow idea: pick the right tool for the moment, and treat Claude Code as the planning-and-execution agent inside that mix.

The main capabilities demonstrated were:

  • Plan mode with an editable action plan before any code is written
  • A todo list the agent works through task by task
  • File diffs shown in the connected IDE for review before approval
  • Persistent project memory via Claude.md
  • MCP server connections for external tools like Docker
  • Custom slash commands and hooks for repeatable, guaranteed behavior

How to Install Claude Code and Avoid the Pricing Trap

Installation is a single npm command, but the first login decision is where people lose money. Install Claude Code with npm install, run claude inside your project directory, and it opens in the terminal.

The trap: when prompted to log in, choosing the API key option bills per token. The presenter cites a friend who spent over $500 this way. The safe choice for most developers is Claude account with subscription, which bills a flat monthly rate.

Anthropic published plans at the time of recording (July 2025) broke down like this; verify current limits on Anthropic pricing page before you decide, because usage limits and tiers change:

OptionCost basisPractical behavior
Free Claude accountFree, limitedOccasional use only
Pro plan~$20/month flatClaude Code access, hits rate limits under heavy use
Max plan$100 or $200/month flatReported roughly 5x and 20x Pro usage respectively
Anthropic keyPer tokenCan escalate fast for agentic workloads

The Max subscriber in the video reported near-unlimited day-to-day use and access to the more powerful Opus model instead of the default Sonnet. Opus consumes plan capacity faster, so heavy Opus users were steered toward the $200 tier. These figures reflect July 2025 and should be checked against Anthropic current pricing before you subscribe.

Using Claude Code Inside Cursor, Windsurf VS Code

Claude Code works inside your editor even though it is a CLI tool. The simplest path is opening the integrated terminal in any VS Code-based editor, such as Cursor, Windsurf, or Visual Studio Code, and typing claude there. Files change, you review them, and the experience resembles working with the editor's own agent panel.

For deeper integration, install the Claude Code extension from the extensions marketplace, then run /ide inside a Claude Code session. It detects open IDE windows, you select your project, and the status shows IDE connected. From that point the agent sees the editor's context and can open diffs directly in your editor for review.

The presenter's habit is to pin the Claude Code panel alongside the Cursor panel, switching between them depending on the task. The result, in his words, is that the terminal agent stops feeling like a separate tool and becomes another panel in the workflow you already have.

Project Memory: Claude.md, /init and # Notes

Claude Code stores project rules and context in a file called Claude.md, similar in role to Cursor rules. You can write it by hand, or run /init and let the agent analyze the codebase and generate it.

In the video, the presenter runs /init on a TypeScript MCP project, adding an instruction to ignore a vendored SDK folder while noting it exists for reference. The generated Claude.md documented how to run tests, the architecture (session management, transport, tools, event store), the port, health-check endpoints, and development notes. The agent then reuses that guide in every future session in that directory.

There are two memory scopes worth knowing:

  • Project memory: the Claude.md in the repository, shared with the team
  • User memory: a Claude.md in your home folder, applied to every project on that machine

To append rules during a session, start a message with #, for example "never use emojis in the project, not even in logs or outputs", and save it to project memory. The file updates and the rule persists for future sessions.

Connecting MCP Servers to Claude Code

Claude Code supports the Model Context Protocol, an open standard for connecting AI applications to external tools and data. Servers are managed through the claude mcp CLI subcommand, not through the interactive session: claude mcp list shows connected servers, claude mcp remove deletes one, and claude mcp add <name> <command> registers a new one. Claude Desktop users can also import their existing servers.

The demo registers a Docker MCP gateway (docker mcp gateway run), so the agent can query running containers through a tool call instead of shell guessing. When asked which containers are running, the agent proposes the MCP tool, asks permission once, and reports the result.

Permissions granted along the way are stored in .claude/settings.local., a file you do not commit. A committed .claude/settings. shares configuration with the whole team, and user-level global settings apply machine-wide. That three-scope split (local, project, user) is the configuration model to understand before you start granting broad permissions.

Plan Mode, Permissions and Context Compaction Habits

Three operational habits separate smooth Claude Code sessions from expensive, frustrating ones.

Plan mode before execution

Press Shift+Tab to cycle modes until plan mode on. The agent then researches and produces a plan you can refine by conversation before approving execution. In the demo, a vague prompt to add fake users produced a plan; the presenter rejected it and asked for a remove-user-by-email feature instead, and the agent produced a revised plan with file paths, parameters, and return shapes. This plan-discuss-refine loop is the highest-leverage flow shown in the video.

Permission granularity

Every tool call, including bash commands like npm run build, requires approval unless you allow it. You can approve once, always for that session, or add patterns such as npm run:* to settings. Tighter control means more prompts; looser control means trusting the agent with more of your shell.

Context window management

Claude Code's context window is around 200,000 tokens, and long sessions fill it. The agent compacts automatically by summarizing prior work, but the presenter is clear that a compacted session never matches the quality of a fresh one. His rule: finish a task, OpenAI new session, and keep design docs and action plans in files so each session can rebuild context cheaply. /compact triggers the same summarization manually.

Custom Slash Commands and Hooks That Guarantee Behavior

Two features make repeated workflows one command long.

Custom commands

Create a .claude/commands/ folder in your project and drop in Markdown files. Each file becomes a slash command: a file named exec-prompt.md becomes /exec-prompt, its first line becomes the description shown in autocomplete, and $ARGUMENTS receives the task you pass in. The presenter converted a long planning prompt (high-level plan, low-level plan, fixed workflow stages) into a single reusable command, and suggests the same pattern for commit formats, security checks, or file validations.

Hooks

Claude.md is a guideline the model may ignore. Hooks are different: they run a real command on specific lifecycle events, so the behavior is guaranteed rather than requested. Configured per the hooks documentation, they attach to matchers such as PreToolUse, PostToolUse, Stop (the main agent finishing), and SubagentStop, and can be saved at user, project, or local scope.

The demo adds a hook that echoes a message after a Task tool completes and saves it to local settings. A practical pattern: after the agent stops, run the test suite automatically, and return exit code 2 on failure so the agent sees the error and continues fixing. Exit code 0 means success. Hooks can also be shell scripts that consume the tool call's input and output JSON, which makes them suitable for linting, formatting, or policy enforcement after every edit.

FAQ

  • Is Claude Code only a terminal tool? It is a CLI at its core, but a VS Code-compatible extension plus the /ide command connect it to Cursor, Windsurf VS Code, showing diffs and status inside the editor. You keep your editor and add the agent as a panel.
  • Should I log in with the Anthropic key or a subscription? For individual developers, use the subscription option. API keys bill per token, and agentic sessions consume tokens heavily; the video reports a case exceeding $500. Subscriptions on Pro or Max plans bill a flat monthly rate.
  • What is the difference between Claude.md and hooks? Claude.md is context the model is asked to follow; hooks execute shell commands on lifecycle events regardless of what the model decides. Use Claude.md for guidance and hooks for behavior that must always happen, such as running tests after a task.
  • Does Claude Code work with Docker or other external tools? Yes, through MCP servers registered with claude mcp add. The video demonstrates a Docker MCP gateway that lets the agent query running containers, and servers can be scoped to your user, your project (committed), or your local settings (not committed).

Turn Your Own Walkthroughs Into Articles

A 52-minute screen recording like the one behind this Claude Code tutorial contains hours of practical decisions, and most of it stays locked inside the video. If you record similar deep dives, whether it is an MCP setup, a hook configuration, or a full Crazystack Typescript style course segment, that same material can become a searchable, structured written guide.

Skala Blog turns a YouTube video into a publishable article: paste the URL, the video is transcribed, and a structured draft is generated for your review. If your knowledge lives in recordings, this is the shortest path to putting it in writing.

Source video