Claude Code Beginner Crash Course: Claude Code In a Day

Summary

• Intro to Context Engineering: It's defined as the art and science of filling an LLM's context window with the right information at each step of a task. It's the natural evolution of prompt engineering.

• Prompt vs. Context Engineering: While prompt engineering uses static prompts, context engineering deals with dynamic information from multiple sources like user input, tool calls, history, and developer instructions.

• Importance for AI Agents: Effective AI agents (especially coding agents like Claude Code and Cursor) are more than just "wrappers" around LLMs. Their performance heavily depends on sophisticated context engineering to provide the right information at the right time.

• The "Garbage In, Garbage Out" Problem: The quality of an AI agent's output is directly tied to the quality of its context. Providing irrelevant, incorrect, or poorly structured context degrades performance.

• Challenges in Long-Running Tasks: As agents perform complex, multi-step tasks, their context window grows. This can lead to:

  • Exceeding Context Limits: The context becomes too large for the model.

  • Performance Degradation: The agent's effectiveness decreases due to noise.

  • Increased Cost & Latency: Larger contexts are more expensive and slower to process.

• Specific Context-Related Failures:

  • Context Poisoning: An early error or hallucination pollutes the entire subsequent process.

  • Context Confusion: Irrelevant information distracts the model.

  • Context Clash: Contradictory information within the context confuses the model.

• A Skill for Everyone: Context engineering is crucial not only for developers building AI applications but also for users who interact with them. Users can get much better results by understanding how to provide better context.

Summary

• Claude Code's Philosophy: It uses a hierarchical, persistent, and dynamic context management system that implements four core strategies to address context challenges.

• Strategy 1: Write Context (Persistent Memory)

  • Three-Tier Memory: Claude Code uses a multi-layered memory system to persist information across sessions.

  • Project Memory (./CLAUDE.md): Team-shared, version-controlled context for project architecture and coding standards.

  • User Memory (~/.claude/CLAUDE.md): User-specific preferences and shortcuts that persist across all projects.

  • Dynamic Memory Imports: Allows importing context from other memory files using @ syntax for modularity.

• Strategy 2: Select Context (Intelligent Retrieval)

  • Automatic Context Discovery: Claude Code smartly searches folders for relevant context files, inheriting from parent directories and prioritizing recently used information.

  • User-Driven Context: Users can quickly add information to memory using the # shortcut.

  • Tool-Specific Context: The context provided to the LLM automatically changes based on the tool being used (e.g., providing coding patterns for the Edit tool vs. file path validation for the Bash tool).

• Strategy 3: Compress Context (Efficient Representation)

  • /clear Command: Resets the conversation history in the context window while preserving the core project memory and understanding.

  • /compact Command: Summarizes the conversation history, compressing it down to essential information and key decisions to save space.

• Strategy 4: Isolate Context (Multi-Agent System)

  • Specialized Sub-Agents: Instead of one agent handling everything, Claude Code uses specialized "sub-agents" for different tasks (e.g., Code Reviewer, Researcher, Testing Agent).

  • Focused Knowledge: Each sub-agent has its own focused context, preventing confusion and allowing it to perform its specific task more effectively. The main Claude agent acts as a manager, delegating tasks to the appropriate specialist.

Summary

This tutorial explains the critical role of system prompts in context engineering for large language models (LLMs). It moves beyond the generic advice to "write a good system prompt" by providing concrete examples and best practices.

First, the video highlights a valuable GitHub repository called "system-prompts-and-models-of-ai-tools," which contains leaked system prompts from various state-of-the-art AI agents like Claude Code, Cursor, and Devin. These examples demonstrate that top-tier AI tools use detailed and lengthy prompts, often hundreds of lines long, to guide the model's behavior effectively.

Next, the tutorial introduces the concept of "calibrating the system prompt" to find the "Goldilocks zone"—a balance between being too specific and too vague. A prompt that is too specific treats the LLM like a deterministic machine with hardcoded logic, making it rigid and unable to handle unexpected situations. Conversely, a prompt that is too vague provides insufficient guidance, leading to inconsistent and unreliable outputs.

The ideal "just right" prompt empowers the model rather than constricting it. It does this by:

1. Defining a clear identity and scope: Establishes boundaries for the agent's role (e.g., customer support, not sales).

2. Providing a reasoning framework: Offers high-level principles and guidelines instead of a rigid flowchart, allowing the model to apply general rules to specific situations.

3. Establishing clear boundaries and heuristics: Uses compressed, efficient language to guide decision-making (e.g., "choose the simplest solution") without wasteful or repetitive instructions.

By following these principles, developers can craft superior system prompts that leverage the LLM's strengths in pattern recognition and reasoning, leading to more robust and adaptable AI agents.

• Project Creation: We start by finding and copying the npx create-next-app@latest command to scaffold a new Next.js project.

• Permission Error: We encounter an EACCES permission error on the first attempt, a common issue on some systems.

• Troubleshooting: We resolve the permission issue by running a sudo chown command suggested in the error output, giving our user the necessary ownership of the npm directory.

• Successful Setup: With the permissions fixed, we successfully run the setup command, name our project "hookhub," and accept all the default configurations like TypeScript and the App Router.

• Running the App:

  • We first try npm run dev but realize we're in the wrong directory.

  • We navigate into the newly created hookhub folder and successfully start the development server, viewing the boilerplate app at localhost:3000.

• Initializing AI Assistant (Claude Code):

  • We open the Claude Code AI assistant within the editor.

  • We run the /init command, which instructs the AI to analyze the entire codebase.

  • This process generates a CLAUDE.md file containing a detailed summary of the project's architecture, key files, and essential commands, providing the AI with crucial context for future tasks. We accept the creation of this file to finalize the setup.

• Exploring Browser Automation with Playwright MCP: We begin by searching for Playwright MCP (Model Context Protocol). We learn that it's a tool that allows AI agents like Claude Code to automate and interact with web browsers.

• Integrating Playwright with our AI Assistant:

  • We navigate to the official GitHub repository to find the setup instructions.

  • Using the Claude Code CLI in our terminal, we run the claude mcp add command to connect the Playwright tool as an external capability for our AI.

• Testing the Browser Automation:

  • To confirm the integration works, we prompt our AI assistant with "open browser on cnn.com".

  • The AI asks for permission to use the newly added Playwright tool.

  • After we grant permission, a new browser window automatically opens and navigates to CNN's website, demonstrating that the AI can now control a browser.

