Learning Claude Code - 001

Learning Claude Code 001

• https://anthropic.skilljar.com/claude-code-in-action/
• https://code.claude.com/docs/en/quickstart

brew install --cask claude-code

/init

# The database schema is defined in the @prisma/schema.prisma file. Reference it any time you need to better understand the structure of data stored in the database

Using Screenshots for Precise Communication

One of the most effective ways to communicate with Claude is through screenshots. When you want to modify a specific part of your interface, taking a screenshot helps Claude understand exactly what you’re referring to.

To paste a screenshot into Claude, use Ctrl+V (not Cmd+V on macOS). This keyboard shortcut is specifically designed for pasting screenshots into the chat interface. Once you’ve pasted the image, you can ask Claude to make specific changes to that area of your application.

Planning Mode

For more complex tasks that require extensive research across your codebase, you can enable Planning Mode. This feature makes Claude do thorough exploration of your project before implementing changes.

Enable Planning Mode by pressing Shift + Tab twice (or once if you’re already auto-accepting edits). In this mode, Claude will:

• Read more files in your project
• Create a detailed implementation plan
• Show you exactly what it intends to do
• Wait for your approval before proceeding

This gives you the opportunity to review the plan and redirect Claude if it missed something important or didn’t consider a particular scenario.

Thinking Modes

Claude offers different levels of reasoning through “thinking” modes. These allow Claude to spend more time reasoning about complex problems before providing solutions.

The available thinking modes include:

• “Think” - Basic reasoning
• “Think more” - Extended reasoning
• “Think a lot” - Comprehensive reasoning
• “Think longer” - Extended time reasoning
• “Ultrathink” - Maximum reasoning capability

Each mode gives Claude progressively more tokens to work with, allowing for deeper analysis of challenging problems.

When to Use Planning vs Thinking

These two features handle different types of complexity:

Planning Mode is best for:

• Tasks requiring broad understanding of your codebase
• Multi-step implementations
• Changes that affect multiple files or components

Thinking Mode is best for:

• Complex logic problems
• Debugging difficult issues
• Algorithmic challenges

You can combine both modes for tasks that require both breadth and depth. Just keep in mind that both features consume additional tokens, so there’s a cost consideration for using them.

When working with Claude on complex tasks, you’ll often need to guide the conversation to keep it focused and productive. There are several techniques you can use to control the flow of your conversation and help Claude stay on track.

Interrupting Claude with Escape

Sometimes Claude starts heading in the wrong direction or tries to tackle too much at once. You can press the Escape key to stop Claude mid-response, allowing you to redirect the conversation.

This is particularly useful when you want Claude to focus on one specific task instead of trying to handle multiple things simultaneously. For example, if you ask Claude to write tests for multiple functions and it starts creating a comprehensive plan for all of them, you can interrupt and ask it to focus on just one function at a time.

Combining Escape with Memories

One of the most powerful applications of the escape technique is fixing repetitive errors. When Claude makes the same mistake repeatedly across different conversations, you can:

• Press Escape to stop the current response
• Use the # shortcut to add a memory about the correct approach
• Continue the conversation with the corrected information

This prevents Claude from making the same error in future conversations on your project.

Rewinding Conversations

During long conversations, you might accumulate context that becomes irrelevant or distracting. For instance, if Claude encounters an error and spends time debugging it, that back-and-forth discussion might not be useful for the next task.

You can rewind the conversation by pressing Escape twice. This shows you all the messages you’ve sent, allowing you to jump back to an earlier point and continue from there. This technique helps you:

• Maintain valuable context (like Claude’s understanding of your codebase)
• Remove distracting or irrelevant conversation history
• Keep Claude focused on the current task

Context Management Commands

Claude provides several commands to help manage conversation context effectively:

When to 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 aren’t just convenience features—they’re essential tools for maintaining effective AI-assisted development sessions.

Add a MCP Server

claude mcp add playwright npx @playwright/mcp@latest

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.

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.

Installing the Playwright MCP Server

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

This command does two things:

• Names the MCP server “playwright”
• Provides the command that starts the server locally on your machine

Managing Permissions

When you first use MCP server tools, Claude will ask for permission each time. If you get tired of these permission prompts, you can pre-approve the server by editing your settings.

Open the .claude/settings.local.json file and add the server to the allow array:

{
  "permissions": {
    "allow": ["mcp__playwright"],
    "deny": []
  }
}

Note the double underscores in mcp__playwright. This allows Claude to use the Playwright tools without asking for permission every time.

Practical Example: Improving Component Generation

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.

Results and Benefits

In practice, this approach can lead to significantly better results. Instead of generic purple-to-blue gradients and standard Tailwind patterns, Claude might update prompts to encourage:

• Warm sunset gradients (orange-to-pink-to-purple)
• Ocean depth themes (teal-to-emerald-to-cyan)
• Asymmetric designs and overlapping elements
• Creative spacing and unconventional layouts

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

Claude Code offers an official GitHub integration that lets Claude run inside GitHub Actions. This integration provides two main workflows: mention support for issues and pull requests, and automatic pull request reviews.

Setting Up the 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.

Default GitHub Actions

The integration provides two main workflows:

Customizing 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:

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

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_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.