Cluade Code

Context management

Claude Code effectiveness will decrease if the context is polluted with non relevant information:

1. Provide relevant context for each request
2. Avoid misleading context

CLAUDE.md files

Run /init to create a CLAUDE.md file. It provides a general view of the project and it's included in each request to Claude Code.

Main locations for CLAUDE.md files:

1. Project's root path ./CLAUDE.md
2. User's root path ~/.claude/CLAUDE.md

All CLAUDE.md files are meant to be shared within the team. The CLAUDE.local.md is for personal instructions and customizations, usually not shared with other team members (add them to .gitignore).

Command line tricks

1. Use # to persist instructions or add relevant context to CLAUDE.md files
2. Use @ to point Claude Code to the right files. To provide a meaningful context in request use @{path/to/file}. Use same syntax to point files in CLAUDE.md.

Attach images

Use images to provide maningul context to Claude. For example: when perfoming UI changes, provide images of the UI you want to change. Copy a screenshot and paste it in the command line (ctrl+v in Mac, ctrl+shift+v in Linux).

Plan mode

When requesting a bigger change is recommended to activate the plan mode (shift+tab twice if no allowed edits on the session granted). To allow Claude create a plan before applying edits. It will provide a summary with the changes and you'll be able to procced or not.

Use plan mode when the task requires a wider view of the different parts of your codebase.

Thinking mode

In the prompt, use the keywords think, think a lot, or ultrathink to reason more in a paricular task.

Use think mode for a deep understanding of tricky code or logic.

Token comsuption

We can use plan mode and think mode together. When the task is complex and requires more computation from Claude to achive the task. However, use it thoroughtly because it causes a more token comsuption.

Escape

While Claude is planing, press Esc to interrup it, allowing you to redirect or correct it. Press Esc twice to rewind the conversation to an earlier point of the conversation.

Compact & clear

When Claude performs a tasks, sometimes does a back and forth dealing with errors that may happen. To allow claude learn and avoid to do same errors for similar tasks we can use the command /compact. This command allows to summarize the conversation history to keep the size the context small and avoid the errors done in the previous tasks. It helps Claude to stay focus and remember what it has learned in the curren session

Use the command /clear when conversation history is polluted and you want to dump the entire conversation history.

Use these techniques

These conversation control techniques are particularly valuable during:

• Long-running conversations where context can become cluttered
• Task transitions where previous context might be distracting
• Situations where Claude repeatedly makes the same mistakes
• Complex projects where you need to maintain focus on specific components

By using escape, double-tap escape, /compact, and /clear strategically, you can keep Claude focused and productive throughout your development workflow. These are essential tools for maintaining effective AI-assisted development sessions.

Commands

Claude Code comes with built-in commands that you can access by typing a forward slash, but you can also create your own custom commands to automate repetitive tasks you run frequently.

Creating Custom Commands

To create a custom command, you need to set up a specific folder structure in your project:

1. Find the .claude folder in your project directory
2. Create a new directory called commands inside it
3. Create a new markdown file with your desired command name (like audit.md)
4. The filename becomes your command name - so audit.md creates the /audit command.

Custom commands can accept arguments using the $ARGUMENTS placeholder. This makes them much more flexible and reusable. For example:

Write comprehensive tests for: $ARGUMENTS

Testing conventions:
* Use Vitests with React Testing Library
* Place test files in a __tests__ directory in the same folder as the source file
* Name test files as [filename].test.ts(x)

Coverage:
* Test happy paths
* Test edge cases
* Test error states

Custom commands are particularly useful for project-specific workflows like running test suites, deploying code, or generating boilerplate following your team's conventions.

MCP Servers

You can extend Claude Code's capabilities by adding MCP (Model Context Protocol) servers. These servers run either remotely or locally on your machine and provide Claude with new tools and abilities it wouldn't normally have.

MCP example: Playwright

One of the most popular MCP servers is Playwright, which gives Claude the ability to control a web browser. This opens up powerful possibilities for web development workflows.

To add the Playwright server to Claude Code, run this command in your terminal (not inside Claude Code):

claude mcp add playwright npx @playwright/mcp@latest

Here's a real-world example of how the Playwright MCP server can improve your development workflow. Instead of manually testing and tweaking prompts, you can have Claude:

1. Open a browser and navigate to your application
2. Generate a test component
3. Analyze the visual styling and code quality
4. Update the generation prompt based on what it observes
5. Test the improved prompt with a new component

For instance, you might ask Claude to:

"Navigate to localhost:3000, generate a basic component, review the styling, and update the generation prompt at @src/lib/prompts/generation.tsx to produce better components going forward."

Claude will use the browser tools to interact with your app, examine the generated output, and then modify your prompt file to encourage more original and creative designs.

The key advantage is that Claude can see the actual visual output, not just the code, which allows it to make much more informed decisions about styling improvements.

Exploring Other MCP Servers

Playwright is just one example of what's possible with MCP servers. The ecosystem includes servers for:

• Database interactions
• API testing and monitoring
• File system operations
• Cloud service integrations
• Development tool automation

Consider exploring MCP servers that align with your specific development needs. They can transform Claude from a code assistant into a comprehensive development partner that can interact with your entire toolchain.

Github integration

To get started, run /install-github-app in Claude. This command walks you through the setup process:

• Install the Claude Code app on GitHub
• Add your API key
• Automatically generate a pull request with the workflow files

The generated pull request adds two GitHub Actions to your repository. Once merged, you'll have the workflow files in your .github/workflows directory.

The integration provides two main workflows:

1. Mention Action: you can mention Claude in any issue or pull request using @claude. When mentioned, Claude will:

• Analyze the request and create a task plan
• Execute the task with full access to your codebase
• Respond with results directly in the issue or PR

2. Pull Request Action: Whenever you create a pull request, Claude automatically:

• Reviews the proposed changes
• Analyzes the impact of modifications
• Posts a detailed report on the pull request

Customize the workflows

After merging the initial pull request, you can customize the workflow files to fit your project's needs. Here's how to enhance the mention workflow:

Adding Project Setup

Before Claude runs, you can add steps to prepare your environment:

- name: Project Setup
  run: |
    npm run setup
    npm run dev:daemon

Custom Instructions

Provide Claude with context about your project setup:

custom_instructions: |
  The project is already set up with all dependencies installed.
  The server is already running at localhost:3000. Logs from it
  are being written to logs.txt. If needed, you can query the
  db with the 'sqlite3' cli. If needed, use the mcp__playwright
  set of tools to launch a browser and interact with the app.

MCP Server Configuration

You can configure MCP servers to give Claude additional capabilities:

mcp_config: |
  {
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest",
          "--allowed-origins",
          "localhost:3000;cdn.tailwindcss.com;esm.sh"
        ]
      }
    }
  }

Tool Permissions

When running Claude in GitHub Actions, you must explicitly list all allowed tools. This is especially important when using MCP servers.

allowed_tools: "Bash(npm:*),Bash(sqlite3:*),mcp__playwright__browser_snapshot,mcp__playwright__browser_click,..."

Unlike local development, there's no shortcut for permissions in GitHub Actions. Each tool from each MCP server must be individually listed.

Best Practices

When setting up Claude's GitHub integration:

• Start with the default workflows and customize gradually
• Use custom instructions to provide project-specific context
• Be explicit about tool permissions when using MCP servers
• Test your workflows with simple tasks before complex ones
• Consider your project's specific needs when configuring additional steps

The GitHub integration transforms Claude from a development assistant into an automated team member that can handle tasks, review code, and provide insights directly within your GitHub workflow.

Hooks

Sub Agents

Skills