• Customizing AI Context with Personas:

  • We explore the concept of "Cursor Rules," which are pre-made context files (CLAUDE.md) that give an AI a specific persona or expertise.

  • We find and copy a rule designed to make the AI act as a senior front-end developer with deep knowledge of Next.js.

• Managing AI Memory and Context:

  • To keep our contexts organized, we create a new memory/frontend directory in our project.

  • We paste the copied persona into a new CLAUDE.md file inside this directory.

  • When we ask the AI "what are you an expert in?", it gives a generic answer, proving that files outside the root directory are not automatically loaded. This highlights the AI's deliberate context management system, which we will use to load specific knowledge for specific tasks.

Summary

• Introducing Spec-Driven Design: Instead of coding impulsively ("vibe coding"), we shift to a structured approach called "spec-driven design," where we first define what the application needs to do.

• Using Plan Mode: We switch the Claude Code assistant to "Plan Mode." This is a read-only mode designed for research and planning, preventing the AI from making code changes until a clear plan is established.

• Creating a Project Specification (Spec):

  • We prompt the AI to help create a spec file for our "HookHub" project.

  • The prompt outlines the MVP (Minimum Viable Product): a web page that displays a grid of open-source "Claude hooks" fetched from GitHub repositories.

• AI Research and Planning:

  • Claude Code uses its web search and fetch tools to research what "Claude hooks" are, gathering context from official documentation.

  • It then presents a detailed plan to create a comprehensive specification document, breaking it down into sections like Project Overview, MVP Scope, Data Model, UI/UX Requirements, and more.

• Executing the Plan:

  • We approve the AI's plan. Claude Code then creates a spec directory and writes the detailed specification into a CLAUDE.md file within it.

  • We then organize our project by moving the spec directory into a newly created memory folder to separate context files from application code

Summary

• Switching Models for Implementation: We begin by switching from the powerful (but slower) Opus model, which was great for planning, to the faster Sonnet model, which is better suited for implementation tasks.

• Implementing from the Spec File: We prompt Claude Code to build the main page grid, referencing our memory/spec/CLAUDE.md file using the @ symbol. This tells the AI to use our detailed plan as the source of truth for the task.

• AI-Generated To-Do List: Claude Code analyzes the spec file and creates its own step-by-step to-do list for the implementation. This includes tasks like creating the data structures, the card component, and updating the main page.

• Automated Code Generation: The AI works through its to-do list, automatically creating the necessary directories and files:

  • src/types/hook.ts for the data interface.

  • src/data/hooks.json for sample data.

  • src/app/components/HookCard.tsx for the UI component.

  • It also updates the main page.tsx file to display the grid.

• Context Management Explained: We highlight a key concept:

  • The AI needed us to manually @-tag the spec file because it was in a custom memory/ directory.

  • Files in these "memory" folders are not loaded automatically, which prevents overwhelming the AI's context window. This allows us to load specific knowledge only when needed.

• Reviewing the Result: We check the browser and see that the AI has successfully built the main page, displaying a grid of hooks exactly as defined in our specification.

• Committing the Work: Finally, we commit all the new and modified files to our Git repository, saving the initial version of our application.

Summary

• Objective: To demonstrate how to install and set up Claude Code.

• Installation Steps:

  • Find Documentation: The process begins by searching for "install claude code" on Google and clicking the official Anthropic documentation link.

  • Prerequisite: Ensure that Node.js is installed on your machine.

  • Install Command: Copy the npm install -g @anthropic-ai/claude-code command from the documentation.

  • Run in Terminal: Paste and run the command in a terminal.

  • Handle Permission Errors: I encounter a common permission error on macOS/Linux. Although the documentation advises against using sudo, the user proceeds with sudo for the demo to install it quickly. A warning is shown on screen: "Do NOT USE sudo npm install -g as this can lead to permission issues and security risks."

• Security Considerations:

  • Coding Agent Privileges: Claude Code is a coding agent that needs permissions to read, write, and execute files. This gives it significant privileges.

  • Developer Responsibility: Developers must use these tools responsibly by reviewing the code and output to ensure the agent behaves as expected and does not perform unintended actions.

  • Attack Vectors: Security risks, such as prompt injection and the potential for AI agents to "go rogue," will be discussed in detail throughout the course.

• Initial Setup and Configuration:

  • Running Claude: Type claude in the terminal to start the initial setup.

  • Theme Selection: Choose a terminal theme (e.g., dark mode).

  • Authentication: Authenticate with an Anthropic account. We can either connect via a Claude account with a subscription or use an API key for usage-based billing.

  • Security Notes: Acknowledge the security notes, which remind users that Claude can make mistakes and that they should only use code they trust due to prompt injection risks.

  • Terminal Setup: Configure the terminal settings, with the option to use recommended defaults or customize them.

  • Workspace Trust: For security, Claude Code asks for trust in the current working folder, limiting its permissions to read and write files only within that project's scope. It's best practice not to run it from the root directory.

• First Interaction:

  • After setup, we type "hello" and receives the response, "Hello! How can I help you today?" confirming that the installation was successful.

Summary

• Two Main Billing Methods:

  • Claude Subscription: A predictable, fixed monthly fee (Pro or Max plan). This method is recommended and used in the course. The /cost command will not show a per-use cost as usage is included in the subscription.

  • Anthropic API Key: A pay-as-you-go model where you are billed based on token usage. Ideal for testing or users who prefer usage-based billing. Costs can be monitored with the /cost command.

• Subscription Plan Details:

  • Free Plan: Does not include access to Claude Code.

  • Pro Plan (17−20/month): Provides access to Claude Code but is limited to the Sonnet model. Good starting point for hobbyists.

  • Max Plan (Starts at $100/month): Offers at least 5x more usage than the Pro plan and allows access to both Sonnet and the more powerful Opus model. This is the plan used by the instructor.

• AI Model Differences:

  • Claude Sonnet: The recommended model for most coding tasks, offering a good balance of speed, intelligence, and cost-efficiency.

  • Claude Opus: The most intelligent and expensive model, best suited for complex reasoning, deep planning, and research tasks rather than routine code generation.

• Important Warnings for API Key Users:

  • Security Risk: Be extremely careful not to leak your API key, as it could lead to unauthorized use and significant costs.

  • High Usage Potential: Using agents and complex workflows can consume a large number of tokens quickly, potentially leading to high, unexpected bills.

  • Mitigation: Set a monthly spending limit in your Anthropic console to prevent runaway costs.

• Rate Limits: Anthropic has introduced weekly and daily usage limits for both Pro and Max plans to prevent system abuse, so usage is not technically "unlimited."

Summary

• Slash Commands: These are the primary method for controlling Claude Code's features and settings directly from the command-line interface. Typing / reveals a list of all available commands.

• Managing Conversation History:

  • /clear: This command erases the entire conversation history, providing a fresh start. It's useful when the conversation becomes irrelevant or you want to free up context completely.

  • /compact: This command summarizes the current conversation, preserving key information while removing less important details. It helps manage the context window without losing the core thread of the discussion.

  • This process is an example of Context Engineering, where the user actively helps the AI stay focused by managing its memory.

• Managing Agents:

  • /agents: This command allows you to manage specialized "sub-agents."

  • Sub-agents are expert assistants designed for specific tasks (e.g., Code Reviewer, Debugger). Each operates with its own unique context, system prompt, and tools, enabling multi-agent workflows.

• Configuration:

  • /config: This command opens a panel to view and modify Claude Code's settings and preferences.

  • The configuration is hierarchical, allowing for granular control:

    • User Settings: Global settings that apply to all projects.

    • Project Settings: Settings specific to a project, shared with a team.

    • Local Settings: Personal tweaks for a project that are not shared.

• Cost Management:

  • /cost: This command shows the cost and duration of the current session.

  • For users with a Claude Pro subscription, the command indicates that usage is included in the plan. The video notes that cost management is a critical and sometimes contentious topic for AI coding assistants.

Summary

• IDE Integration (/ide): This command installs the Claude Code extension into your chosen Integrated Development Environment (IDE), such as Cursor or VS Code.

