Temporal
Cursor & Claude Code: Professional AI Setup
3 hours, 42 minutes
CC
Course Description
Boost your coding productivity with AI-assisted tools and agents. Use Cursor and Claude Code for precise inline edits or to delegate larger tasks to background agents. Build project plans with guardrails, rules, and linting to keep output on track. Follow real-world workflows from a professional developer to harness AI agents for faster, higher-quality code!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: August 23, 2025
Rating
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 19 minutes
Steve Kinney begins the course by discussing the landscape of AI-assisted development. While agents can generate code quickly, there's still a significant need for engineers to apply strategic thinking and system design skills to their codebases.
Steve introduces the more common AI tools and shares some pros and cons for each. Cursor and Claude Code are covered in depth throughout this course. Other tools like Gemini and Codex can provide similar features or be better suited in a GitHub workflow or with tasks beyond code generation.
Steve reviews the context window and explains some high-level techniques for ensuring higher quality from AI development tools. Limiting the scope of what's sent on each request can help AI tools focus on a task. Creating clear instructions, limitations, and linting rules also leads to higher quality results.
Cursor
Section Duration: 1 hour, 13 minutes
Steve introduces Cursor and explains how it can interact with a codebase, including inline edits, AI chat, and agent mode. The Anthropic, Google, and OpenAI models are discussed, and Steve recommends using detailed instructions and constraints to achieve better accuracy with smaller models over open-ended requests to larger models.
Steve tours the Cursor interface and highlights a few key features. The chat sidebar allows developers to interact with different AI models using Agent or Ask modes. A targeted model can also be selected, or the Cursor can decide which model to use. Cursor-specific editor settings are also explored.
Steve demonstrates inline editing in Cursor. Inline edits can be triggered with the cmd/ctrl+k shortcut. Instructions can be entered in the text box and will be executed on any selected code or generate new code if nothing is selected. Tab completion is also demonstrated.
Steve uses agent mode to generate a calculator component. With broad instructions, Cursor can get stuck or execute task outside the scope of what's being asked. Changes can be reviewed individually or accepted all at once.
Steve discusses how Cursor rules are persistent instructions developers define for AI tools to follow every time they edit or interact with a codebase. Cursor rules eliminate the need for prompts to contain the same guardrails every time and can help return higher-quality and more accurate results. The rules can be defined at the project level or the user level.
Steve walks through creating Cursor rules. The rules are written in markdown and can be scoped to a specific file or directory. The "Awesome Cursor Rules" repo or sites like cursor.directory all developers to search rules shared by the development community.
Steve explains that Cursor Notepads allow developers to embed documents, notes, or other information about the project's architecture that Cursor can reference. The drawback is that Notepads are Cursor-specific and aren't consumed by other AI tools.
Agents & MCPs
Section Duration: 37 minutes
Steve introduces background agents in Cursor, which operate in a remote environment. They allow developers to spawn tasks that edit and run code independently in the background by cloning a repo and working in a separate branch. A PR is submitted to the repo when a background agent completes a task.
Steve starts a Cursor background agent to review a repo. While the agent is running, Steve walks through the billing dashboard and shares some insights for monitoring and managing token cost.
Steve discusses the features of MCP servers and shares some use cases for MCP related to GitHub repos or Figma designs. MCP behaves like an API but for LLMs. It allows applications like Cursor or Claude Code to interact with other external tools through a consistent protocol.
Steve installs the Firecrawl MCP into Cursor and creates a simple web scraper to download course information from the Frontend Masters website and produce a JSON file.
Steve shares some lint rules that add guardrails for agents as they write code. Leveraging existing tools like ESLint can lead to higher-quality results and less refactoring for AI code contributions. Some rules may be too strict for teams to follow, but they can be used temporarily with agents.
Claude Code
Section Duration: 1 hour, 23 minutes
Steve introduces Claude Code, a terminal-based AI coding agent. Claude Code can be installed through NPM, allowing developers to subscribe to a monthly pricing tier or pay based on API usage. Usage is rate-limited so even if a developer or team is subscribed to a max plan, usage can still be restricted.
Steve explains "Thinking Mode" in Claude Code. It is a mechanism that allows the AI agent to use "extended reasoning" and evaluate alternatives more thoroughly before producing output. Instead of immediately generating code, Claude will attempt to understand the complete context of the task. Compacting the context window is also discussed in this lesson.
Steve starts Claude Code in a repo and walks through the slash commands. Common slash commands are "/status" for checking usage and "/model" for switching models. The "/init" command analyzes the project and creates a CLAUDE.md file to assist Claude Code with future requests.
Steve shares tips for specifying project boundaries in the CLAUDE.md file. Reference files with product or feature requirements are discussed, and Steve demonstrates how to leverage a detailed plan while using Claude Code to refactor a messaging feature in the repo.
Steve demonstrates how to create custom commands that can be reused in the project. These commands are executed just like slash commands. Bash scripts or arguments can be interpolated inside the command. External files can also be referenced.
Steve explains using Claude Code hooks like PreToolUse, PostsToolUse, and Stop. Claude Code hooks are user-defined shell commands that execute at various points in its lifecycle. They are configured in the settings.json file at the user or project level.
Steve introduces Subagents, which run in the project using their own context window. This frees up the main agent from having to compact the context window during subsequent requests.
Steve uses subagents to evaluate the tRPC refactoring plan discussed earlier in the course. The results are reviewed, and Steve highlights how the question/answer dialog between the subagents helps identify issues or reasons the plan may not be possible and should be abandoned.
Steve shares a few tips for working with subagents. Git worktrees are a nice solution because they allow multiple branches to be in the filesystem at one time, allowing multiple submages to execute in parallel.
Wrapping Up
Section Duration: 9 minutes
Steve wraps up the course, sharing some useful tools for inspecting repos, creating custom coding assistants, and conducting research.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops