Lessons

Standalone lessons and lessons linked to egghead courses. 120 latest of 9941 lessons.

LessonOrganize your Three.js Project - Part 3Extract the Three.js camera into a factory function that subscribes to a shared resize observer and returns a dispose method.
LessonOrganize your Three.js Project - Part 2Extract the Three.js renderer into its own factory function that accepts a canvas and resize observer, returning a dispose method for proper cleanup.
LessonOrganize your Three.js Project - Part IRefactor a messy Three.js main.ts into scalable, maintainable code using factory composition.
LessonDebug with TweakpaneIntegrate Tweakpane to create a live debug panel for scene parameters. Add controls for object position, rotation, and material color that update in real time without touching the code.
LessonResize scene along with browser windowListen for window resize events to update the camera aspect ratio and renderer size. Prevent the scene from stretching or distorting when the browser window changes dimensions.
LessonAnimationsCreate a render loop using requestAnimationFrame and Three.js's Clock to animate objects smoothly. Use delta and elapsed time values to keep animations frame-rate independent.
LessonRotating objectsUse the rotation property to rotate objects around the X, Y, and Z axes. Learn why Three.js uses radians instead of degrees, how to convert between them using Math.PI, and how rotation direction is determined by sign.
LessonScaling objectsUse the scale property to resize objects along each axis independently. Learn that scale values are multipliers on the geometry's original dimensions, and use MeshNormalMaterial to better visualize face changes while experimenting.
LessonTransform objects positionMove objects along the X, Y, and Z axes using the position property. Add an AxesHelper to stay oriented in 3D space, use position.set() to avoid verbose code, and learn what a Vector3 actually is with a visual explanation.
LessonCamera and RendererSet up a PerspectiveCamera by understanding FOV and aspect ratio, initialize a WebGLRenderer tied to a canvas element, and fix the most common beginner mistake: camera and object starting at the same position.
LessonAdd objects to the sceneCreate a Mesh by combining a BoxGeometry with a MeshBasicMaterial, add it to the scene, and render it.
LessonInstall three.js and @types/threeInstall the three package and @types/three for full TypeScript support. Import Three.js into the project and confirm the types are working.
LessonElements of a 3D sceneWalk through the core building blocks of every Three.js scene. Every 3D scene out there is composed of the same main elements:
LessonCreate a new Vite ProjectScaffold a new project using pnpm create vite, select the Vanilla TypeScript template, and verify the dev server runs correctly.
LessonCompletely Remove a File from Pushed git HistoryIf we want to completely remove a file from github - including all history - there is a tool that we can use called the BFG.
LessonSquash Commits Before they are Pushed with Interactive RebaseWe have created 3 commits that we want to squash together before we push them to github. We can enter an interactive rebase with:
LessonFix Merge Conflicts While Changing Commits During an Interactive RebaseWe'll enter a more complicated interactive rebase with:
Lessongit Ignore a File that has Already been Committed and PushedWe make a .env file and accidentally push it to github.
LessonCopy a Commit from One Branch to AnotherIf you want to pull over just a single commit from one branch onto another, you can do that with git cherry-pick [HASH-TO-MOVE]
LessonUse `git stash` to Save Local Changes While PullingIf we make a change to the same function both locally and remotely, then when we try to pull down the remote changes, we'll run into a conflict - and git won't pull the remote changes down.
LessonPush a New Branch to github that Doesn't Exist Remotely YetWe'll make a new feature branch with:
LessonCleanup and Delete Branches After a Pull RequestWe've made a pull request and now we can clean up the branches by deleting the feature branch.
LessonAdd a File to a Previous Commit with Interactive RebaseWe're going to pick a previous commit and enter an interactive rebase with:
LessonMove a Commit that was Committed on the Wrong BranchWe'll do some work and commit it - but then realize it was on the wrong branch!
LessonChange the Commit Message of a Previous Commit with Interactive RebaseWe'll go back into our history with
LessonExplore Old Commits with a Detached HEAD, and then RecoverTo poke around in old code, we can checkout the hash of an old commit with git checkout [HASH] - but then we'll be in a "detached HEAD" state.
LessonChange a Commit Message that Hasn't Been Pushed YetIf you make a mistake in a commit message but HAVEN'T pushed it yet, you can change that commit message with --amend:
LessonRemove Files from Staging Before CommittingIf you've added files to the staging area (the Index) accidentally - you can remove them using git reset.
LessonUndo a Commit that has Already Been PushedOnce a commit is pushed, you do NOT want to use git reset to undo it - because reset will rewrite the history tree, and anyone who has already pulled that branch will have a bad tree.
LessonRemove Changes from a Commit Before PushingIf we've already committed changes that we don't want to push, we can also remove those with git reset, but we're going to reset back to a specific commit, either with:
LessonUse and Compare the Different git Reset Options: --hard, --soft, and --mixedgit reset has three primary options that we might use: --soft, --hard and --mixed (the default).
LessonRecover Local Changes from `git reset --hard` with `git reflog`If you've removed a commit with git reset --hard, it's still possible to recover the commit using git reflog to look up the commit hash.
LessonAdd More Files and Changes to a Commit Before PushingTo add more files to the most recent commit, we can add them to the staging area with:
LessonForce Claude to Ask 'What's Next?' with a Continuous Stop Hook WorkflowA common limitation of AI agents is that the conversation stops once a task is completed, breaking your flow and forcing you to manually figure out the next step. What if the agent could proactively ask you what to do next, every single time?
LessonCreate Interactive AI Tools with Claude Code's AskUserQuestionAI interactions are often a one-way street: you give a prompt, and the AI responds. But what if the AI needs your input to clarify instructions, gather preferences, or decide on the next step? This is where Claude's built-in AskUserQuestion tool becomes...
LessonAvoid the Dangers of Settings Pollution in Subagents, Hooks, and ScriptsWhen building complex automations with Claude, it's crucial to understand that any settings defined for your main agent—including powerful hooks—are inherited by any sub-agents it creates. This can lead to a dangerous "worst-case scenario": a PostToolUse hook...
LessonOptimizing Claude Skills from Subagents to ScriptsBuilding Claude skills in plain English is intuitive and allows the AI agent to use sub-agents to figure out complex tasks. However, this approach can be slow, less reliable, and costly as the agent has to reason through the steps every time.
LessonClaude Skills Compared to MCP ToolsWhile Claude Skills offer incredible flexibility for agent-driven workflows, sometimes you need absolute, programmatic control over a task. This is where MCP (Model Context Protocol) Tools excel. MCP Tools are a powerful alternative to Skills, designed for...
LessonClaude Skills Compared to Slash CommandsIn Claude Code, both Skills and Slash Commands allow you to extend the AI's capabilities, but they serve distinct purposes. It can be confusing to know when to use one over the other. This lesson clarifies the fundamental difference between them and...
LessonSecure Your Claude Skills with Custom PreToolUse HooksThe allowed-tools setting offers good control, but what if you need to enforce even stricter rules, like allowing only specific script directories or blocking commands that reference sensitive files?
LessonBuild Better Tools in Claude Skills with ScriptsErrata
LessonStacking Claude Skills to Create Complex WorkflowsWhile individual AI agent skills are powerful, their true potential is unlocked when they can be combined to perform more complex, multi-step tasks. One skill might need the output of another to complete its work, creating a dependency chain.
LessonControl Claude Skills Output with References and ExamplesWhen building custom skills for Claude, you might find that the output is too generic or doesn't follow the exact file structure and content format you need. Simple instructions aren't always enough to guarantee precision.
LessonCreate Your First Claude Code SkillAI assistants in Claude have limitations, like not knowing the current time, which can cause automation tasks to fail. This lesson teaches you how to overcome these issues by creating custom "Skills." You'll learn the file structure and SKILL.md format...
LessonLogging and Debugging Cursor HooksDebugging hooks can be confusing at first. Using console.log doesn't work because stdout is reserved for communicating with the AI. You need a different approach for both quick debugging and production-ready logging.
LessonAutomate Cursor Code Quality with afterFileEditAI-generated code often misses your project's formatting and linting standards. You find yourself running manual fixes after every AI edit, breaking your flow and risking inconsistent code. Instead of treating formatting as a manual cleanup step, you can make...
LessonEnforce Cursor Tooling Standards with beforeShellExecutionRelying on documentation or repeated corrections to enforce project tooling standards is tedious and unreliable. The AI might default to common commands like npm instead of your preferred tool, and you find yourself constantly correcting it. There's a better...
LessonType-Safe Cursor Hooks with the cursor-hooks PackageWriting hooks without type safety means you're guessing at property names, relying on documentation for payload structure, and hoping your response format is correct. Every hook becomes an exercise in trial and error, with no editor assistance to guide you.
LessonLevel Up Cursor Hooks with TypeScript and BunBash scripts work for basic hooks, but they quickly become unwieldy when you need to parse JSON, implement complex logic, or maintain the code over time. This lesson transforms your hook development workflow by introducing Bun—a fast JavaScript runtime that...
LessonSimplify Cursor Hooks Configuration with JSON SchemaEditing raw JSON for your hooks configuration is tedious and error-prone. You have to remember exact hook names, required properties, and valid values—all without any guidance from your editor. There's a simple solution that transforms this experience...
LessonDebugging Cursor Hooks with Output PanelsWhen hooks don't work as expected, debugging can be frustrating. The basic execution log in Cursor's settings confirms whether your script ran, but it doesn't show what data was sent or what your script returned. This lesson reveals where to find the...
LessonCapture Agent Context with Your First Cursor HookCursor hooks provide a powerful way to run custom scripts in response to AI agent actions, giving you the ability to intercept workflows, inject context, or trigger automations. This lesson introduces the fundamental mechanics of hooks through the...
LessonEnforce Global Rules with User-Level PreToolUse HooksEnforcing global rules with user-level hooks eliminates repetition. Move PreToolUse logic to /.claude/settings.json and apply conventions across all projects from one central location.
LessonGuide Claude Code with Rich PreToolUse FeedbackGuiding Claude Code with rich feedback turns blocked commands into learning opportunities. Return structured JSON with denial reasons and alternatives so Claude self-corrects in real time.
LessonBlock Tool Commands Before Execution with PreToolUse HooksBlocking tool commands with hooks gives you fine-grained control over what Claude Code can execute. Use PreToolUse to intercept commands like echo, validate tool usage, and enforce conventions before any tool runs.
LessonBlock Prompts with Hook GuardrailsBlocking prompts with hooks creates essential guardrails. Validate inputs, enforce conventions, and stop inappropriate requests by exiting with the right code and clear feedback.
LessonGenerate Multiple Solutions with Template-Driven HooksTemplate-driven hooks turn one instruction into multiple structured solutions. Load templates from disk, replace placeholders, and get consistent output formats every time.
LessonInject Live Data with Custom Hook FunctionsInjecting live data through hooks eliminates copy-paste workflows. Create custom functions that fetch real-time info and rewrite prompts with fresh context before Claude sees them.
LessonRewrite Prompts on the Fly with UserPromptSubmit HooksRewriting prompts with hooks lets you create custom shortcuts and transform simple commands into complex instructions. Use TypeScript to intercept, modify, and replace prompts before Claude sees them.
LessonType-Safe Claude Code Hooks with Bun and TypeScriptType-safe hooks turn Claude Code's JSON payloads into structured TypeScript. Use Bun to parse stdin, the official SDK for types, and skip the jq gymnastics.
LessonCLAUDE.md Initialization and Best Practices in Claude CodeCLAUDE.md initialization primes Claude Code with a single, evolving source of truth. Use it to record team guidance, keep updates flowing, and separate shared memory from personal notes.
LessonCustomize Global User Settings and the Status Line in Claude CodeCustomizing global user settings means Claude Code feels the same everywhere. Use the user file for quality-of-life improvements that shouldn’t live in repos.
LessonOrganizing Personal and Project Settings in Claude CodeOrganizing Claude Code settings keeps the team aligned. Separate project rules from personal tweaks so the repo stays clean and flexible.
LessonProtect Secrets from Being Read by Claude CodeProtecting secrets in Claude Code starts with permissions. Lock the workspace down with explicit deny rules.
LessonThe Cost of Context in Claude CodeThe cost of context shows up in the Claude Code window. System prompts, enabled tools, your messages, and large inputs (like repomix) all consume tokens you pay for.
LessonAutomate Tasks in Claude Code with Slash CommandsAutomating Claude Code tasks starts with reusable commands. Use repomix to bundle big context, then wrap it in a slash command so the workflow runs with a single trigger.
LessonTargeting the Proper Context with Claude CodeTargeting the proper context means giving Claude Code only what it needs. Use file and selection scope plus fast at-mentions to assemble precise prompts.
LessonThe Essential Claude Code ShortcutsClaude Code interactive mode has a few key shortcuts to help you stay productive. Restarting a session, editing like Bash, and rewinding conversations all help you feel more comfortable with each session.
LessonCombine Claude Code and Your Favorite IDETo combine the power of Claude Code and IDEs, you'll need the VS Code extension. Once it is installed, the chat panel understands which files you have open, what you have selected, and the diff it should propose back to you. This lesson is the baseline setup...
LessonBatch Generate Nano Banana Variations with AI Studio and ScriptingSubscribe to the AI Dev Essentials newsletter!
LessonAutomate Repetitive Tasks by Piping Your Shell History to an AI AgentStop telling your AI what you want to do and start showing it what you've already done. This lesson unveils a powerful, terminal-native workflow for automating repetitive command-line tasks. You'll learn how to pipe your shell history directly to your...
LessonBuild an Autonomous Agent with Pre-Approved ToolsWhy manually approve every action when your agent can work on its own? This lesson shows you how to build a truly autonomous agent by giving it pre-approved "tools" like web search and file editing capabilities. You will learn a powerful technique: using...
LessonCreate a Single-Purpose AI 'Planner' AgentGeneral-purpose AI is powerful, but often unpredictable. This lesson tackles how to build a specialized AI "planner" agent that reliably sticks to its one and only job: creating plans. You'll learn how to write a strong, directive system prompt that...
LessonTurn Your AI Agent into a Reusable Command-Line ToolA custom agent is only useful if it's easy to run. In this lesson, we'll level up our "French" agent by compiling it into a standalone executable with bun build. You'll learn how to transform a clunky bun run agents/french.ts command into a simple, memorable...
LessonCreate Your First Custom AI Agent in MinutesStop repeating yourself and start automating. This lesson is your first step into building specialized AI agents. You'll learn the foundational skill of creating a simple, reusable "French-speaking" agent by spawning the Claude CLI with a custom system...
LessonCreate a Gemini CLI Powered Subagent in Claude CodeCreate a custom "subagent" within Claude Code that acts as an expert wrapper for another powerful tool—the Gemini CLI. You'll learn how to offload large-scale code analysis to Gemini's 1M token context window, managed entirely by a specialized subagent that...
LessonEnforcing Structured Output with JSON Schema and Zod in Claude Code workflowsGetting predictable, structured data from an AI can feel like a game of chance. When you need a specific format like JSON to drive an automation pipeline, you can't afford guesswork. This lesson demonstrates a powerful workflow to enforce structured output...
LessonRun Gomplate Prompt Templating against gpt-oss:20b Locally with OllamaAI workflows are often tied to specific APIs, making it hard to switch between powerful cloud models (like Claude) and free, private local models (like gpt-oss via Ollama). This lesson demonstrates a powerful and flexible command-line workflow that gives you...
LessonControl the Exact Context You Give Claude Code with Repomix and Gomplate PluginsRelying on an AI's built-in tools to read your project files can be unpredictable. You might not know exactly what context is being used, making it difficult to create reliable and repeatable workflows. This lesson introduces a powerful solution: combining...
LessonBuild up Reusable Claude Code Workflows with Dynamic Prompt Templating using GomplateManaging complex prompts for command-line AI tools can be clunky. You either write monolithic prompt files or manually copy and paste code and other context into the terminal. This approach isn't scalable or reusable.
LessonPipe, Redirect, and Automate AI Output in the TerminalWorking with command-line tools is a fundamental skill for any developer. When your CLI tool is an AI, you unlock powerful new ways to automate tasks, but only if you know how to manage its input and output effectively. This lesson demonstrates how to use...
LessonScript: Creating Reusable AI Automation with MCP and Claude CodeManually running AI agents or multi-step processes in your editor is tedious and repetitive, even with powerful tools. Interactive prompts slow you down when you know exactly what task you want done. This lesson demonstrates how to transform a multi-step,...
LessonAgent: Build a Custom Agent Mode in Cursor for Managing NotesCreating a simple AI agent in Cursor is straightforward, but making it perform a complex, multi-step task reliably requires more than just a basic prompt. Agents often fail due to missing permissions, a lack of real-world context (like the current date), or...
LessonIdeate: From Daily Notes to Actionable Issues with CursorDeveloper ideation is often chaotic. Thoughts, bugs, and feature ideas strike at random times, and jotting them down in a daily scratchpad is easy. The hard part is turning that unstructured brain-dump into organized, actionable tasks. This process is manual,...
LessonContext: Mastering Project Switching in Cursor's AI Memory SystemWhen working with AI agents in Cursor, you might notice that the context from one task can bleed into another. A "memory project" set in one chat will remain active even when you start a new conversation. This persistence, managed by an underlying MCP (Model...
LessonAutomate: Scripting AI Knowledge Creation with MCP CLI ToolsAI agents are only as smart as the information they can access. Manually curating and feeding them knowledge is a slow, tedious process. This lesson demonstrates a powerful, automated approach using a command-line interface (CLI) tool to programmatically...
LessonConnect: Building Interconnected Knowledge Graphs with Foam and CursorA folder full of Markdown notes often feels disconnected. Links between files are just plain text, making it impossible to navigate your thoughts or see how ideas relate to one another. This lesson demonstrates a powerful solution: the "Foam" extension for VS...
LessonExtract: Mining AI Insights from Chat Logs with MCP-Powered AnalysisAI chat logs are a goldmine of project context, decisions, and hard-won lessons. But this knowledge is often ephemeral, lost in the scrollback. This lesson demonstrates a powerful workflow to automatically extract and structure this information into a...
LessonStreamline: Automating Cursor History Export with CLI ToolsThe default flow for exporting conversations from the Cursor AI editor can be clunky and disorganized. You have to manually export each conversation, and the resulting files lack a consistent naming scheme, making it difficult to build a persistent,...
LessonCapture: Transforming Cursor AI Conversations into Persistent KnowledgeDon't let valuable context from past AI conversations disappear. This lesson walks you through a powerful workflow to save your Cursor chat history as structured Markdown files, making them part of your project's long-term memory. You'll learn how to export,...
LessonFoundation: Building AI Memory with MCP and CursorAI coding assistants are incredibly powerful, but their memory is often ephemeral. They forget context between conversations, forcing you to repeat information and lose valuable insights. This lesson introduces basic-memory, a knowledge management system that...
LessonUpdate Your LinkedIn Profile with Cursor and the Playwright MCPKeeping a LinkedIn profile current can be a tedious chore, especially when it's years out of date. This lesson demonstrates a powerful and often humorous workflow for delegating this entire task to an AI agent, using Cursor IDE's Composer combined with...
LessonFilter Union Types with Extract and Exclude in TypeScriptLearn how to filter union types in TypeScript using Extract and Exclude for safer, more precise types in real-world apps.
LessonUse Pick and Omit to Reshape TypeScript Object TypesReshape your object types in TypeScript using Pick and Omit. Keep your code DRY, consistent, and easier to maintain.
LessonBuild Your Own AI Dev Tools with the Claude Code SDKStandard AI SDKs are powerful for text generation, but they can't read your local files, understand your code's context, or write changes back to your project. This lesson demonstrates how to break past that limitation using the @anthropic-ai/claude-code SDK,...
LessonDynamically Inferring File Types from User Prompts in Local AI ScriptsHardcoding your script to search for only one type of file (like .md) is a major limitation. This lesson shows you how to make your script smarter by teaching it to infer the desired file type directly from the user's natural language prompt.
LessonCreating Dynamic, File-Based Commands for Local AI ScriptsHardcoding command logic and prompts directly into your script makes it rigid and difficult to extend. This lesson demonstrates a more flexible and powerful pattern: defining your script's commands as individual Markdown files in a dedicated directory.
LessonHandling Invalid Commands and AI Errors in Local ScriptsAI models won't always give you the answer you expect; sometimes they'll return invalid data or "hallucinate" a response that doesn't fit your schema. This lesson teaches you how to make your local AI script more robust by implementing essential error...
LessonGenerating Text with a Local AI Model Based on File ContentOnce your script can understand a user's command and identify a target file, the next step is to perform an action. This lesson shows you how to use the Vercel AI SDK's generateText function to process a file's content and produce a relevant, AI-generated...
LessonProviding File System Context to Local AI Scripts with Globby and Zod EnumsA command is useless without knowing what to act upon. This lesson elevates your local AI script by giving it context from your project's file system. You'll learn how to find all relevant files and empower the AI to intelligently select the correct one based...
LessonProcessing Dynamic User Input in Local AI ScriptsHardcoded prompts are great for testing, but a truly useful script needs to respond to dynamic user input. This lesson shows you how to make your local AI script interactive by capturing command-line arguments.
LessonScripting Local Language Models with Ollama and the Vercel AI SDKWhile command-line chats with local AI models are useful, the real power comes from scripting. This lesson walks you through the initial setup for creating powerful, local AI-driven scripts by combining Ollama, the Vercel AI SDK, and Zod.
LessonEnable Cursor to generate predictable project setupsThis lesson demonstrates how to solve the predictability problem when using AI to generate code in monorepos by combining Cursor with Nx generators.
LessonEnable Cursor to directly access the terminal to read the output and fix issuesThis lesson demonstrates how to give Cursor direct access to your terminal output using the Nx MCP extension, enabling automatic error detection and fixing in monorepo projects.
LessonGive Cursor monorepo awareness with the Nx MCPThis lesson demonstrates how AI assistants struggle with complex monorepo structures and how to dramatically improve their understanding using the Nx MCP extension in Cursor.
LessonKnow When to Use ? vs | undefined in TypeScriptLearn to avoid type bugs in TypeScript by understanding when to use foo?: string vs foo: string | undefined. Clear examples & best practices.
LessonCapture Browser Logs with Playwright MCP in Cursor to Generate ReportsDebugging complex web forms can be a grind. You manually input data, check console logs, and painstakingly try to reproduce bugs. This lesson unveils a powerful, largely automated workflow using Cursor's AI agent in conjunction with the Playwright MCP to...
LessonAutofix Browser Errors with the Playwright MCP in CursorFixing runtime errors in web applications, especially those that require browser interaction or appear in stages, can be a tedious back-and-forth. This lesson demonstrates how to create a powerful, automated debugging loop using Playwright MCP integrated into...
LessonLocal AI Code Reviews with the CodeRabbit Extension in CursorAfter a long AI-driven coding session in Cursor, getting a "second pair of eyes" on the generated code is crucial. Manually reviewing everything can be time-consuming. This lesson demonstrates how to use the CodeRabbit VS Code extension for an initial...
LessonCreate a Simple GitHub Issue Search MCP Server using CursorLearn how to create a simple MCP Server to search GitHub Issues.
LessonBuilding a RAG pipeline with Weaviate and OpenAILearn how to leverage Vector Databases and embedding models to build a RAG pipeline in TypeScript with Weaviate and OpenAI models.
LessonAutomatically Improve Cursor Rules Using Custom PromptsWriting clear and effective prompts or rules for AI (.mdc files in Cursor) can be tricky. Your instructions might start out clumsy or ambiguous, leading to less-than-ideal AI responses. This lesson demonstrates how to quickly refine them by referencing a...
LessonClean up Legacy Functions for Testability in Cursor (0.50+) with cmd+kCursor's Cmd+K is fantastic for targeted code edits, but sometimes you need the AI to operate beyond the confines of your current selection—like extracting a piece of logic into a brand-new, top-level function. Standard Cmd+K often falls short, keeping...
LessonWhen to Use Cursor Rules Instead of MCPsWant Cursor's AI Agent to intelligently run your custom CLI tools without complex MCP setups or constant hand-holding? If only the AI could understand your tool's --help output, life would be much simpler. This lesson demonstrates exactly that, leveraging...
LessonBrainstorm and Planning with Mermaid Diagrams in CursorPlanning complex application logic or workflows before coding can be challenging. This lesson demonstrates how to leverage Cursor's AI (Chat and Agent modes) to visually brainstorm and iterate on features by generating Mermaid diagrams directly within...
LessonCreate Complex Cursor Shortcuts to Run Commands and Generate AI CommitsManually staging files, writing commit messages, committing, and syncing to Git involves multiple repetitive steps. This lesson demonstrates how to significantly streamline this common Git workflow in Cursor (or VS Code) by creating a single, powerful...
LessonRun local Nextjs App in a Cloudflare Tunnel with UntunJSIn development we often want to test out features we are building but can only do so with deployed or staging applications or setting up Ngrok or Cloudflare Tunnels.
LessonAI-Driven Design Workflow: Playwright MCP Screenshots, Visual Diffs, and Cursor RulesEstablish an automated, AI-driven workflow for implementing UI designs by comparing live development versions against target screenshots. This lesson integrates the Playwright MCP server for browser automation, a custom script using Pixelmatch for visual...
LessonGenerate and Debug MCP Servers from ScratchScraped MCP Examples ghx tool
LessonUsing Nx on an existing React and NPM workspace based monorepoIn this quick walkthrough, you’ll learn how to drop Nx into an existing npm or pnpm workspace and immediately benefit from project graph visualization, caching, and smart task orchestration, all without rewriting your setup.