• Launching from the IDE: Once integrated, you can launch Claude Code directly from your IDE (e.g., by clicking the Claude Code icon in Cursor's toolbar).

• Contextual Awareness: Launching from the IDE automatically sets Claude Code's working directory to your current project, which is the recommended workflow.

• MCP Management (/mcp): This command is used to manage, add, or remove MCP (Model Component Protocol) servers.

• MCP Explained: MCP servers provide extra functionality, tools, and abilities to Claude Code from verified vendors or open-source projects, making it a powerful and extensible client

Summary

• Introducing Hooks (/hooks): Hooks are a powerful feature in Claude Code that allows for the automation of tasks at specific points in the workflow.

• How Hooks Work: Hooks are shell commands that automatically execute at predefined events, such as before or after tool use, or when Claude starts processing. This ensures consistent execution of tasks like code formatting, running tests, or blocking unsafe edits.

• Advanced Capabilities: Hooks can be used to run Claude's sub-agents, each with its own context and tools, enabling complex, automated workflows. This feature is highlighted as a significant productivity booster for developers.

Summary

• Memory in Claude Code (/memory): This feature allows the AI to retain and reuse information like settings, rules, and context across sessions to improve workflow efficiency and consistency.

• Hierarchical Structure: Memory is managed through CLAUDE.md files at different levels:

  • User Memory: Stored in ~/.claude/CLAUDE.md, it holds global preferences (e.g., coding style, personal shortcuts) that apply to all projects.

  • Project Memory: Stored in ./CLAUDE.md within a project's root directory, it contains team-shared rules, project-specific standards, and architectural details.

• How it Works: Claude recursively searches upwards from the current directory, loading all CLAUDE.md files it finds. This allows for a layered configuration where project-specific settings can override global ones.

• Managing Memory:

  • Use the /memory command to directly edit memory files in a code editor.

  • Use the # character as a shortcut to quickly add new memories.

• Best Practices: Keep memory files concise and specific to avoid overloading the AI, wasting tokens, and causing confusion.

• Initialization (/init): The /init command automatically analyzes your current codebase and generates a new CLAUDE.md file with relevant project documentation to provide initial context.

Summary

• Clone Repository: We clone a GitHub repository named ice_breaker, which is a LangChain project designed to generate icebreakers by scraping information from LinkedIn and X.

• Initialize Claude Code: We runs the /init command in Claude Code. This command analyzes the entire codebase to understand the project's structure, tech stack, and dependencies.

• Create Project Memory: Based on its analysis, Claude creates a CLAUDE.md file. This file acts as a "memory" or context for the project, containing an overview, setup instructions, development commands, and architecture details.

• Contextual Q&A: With the CLAUDE.md file created, we ask "what stack I am using for this project?" Claude correctly answers based on the context it just built, without needing to re-scan the files.

• Add Memories: We demonstrate adding specific memories.

  • Project Memory: A fact ("I like to eat Pizza") is added to the project's CLAUDE.md file.

  • User Memory: Another fact ("I like to eat Hamburger") is added to the global user memory file located at ~/.claude/claude.md.

• Memory Recall: After clearing the session history with /clear, the we ask "what do I like to eat?". Claude correctly answers "Hamburger and Pizza," demonstrating its ability to combine information from both the global user memory and the project-specific memory.

• Advanced Memory Management: The video explains that you can have multiple CLAUDE.md files distributed throughout a repository. Claude recursively finds and uses all of them. This can be combined with hooks to dynamically load relevant context based on the user's query (e.g., loading only database-related context when the user asks about databases).

This video provides a comprehensive overview and demonstration of the checkpointing and rewind features in Claude Code. The presenter, Eden, explains that Claude Code automatically tracks file changes made during each prompt, creating "checkpoints" that allow users to undo or "rewind" changes. This feature acts as a safety net, enabling developers to explore different implementations, try ambitious changes, and quickly recover from mistakes without losing their starting point.

The video highlights the importance of this feature for user adoption of AI tools, referencing the "Confidence in AI Ratio" (CAIR) metric, which suggests that a low effort to correct AI mistakes leads to higher user confidence and adoption. The presenter then demonstrates the feature in a practical example. After bootstrapping a Next.js project, he uses Claude Code to build a landing page, add an FAQ section, and a footer. He then uses the /rewind command to revert these changes, showcasing the different options available: restoring both the code and the conversation, restoring only the conversation, or restoring only the code.

Finally, the video covers the limitations of the feature, noting that it does not track changes made via bash commands or external manual edits, and emphasizes that it is a tool for quick, session-level recovery ("local undo"), not a replacement for proper version control systems like Git ("permanent history").

Summary

This video provides a tutorial on creating custom slash commands in Claude Code, demonstrating their power and flexibility. In this tutorial, we build two custom commands from scratch: one for generating git commit messages and another for telling dad jokes.

Key Steps and Concepts Covered:

1. Introduction to Custom Commands: Custom commands are a powerful feature in Claude Code that allow developers to create personalized and project-specific workflows using simple Markdown files.

2. Setting Up the Project: Commands are created inside a .claude/commands/ directory. Commands placed here are "project-scoped," meaning they are available only within that specific project.

3. Creating a commit-code Command:

   • A commit-code.md file is created with a basic prompt instructing the AI to review file changes and generate a summarizing commit message.

   • The initial test shows the AI can use built-in tools like git to analyze changes and propose a commit.

4. Adding Dynamic Arguments:

   • The command is enhanced by adding Use user hints to be the message main subject $arguments.

   • The $arguments placeholder allows users to pass dynamic text directly from the command line into the prompt, making the command more versatile.

   • Testing with /commit-code custom command results in a more specific and relevant commit message.

5. Creating a dad-joke Command: A second, simpler command is created to generate dad jokes based on a user-provided topic, further illustrating the use of the $arguments placeholder.

6. Comparison with Cursor's Built-in Feature: We note that while Cursor (the IDE) has a built-in feature for generating commit messages, Claude Code's custom commands offer far greater customizability, which is crucial for teams and enterprises with specific coding standards and guidelines.

The tutorial concludes by pushing the newly created commands to a GitHub repository, making the code available for viewers.

Summary

This video showcases an advanced and robust method for creating custom slash commands in Claude Code, using the example of generating a git commit message. This method is superior to simpler approaches due to its enhanced security and functionality.

Key Concepts Explained:

• Bash Command Execution: Custom slash commands can execute shell and bash scripts using the ! prefix. This allows for powerful and flexible automations, such as running git commands, making API calls, or interacting with other system tools.

• Security through allowed-tools: The command utilizes an allowed-tools field to explicitly define which bash commands the AI agent can execute (e.g., git add, git status, git commit). This follows the principle of least privilege, significantly improving security by preventing the agent from executing unauthorized commands, even if an attacker attempts to manipulate the context (context poisoning).

• Retrieval-Augmented Generation (RAG): The process is a practical implementation of RAG.

  • Retrieval: Before generating the commit message, the command runs several git commands (git status, git diff, git branch, git log) to retrieve the current state of the repository.

  • Augmentation & Generation: This retrieved information is then provided as context to the AI, which uses it to generate a relevant and accurate commit message.

In essence, this approach combines robust context engineering, strong security practices, and the power of RAG to create highly effective and safe developer tools within the IDE.

Summary

• Checking MCPs: We start with a new project and use the /mcp command to confirm that no MCP servers are configured.

• Adding a Remote MCP Server: We add the Context7 MCP, a service providing up-to-date documentation for over 30,000 libraries. This ensures the AI uses the latest information when generating code. We do this with the command: claude mcp add --transport http context7 https://mcp.context7.com/mcp.

• Setting the Configuration Scope: We use the --scope project flag to save the MCP configuration in an .mcp.json file within our project directory, making it specific to this project. Other options include local (for the current session) and user (global).

• Applying the Changes:

  • After adding an MCP, we need to restart Claude Code using the /exit command and then starting it again.

  • Upon restart, Claude Code detects the .mcp.json file and prompts us for permission to connect to the new MCP server.

• Automatic Configuration: Once we grant permission, Claude Code creates a settings.local.json file to enable the Context7 server automatically for future sessions in this project, so we won't be prompted again.

Summary

• Listing External Tools (MCPs): We list available "MCP servers" (external tools) using the /mcp command and finds one named context7.

• Inspecting MCP Tools: By drilling into context7, we discover it has two tools: resolve-library-id (to find a specific library) and get-library-docs (to retrieve its documentation).

• Querying with an MCP: We ask for the latest version of "LangGraph" and explicitly tells Claude to use the context7 MCP. Claude follows a two-step process: first, it uses resolve-library-id to find "LangGraph," and then it uses get-library-docs to fetch the version information, updating the project's settings.local.json with permissions along the way.

• Creating a Persistent Rule: We add a rule to the project's memory (CLAUDE.md) stating: "Every time I ask about LangGraph, I want you to use the context7 MCP." This ensures Claude will automatically use this tool for future related questions without being prompted.

• Testing the Rule: After restarting the session and clearing the history, We ask, "what is a LangGraph Interrupt?". Claude automatically follows the new rule, invokes the context7 MCP, and provides a detailed answer using the most up-to-date documentation available to the tool.

• Committing Changes: Finally, We commit the newly created CLAUDE.md memory file and the updated settings.local.json to a new Git branch named project/mcp.

Video Summary

• We begin by establishing a core principle of context engineering: "Context is the most expensive and limited resource in agentic systems."

• We'll see how good context leads to better performance, while bad context results in wasted tokens, higher latency, and poor results.

• The main problem we address is "context bloat" caused by using a general, project-level mcp.json configuration. This approach loads every MCP server and all their tools into the context window, even if they aren't needed for the current task.

• We will demonstrate this issue by running a token-heavy "verbose" MCP server and showing how it, along with other servers, can consume nearly 50% of the available context window before a single prompt is even written.

• To solve this, we will implement two powerful context engineering techniques:

  • Task-Specific Configuration: We'll create minimal, task-specific MCP configuration files (e.g., mcp.json.research) and load them using the --mcp-config and --strict-mcp-config flags when starting a session. This ensures only relevant tools are loaded.

  • In-Session Management: We'll use the built-in /mcp command to dynamically disable or enable MCP servers during a live session, allowing for on-the-fly context optimization.

• By the end, we will successfully reduce the MCP tool context usage from nearly 20% down to just 2-3%, freeing up valuable tokens for the actual work at hand and significantly improving agent efficiency.

Summary

• What Cloud Code Plugins Are: A feature for bundling slash commands, agents, hooks, and MCP servers into shareable packages.

• Purpose: Simplifies sharing custom configurations across teams and projects, avoiding manual copy-pasting.

• Plugin Marketplaces: How plugins are discovered and managed through a central marketplace.json file in a repository.

• Setup: A walkthrough of adding a plugin marketplace to the Cloud Code CLI.

• Security: The importance of reviewing a plugin's source code before installation.

• Live Demonstration: Using the "Feature Dev" plugin to automatically edit a README.md file and commit the changes to a repository.

• Plugin Management: How to enable, disable, update, and manage installed plugins.

Introduction:

The video explains the integration of Claude Code with GitHub Actions for automating development workflows.

• Core Functionality: The main feature demonstrated is the ability to trigger Claude by tagging it (@claude) in a GitHub issue or pull request comment to request a code change or fix.

• Process Example:

  • A user asks Claude to fix an issue by commenting @claude can you fix this?.

  • Claude responds with a detailed "To Do List" of the steps it will take.

  • It then automatically performs the code changes, commits them, and provides a link to create a new pull request.

• Underlying Technology:

  • The actual computation and execution of Claude's tasks run on GitHub Actions, GitHub's serverless automation platform.

  • These workflows are defined in YAML files within the repository and are triggered by specific events (like a comment being posted).

• Practical Application: This is presented as a powerful, production-ready feature. An example is given of the Anthropic team using this integration to automatically manage and label issues in their own open-source projects.

Goal: To integrate the Claude Command Line Interface (CLI) with a GitHub repository to enable automated workflows like code reviews.

Part 1: Setting up Prerequisites

• The user starts in the Claude CLI and runs the /install-github-app command.

• The setup fails because two prerequisites are missing:

  1. GitHub CLI (gh) is not installed: The video shows how to install it using Homebrew on macOS with the command brew install gh.

  2. GitHub CLI is not authenticated: The user runs gh auth login to connect the CLI to their GitHub account. This involves a web browser flow to authorize the application.

Part 2: Installing the Claude GitHub App

• After fixing the prerequisites, the user runs /install-github-app again. This time, it opens a GitHub page.

• The user installs the "Claude" GitHub App and grants it access to their repositories.

• Back in the terminal, the process asks which workflows to install (e.g., @Claude for issue comments, automated code reviews).

• The user must then choose an authentication method for the workflow, selecting the option to create a token tied to their Claude subscription.

Part 3: Troubleshooting a Common Error

• The installation fails with an error: "Failed to access repository."

• Reason: The command was run from a directory that was not a local Git repository.

• Solution: The user switches to a terminal window in a directory that is a cloned GitHub repository and restarts the installation process from there.

Part 4: Finalizing the Integration

• With the correct directory, the installation succeeds and automatically creates a Pull Request (PR) in the target GitHub repository.

• This PR adds the necessary GitHub Actions workflow files (YAML files) to enable the Claude integration.

• Claude then demonstrates its new capability by automatically performing a code review on the very PR it just created, posting a detailed analysis as a comment.

• The user merges the PR to complete the setup.

Outcome

• The GitHub repository is now configured with a workflow that triggers Claude whenever it is mentioned (@claude) in an issue or pull request.

Video Summary

This video demonstrates how to use the Claude Code GitHub integration to automatically resolve a programming issue directly from a GitHub issue comment.

• The Task: A user has a simple issue in their "ice_breaker" repository to rename a variable from linkedin_username to linkedin_url for better code readability.

• Triggering Claude: We comment @claude can you fix this? on the GitHub issue.

• Automated Workflow:

  • The comment triggers a GitHub Action workflow.

  • Claude responds in the issue comment with a live-updating "To Do List," outlining its plan (e.g., read guidelines, search codebase, implement changes, commit, provide PR link).

  • The logs in GitHub Actions show the detailed, non-human-readable tool calls and JSON data Claude uses behind the scenes.

• The Result (A Critical Lesson):

  • Claude successfully completes its to-do list, modifies the code, and provides a link to create a pull request (PR).

  • However, upon reviewing the code changes (diff), the user discovers that Claude made a critical mistake. It correctly renamed the variable, but failed to recognize that the original variable name was required by a third-party API.

  • The lesson is that without proper context (which could be provided in a claude.md file), the AI can follow instructions literally but miss the broader context, potentially breaking the code. We decides not to merge the PR.

• Key Takeaway: The video highlights the power of agentic workflows for automation but also underscores the crucial importance of human oversight and providing detailed context to AI agents to prevent errors.

Video Summary

This video shows how to use the Claude Code CLI and a CLAUDE.md file to provide the necessary context for Claude to successfully and correctly resolve a GitHub issue.

• Problem Recap: The previous attempt to rename a variable failed because Claude, lacking context, created a fix that would break a third-party API integration.

• Solution: Adding Context with CLAUDE.md

  • We open the project in a local code editor (Cursor) with the integrated Claude CLI.

  • They run the /init command, which automatically analyzes the entire repository to create a comprehensive CLAUDE.md file.

  • This file acts as a detailed guide for Claude, containing information about the project's architecture, key components, tech stack, API dependencies, and development commands.

  • We then asks Claude to commit this newly created context file to the repository using git add and git commit.

• Second Attempt at Fixing the Issue:

  • With the CLAUDE.md file now committed and pushed, we return to the GitHub issue.

  • They tag Claude again (@claude) and ask it to address the issue, this time providing a specific hint about which function to edit.

  • The Result (Success):

    • The GitHub Action is triggered again.

    • With the added context from CLAUDE.md, Claude now correctly identifies and renames the variable in the right place without breaking the API call.

    • It also automatically runs a code review on its own pull request, approving it and providing detailed feedback on the changes.

• Finalizing the Fix: We merge the correct pull request, successfully resolving the issue.

Summary

• Planning Mode: A core feature of Claude Code that promotes "spec-driven development." In this mode, Claude operates in a read-only environment, meaning it can analyze the codebase, search for documentation, and formulate a plan, but it cannot write, edit, or delete any files.

• Workflow:

  1. Initiate: Enter plan mode (e.g., using shift+tab).

  2. Plan: Claude creates a detailed implementation plan (a "spec") based on our request.

  3. Review & Iterate: We review the plan and can provide feedback to refine it. This iterative process allows for detailed adjustments before any code is written.

  4. Approve & Execute: Once we approve the final plan, Claude exits plan mode and begins implementing the changes.

• Benefits: This structured approach ensures safer and more consistent development by separating strategy (planning) from execution. It helps in understanding large codebases, designing complex features, and reduces errors by creating a clear, pre-approved specification.

• Deep Thinking Mode: When we prompt Claude to "think harder," it enters a more resource-intensive mode. It uses more tokens to reflect on the requirements, leading to a more comprehensive and detailed plan.

• Spec-Driven Development: The final plan can be saved as a markdown (.md) file. This file serves as a persistent "memory" or context for the project, which can be shared with team members or used to guide future development tasks, especially when working with sub-agents.

Main Goal: The video demonstrates how to use multiple instances of Claude Code AI agents simultaneously to parallelize independent development tasks and accelerate the workflow.

• Core Concept - Parallelization:

  • The primary idea is to run multiple instances of Claude Code within the same project.

  • This allows independent tasks to be worked on concurrently, similar to how a team of human developers would work.

  • This approach is described as the "Hello World" for multi-agent coding systems.

• Analogy: Multiple Developers:

  • The setup is compared to having multiple developers working on the same project, in the same Git branch, with read/write access to the entire codebase.

  • This shared access is powerful but also creates the risk of merge conflicts if not managed properly.

• Best Practices for Task Assignment:

  • The key to success is assigning truly independent tasks to each AI agent to avoid conflicts and dependencies.

  • Good Examples (Do This):

    • Fixing unrelated bugs in different parts of the codebase.

    • Building separate, non-dependent UI pages (e.g., an "About" page and a "Contact" page).

    • Creating independent components for a component library (e.g., one agent builds a button, another builds a modal).

  • Bad Examples (Avoid This):

    • Assigning dependent tasks, such as having one agent build a backend API while another builds the frontend that consumes it.

    • This creates a "dependency chain" where the frontend agent might fail because the API isn't ready or create mock data that doesn't match the final API, leading to contract divergence and silent failures.

• Shift in Developer Role:

  • This workflow shifts the developer's role from writing code to orchestrating and coordinating the work of multiple AI agents.

  • The crucial skill becomes identifying which tasks can be parallelized and which must be done sequentially.

• Hands-On Demonstration:

  • The video shows a practical example using a project called "HookHub."

  • Two Claude Code instances are opened in the same project.

  • Agent 1's Task: Redesign the HookCard.tsx component to be more modern and visually appealing.

  • Agent 2's Task: Redesign the hero section located in the main page.tsx file.

  • Outcome: Both agents work in parallel without conflict because their tasks affect two separate and independent files, successfully modernizing the UI much faster than a single agent could have.

Key Concepts Covered:

1. What is a Subagent?

   • Subagents are described as pre-configured AI personalities that the main Claude Code agent can delegate tasks to.

   • Each has a specific purpose and expertise, defined by its custom system prompt.

   • They operate in their own isolated context window, which is crucial for preventing "context pollution" from the main conversation and keeping the agent focused on its objective.

   • They can be configured with specific tools, allowing developers to enforce security using the "least-privilege principle."

   • They are reusable across different projects and teams.

2. How Subagents Work:

   • The video emphasizes that subagents function like advanced tools for the main Claude Code agent.

   • The description field in a subagent's configuration is critical, as it tells the main agent when to invoke that specific tool, similar to how tools are defined in frameworks like LangChain.

   • It's vital to understand the difference between a subagent's System Prompt (its permanent instructions) and the User Prompt (the specific task it's given during a run).

3. Comparison to Other Agents:

   • The video compares Claude Code's subagents to standard ReAct agents (like those in LangGraph).

   • The key difference highlighted is that Claude Code's agents are designed for "deep work"—they are capable of handling complex, long-running tasks such as implementing an entire feature from start to finish, which sets them apart from more simplistic agent types.

Summary

• Initiation: The process starts by typing /agents in the Claude Code terminal to open the agent management menu.

• Scope Selection: We choose to create a "Project" agent, which saves the configuration file within the project's .claude/agents directory, making it shareable and version-controlled.

• Generation Method: The "Generate with Claude" option is selected for an interactive, guided setup.

• Prompt Engineering:

  • An initial, simple prompt is written to define the agent's persona (a funny code reviewer).

  • In a clever move, we open a second Claude instance to refine and expand this simple prompt into a much more detailed and effective one.

  • The newly generated, high-quality system prompt is then pasted back into the agent creation workflow.

• Tool Configuration: Wenavigate the tool selection menu, showing the "advanced options" to see and select individual tools (like ls, grep, mcp_context7 tools, etc.) that the subagent is allowed to use.

• Model and UI: The Sonnet model is chosen for a balance of performance and cost, and a "yellow" background color is selected to visually distinguish the agent.

• Finalization: After reviewing a summary of the configuration, we save the agent, which creates a new markdown (.md) file.

• Result: The final code-comedy-carl.md file is shown, containing the YAML frontmatter (name, description, tools, model, color) and the detailed system prompt.

Summary

• Generating Test Code: The video begins by demonstrating how to generate a sample Python file (in this case, a Fibonacci function) to have code ready for the subagent to analyze.

• Invoking a Subagent: The custom subagent is activated by typing its designated trigger phrase ("funny review") followed by an @ mention of the file to be reviewed (@main.py).

• Subagent Execution: Claude identifies the trigger phrase, spins up an instance of the code-comedy-carl subagent (visually marked by its yellow tag), reads the specified file, and returns a complete, humorous code review.

• Running Multiple Tasks: The tutorial shows how to request multiple actions from the same subagent in a single prompt (e.g., "create 2 funny code reviews"). Claude then spawns two separate instances of the subagent to fulfill the request.

• Sequential vs. Parallel Execution: An important concept is highlighted: when multiple subagent instances are spawned, they currently execute sequentially. The video notes that parallel execution is a more advanced topic for a later lesson.

• Creating More Agents: The tutorial concludes by explaining that additional subagents can be created manually by adding new .md configuration files directly into the .claude/agents directory.

Summary

• The Core Problem: Large Language Models (LLMs) have a finite context window (token limit). As a conversation continues, the token count increases, which can lead to performance degradation, context pollution, or exceeding the limit entirely.

• Main Agent vs. Subagent: The main agent handles the primary conversation thread. When a complex task is needed, it can delegate that task to a subagent.

• Isolated Context: The main agent creates a specific prompt for the subagent. The subagent then starts with a completely fresh, blank context, aware only of the prompt it was given. It has no access to the main agent's conversation history.

• Independent Work: The subagent works independently in its own "side chain" or isolated session to complete the task, which might involve using many tokens for iterations and tool usage.

• Condensed Response: Once finished, the subagent returns a single, condensed response (like a summary or the final artifact) to the main agent.

• The Main Benefit: This process offloads the heavy token usage to temporary, isolated subagents. The main agent's context only grows by the small, condensed response, not the entire workload of the subagent. This keeps the main context "lean," preserves history, and avoids hitting the token limit.

In this tutorial, we cover:

• Setting Up the Environment: We start in the Claude Code terminal and prepare our workspace to begin building.

• Creating a New Subagent: Using the /agents command, we kick off the creation process for a brand new, specialized agent.

• Defining the Task: We define our agent's purpose: to act as a "Mermaid Diagram Generator," converting textual concepts into visual flowcharts using Mermaid syntax.

• Generating the Agent Configuration: We show how Claude Code uses our natural language prompt to automatically generate the initial configuration file (.md) for our subagent.

• Understanding the Configuration: We break down the key parts of the agent's configuration, focusing on the description field which is crucial for telling the main agent when and how to delegate tasks.

• Putting it to the Test: We run our new agent for the first time by asking it to create a diagram of a RAG (Retrieval-Augmented Generation) flow.

• Visualizing the Result: We take the Mermaid code generated by our agent and render it into a visual diagram using the online tool Excalidraw.

In this tutorial, we cover:

• Setting Up the Environment: We start in the Claude Code terminal and prepare our workspace to begin building.

• Creating a New Subagent: Using the /agents command, we kick off the creation process for a brand new, specialized agent.

• Defining the Task: We define our agent's purpose: to act as a "Mermaid Diagram Generator," converting textual concepts into visual flowcharts using Mermaid syntax.

• Generating the Agent Configuration: We show how Claude Code uses our natural language prompt to automatically generate the initial configuration file (.md) for our subagent.

• Understanding the Configuration: We break down the key parts of the agent's configuration, focusing on the description field which is crucial for telling the main agent when and how to delegate tasks.

• Putting it to the Test: We run our new agent for the first time by asking it to create a diagram of a RAG (Retrieval-Augmented Generation) flow.

• Visualizing the Result: We take the Mermaid code generated by our agent and render it into a visual diagram using the online tool Excalidraw.

While our first attempt is successful, the output can be improved. Join us in the next video as we dive deep into prompt engineering to refine our subagent, control its execution flow, and get even better results!

Summary 

• Agent Configuration Modification: The mermaid-diagram-generator.md agent configuration file is modified to refine its behavior.

• Adding New Instructions:

  • A rule is added to make the sub-agent respond to the main agent with only the diagram code, without any extra text ("no fluff").

  • A new initial step (step 0) is added, instructing the agent to first perform a web search for existing diagrams to use as inspiration.

  • The agent's primary description is updated to emphasize creating "SIMPLE" diagrams, reinforcing this with the phrase "Remember KISS: KEEP IT SIMPLE STUPID!".

• Testing the Agent: A prompt is run asking the agent to "create a mermaid diagram of RAG".

• Observing Agent Behavior: The agent follows the new instructions by first performing a web search for "Mermaid diagram RAG Retrieval Augmented Generation architecture 2024".

• Debugging the Output: The generated Mermaid code contains a syntax error in its styling section.

• Visualizing the Diagram: The code is copied and pasted into Excalidraw's "Mermaid to Excalidraw" tool. The erroneous styling section is removed, successfully generating a complete RAG architecture diagram.

• Committing Changes: Claude Code is used within the IDE to commit the updated agent configuration file to the Git repository and push the changes.

Creating Custom Output Styles in Claude Code

1. The Power and Importance of Output Styles

Output styles are a powerful feature in Claude Code that allow developers to fundamentally customize how the AI communicates and structures its responses. We highlights this as one of their favorite features because it moves beyond simply getting an answer to defining how that answer is delivered. Instead of being limited to a single, one-size-fits-all interaction model, users can define specific formats and tones for different tasks. This transforms the interaction from a simple Q&A into a sophisticated, tailored collaboration,  calls a fundamental breakthrough in human-AI collaboration and communication.

2. The Interactive Creation Process

Creating a new output style is a user-friendly, interactive process initiated with the /output-style:new slash command. This command is unique because it launches a specialized sub-agent named output-style-setup, which then guides the user through the creation process. The user provides their preferences in natural language, describing aspects such as:

• Response Style: (e.g., concise, detailed, comprehensive)

• Tone: (e.g., formal, casual, educational)

• Format: (e.g., bullet points, numbered lists, YAML)

• Focus Areas: (e.g., task completion, learning, code quality)

The sub-agent takes these natural language instructions and builds the complete style configuration.

3. Flexible Scoping: User vs. Project Level

Output styles offer flexible scoping to fit different needs. They can be created at two distinct levels:

• User Level: This is the default behavior. The style file is saved in your home directory (~/.claude/output-styles) and becomes available across all of your projects. This is ideal for general-purpose styles you want to use everywhere, like the "minimal-bullets" style created first in the video.

• Project Level: By specifying this in your prompt, you can create a style that is saved within the current project's own .claude/output-styles directory. A project-level style is specific to that project and will take precedence over any global user-level styles. This allows for highly specialized communication tailored to the unique requirements of a particular codebase or task, as demonstrated with the "yaml-concise" project-level style.

4. From Natural Language to a Structured Style File

The core mechanism is translating a simple, high-level prompt into a detailed, structured configuration. When the user provides a prompt like "answers should be in bullet points, keep it concise and to the point," the output-style-setup agent augments this request. It generates a detailed Markdown file that elaborates on the instruction with specific rules under sections like "Communication Style," "Response Format," and "Tone Guidelines."

This generated Markdown file effectively replaces parts of Claude Code's default system prompt. It becomes the new set of instructions that Claude uses to structure its responses, ensuring every answer adheres to the developer's defined protocol. This allows for powerful transformations, such as forcing all output into a structured format like YAML, which shifts the communication from linear text to a semantic, hierarchical structure that is both human-readable and machine-parsable.

Summary

• Creating a Complex Output Style: The user creates a new, more complex output style using the /output-style:new command. The goal is to have Claude format its responses as HTML pages with a retro ASCII art aesthetic.

• Modifying Workflows within a Style: After the initial creation, the user directly edits the output style's Markdown file (retro-ascii-blog.md). A new ## Workflow section is added with instructions for Claude to automatically save its HTML output to a file and open that file in the browser after every response. This demonstrates how to embed automated actions into a style.

• Project-Level Scoping: The user demonstrates creating the style at the "project level," meaning it is saved within the project's .claude directory and is specific to that workspace, overriding any global user styles.

• Specialized AI Environments: The video showcases running multiple instances of the Claude Code CLI in different terminal windows, each with its own active output style. This illustrates a key concept: creating specialized, context-aware AI assistants for different tasks (e.g., one for debugging, another for documentation), mirroring how human teams have specialized roles.

• Demonstrating the New Style: The user tests the newly modified "retro-ascii-blog" style. When prompted, Claude generates a complete HTML file with ASCII art styling and automatically opens it in the default web browser, successfully following the custom workflow instructions.

Summary:

• Setting Output Style: We first change the Claude Code output style to minimal-bullets.

• Creating a Custom Status Line: A slash command /statusline is used to create a new status line. The prompt specifies that the status line should display the current output-style, be implemented in Python, and run using the uv package manager.

• Agent Action: Claude Code invokes a dedicated statusline-setup agent to handle this request.

• File Creation & Configuration:

  • The agent creates a new Python script named statusline.py in the ~/.claude/ directory. This script contains the logic to read session data (like the current output style) from stdin and print the desired status text to stdout.

  • The agent then updates the main configuration file, ~/.claude/settings.json, to define the statusLine property. It sets the type to "command" and specifies the command to execute: uv run python ~/.claude/statusline.py.

• Initial Display: The new status line immediately appears at the bottom, showing "Style: minimal-bullets".

• Styling with ANSI Codes: We then ask Claude to make the status line text green and bold.

  • The statusline-setup agent modifies the statusline.py script, adding ANSI escape codes to the print statement to apply the requested colors and bold formatting.

• Dynamic Updates: The video demonstrates that the custom status line is dynamic. When we change the output style back to default, the status line automatically updates to "Style: default" in the previously set green and bold format.

Summary:

• Claude's File System: The video explains that Claude Code stores session and conversation history in the ~/.claude/projects/ directory. Each project has its own folder, containing .jsonl files for each conversation session.

• Goal: We aim to create a more advanced status line that displays the last prompt they sent to Claude.

• Prompting Claude: We issue a detailed /statusline command, instructing Claude to:

  • Display the last prompt in the current session.

  • Retrieve this information by reading the conversation transcript file, whose path is available in the stdin data (transcript_path).

  • Filter out commands and AI responses, showing only user prompts.

  • Implement this logic by modifying the existing statusline.py script.

• Debugging Process:

  • The initial script generated by Claude contains a bug, causing a TypeError which is conveniently displayed directly in the status line.

  • We copy the error message and prompts Claude again with "fix this bug".

  • The statusline-setup agent successfully debugs and updates the statusline.py script.

• Final Result: The status line now dynamically displays both the current output style and the last user prompt (e.g., "Style: default Last: Hows it going?").

• Manual Editing: We demonstrate that we can manually edit the statusline.py script (changing "Last" to "Last Prompt") and the changes are reflected immediately, showcasing the flexibility of this system.

Summary

• Agentic Coding Vision: The future of AI-assisted coding is not a single, general-purpose AI, but a team of specialized AI "agents" running simultaneously.

• Specialized Roles: Each agent instance will have its own role, context, and skills, similar to a human development team (e.g., a frontend expert, a backend expert, a DevOps specialist).

• Custom Communication Styles: Agents will have unique output styles tailored to their roles. For example, a DevOps agent might communicate in YAML, while a backend agent might generate API specifications.

• State Management Limitation: Currently, if multiple Claude Code instances are launched from the same directory, they share a single configuration file. This causes changes in one instance (like the output style) to affect all other instances, preventing true isolation.

• Achieving Isolation: To create truly separate agents, each Claude Code instance must be launched from a different directory. This ensures each has its own independent configuration and state.

• The Future Workflow: The ultimate goal is to have multiple terminal windows open, each representing a named AI agent. A developer can then easily switch between these specialized agents to get tailored assistance for the specific task at hand.

Summary

In this video, we dive deep into creating Custom Agent Skills for Claude Code. We move beyond simple configuration and learn how to implement a complex skill that utilizes auxiliary scripts.

• Exploring the Marketplace: We examine the Claude Skills Marketplace repository to find a pre-made skill called git-pushing. This skill uses a SKILL.md definition file and a bash script (smart_commit.sh) to handle git operations.

• Local Implementation: We create a .claude/skills directory in our local project and manually replicate the file structure, creating the markdown definition and the bash script.

• Customization (Pirate Mode): We modify the bash script by asking Claude to use the claude CLI tool to generate commit messages in a "Pirate" style.

• Context & Execution: We learn how "Progressive Disclosure" works—only the header of the skill is loaded initially, and the full instructions are loaded only when the agent decides to use the skill.

• Resilience Testing: We intentionally break the file path in our script to demonstrate that the AI agent is smart enough to locate the script even if the directory structure doesn't perfectly match the instructions.

Summary

In this introductory clip, we set the stage for the next section of the course. We display a diagram outlining "Agent System Primitives," which includes Memories, Slash Commands, Skills, Subagents, and MCP Servers. We announce that in the upcoming videos, we will be comparing Agent Skills against these other primitives, focusing specifically on two key metrics: Context Management (context engineering) and Execution Flow.

Summary

In this video, we distinguish between Agent Skills and MCP Servers. We define Skills as "procedural knowledge containers"—essentially folders with instructions and scripts—that teach agents how to perform tasks consistently. We highlight that Skills utilize Progressive Disclosure, meaning they only load the full instructions into the context when the agent decides to use them, making them highly context-efficient (consuming very few tokens initially).

In contrast, we explain that MCP solves the problem of connecting agents to external resources. However, MCP requires upfront provisioning of tool definitions, which can consume a significant amount of context tokens even before the first prompt. We conclude by noting execution differences: MCP executes on a server (local or cloud), while Skills usually execute locally within the main agent thread.

Summary

In this video, we compare Agent Skills and Subagents. We explain that while they are similar in that both involve writing dedicated instructions, the key difference lies in their context environment. We clarify that Subagents operate in an isolated, fresh context window, making them ideal for long-horizon tasks that would otherwise bloat the main agent's context. Conversely, Skills operate within the main agent's context. We also discuss flexibility, noting that Subagents allow for dynamic system prompt changes, whereas Skills share the main agent's system prompt. We conclude by recommending Subagents for heavy tasks and Skills for enforcing consistent methodologies or "automatic expertise."