Fupio is the easiest way to share online Learn more »
Join Fupioegghead.io - Bite-sized Web Development Video Tutorials & Training
Awesome lessons on modern web tools that you use to get work done.
eggheadThe Agentic Power User's PlaybookThis presentation is a collection of the workflows, shortcuts, and habits I use every day to manage swarms of agents without getting buried in context. ...
https://egghead.io/courses/modern-three-js-course~cp18c
eggheadModern Three.js CourseBuild production-ready 3D experiences on the web with Three.js, TypeScript, and Vite. This workshop takes you from an empty project to a modular, mainta...
https://egghead.io/lessons/organize-your-three-js-project-part-3~v1608
eggheadOrganize 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.
Learn how to handle Vite'...
https://egghead.io/lessons/organize-your-three-js-project-part-2~0qvax
eggheadOrganize 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.
L...
https://egghead.io/lessons/organize-your-three-js-project-part-i~h7e32
eggheadOrganize your Three.js Project - Part IRefactor a messy Three.js main.ts into scalable, maintainable code using factory composition.
Learn to build modular subsystems with cleanup methods an...
https://egghead.io/lessons/debug-with-tweakpane~0j40m
eggheadDebug with TweakpaneIntegrate Tweakpane to create a live debug panel for scene parameters. Add controls for object position, rotation, and material color that update in rea...
https://egghead.io/lessons/resize-scene-along-with-browser-window~1wth2
eggheadResize 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 wi...
https://egghead.io/lessons/animations~mhr27
eggheadAnimationsCreate a render loop using requestAnimationFrame and Three.js's Clock to animate objects smoothly. Use delta and elapsed time values to keep animations ...
https://egghead.io/lessons/rotating-objects~9ywu7
eggheadRotating 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...
https://egghead.io/lessons/scaling-objects~le03z
eggheadScaling objectsUse the scale property to resize objects along each axis independently. Learn that scale values are multipliers on the geometry's original dimensions, a...
https://egghead.io/lessons/transform-objects-position~x8a3s
eggheadTransform 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...
https://egghead.io/lessons/camera-and-renderer~rw7oa
eggheadCamera 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 ...
https://egghead.io/lessons/add-objects-to-the-scene~6ecty
eggheadAdd objects to the sceneCreate a Mesh by combining a BoxGeometry with a MeshBasicMaterial, add it to the scene, and render it.
https://egghead.io/lessons/install-three-js-and-types-three~unnm9
eggheadInstall 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.
https://egghead.io/lessons/elements-of-a-3-d-scene~9anzo
eggheadElements 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:
Objects (cube, lights)
A...
https://egghead.io/lessons/create-a-new-vite-project~wl2j3
eggheadCreate a new Vite ProjectScaffold a new project using pnpm create vite, select the Vanilla TypeScript template, and verify the dev server runs correctly.
Stop hook to create a truly continuous and interactive workflow. By intercepting the agent's attempt to stop, you can programmatically block it and instead instruct it to use the AskUserQuestioneggheadForce 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 ...
AskUserQuestion tool becomes essential. This lesson explores this foundational, internal tool that allows the AI to pause its execution and ask the user a series of questions. You'll learn that while you can't build your own version of this tool, you can completelyeggheadCreate 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 ...
https://egghead.io/courses/claude-code-tools-deep-dive~e58tr
eggheadClaude Code Tools Deep DiveWhen you ask Claude to perform a task, you're often hoping it figures out the right approach. But Claude Code provides a specific set of built-in tools ...
PostToolUse hook that calls Claude again can trigger an infinite recursive loop, spawning endless processes and potentially crashing your system and burning through your API tokens. This lesson demonstrates this exact problem and provides a clear,eggheadAvoid 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 inh...
eggheadOptimizing 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 b...
compress MCP tool from scratch. You'll learn how to convert a standard CLI script into a tool with a strict input schema usingeggheadClaude 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 wher...
eggheadClaude 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 ...
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? This lesson dives into Claude Code Hooks, specifically the PreToolUse hook, to create a powerful security layer for your AI agent. You'll learn how to write a custom hook in TypeScript, powered by Bun, that intercepts every tool call before it executes—adding an extra layer of protection beyondeggheadSecure 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 bl...
Errata Please use the full script name in "allowed-tools" like below:
eggheadBuild Better Tools in Claude Skills with ScriptsErrata
Please use the full script name in 'allowed-tools' like below:
allowed-tools: Bash(bun run scripts/compress.ts:*)
Save the :* syntax for 'argu...
compress skill that needs a timestamped filename, and we will instruct it to use a separate timestamp skill to get that information. ### TheeggheadStacking 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...
Examples section to your skill's SKILL.md file. By linking to a separate, detailed example markdown file, you can provide a clear blueprint for the AI to follow.eggheadControl 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 ...
SKILL.md format required to define a new skill, including the crucial description for discovery and allowed-tools to safely grant access to shell commands. By building a simple timestamp skill, you'll see how to provide Claude with the exact knowledgeeggheadCreate 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 ov...
https://egghead.io/courses/the-essential-guide-to-claude-code-skills~7349k
eggheadThe Essential Guide to Claude Code SkillsWelcome to the comprehensive course on building skills for Claude Code! This course will teach you how to extend Claude's capabilities by creating reusa...
https://egghead.io/courses/advanced-cursor-hooks~swp89
eggheadAdvanced Cursor HooksLearn the art of automating your AI-assisted development workflow by building custom hooks that intercept, modify, and enhance how Cursor's AI agent int...
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. This lesson takes you from quick debugging with console.error to building a robust, persistent logging system using JSONL files. You'll learn why certain outputs are silent, how to see immediate debug information, and how to create a production logging solution with automaticeggheadLogging 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...
afterFileEdit hook to automatically run your linter or formatter—like Biome, Prettier, or ESLint—every time the AI modifies a file. The hook detects which file was changed, checks if iteggheadAutomate 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 you...
npm instead of your preferred tool, and you find yourself constantly correcting it. There's a better way to enforce these standards automatically. This lesson shows you how to build a beforeShellExecution hook that intercepts every shell command the AI attempts to run. You'll inspect the command, decide whether to allow or deny it, andeggheadEnforce 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...
cursor-hooks package, which provides complete TypeScript definitions for all hook payloads and responses. Combined with Bun's elegant Bun.stdin.json() method for reading input, you'll write hooks with fulleggheadType-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 form...
eggheadLevel 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...
hooks.json files. You'll get autocomplete suggestions, inline documentation, validation warnings, and hovereggheadSimplify 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—a...
eggheadDebugging 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 d...
beforeReadFile event, which executes a command just before the AI agent accesses a file. You'll configure the .cursor/hooks.json file, write a simple shell script to capture the JSON payload sent by the hook, and examine the rich contextual dataeggheadCapture 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...
~/.claude/settings.json and apply conventions across all projects from one central location. ## Project vs. User hooks Project hooks (.claude/settings.local.json): - Specific to one repository - Live in project directory - Good for project-specific rules User hooks (~/.claude/settings.json): - Apply to all projects - Live in home directory - Perfect for personal conventions ## Set upeggheadEnforce 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 pr...
permissionDecision: "deny" - Provides permissionDecisionReason with clear alternatives - Creates a self-correcting feedback loopeggheadGuide 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 s...
echo, validate tool usage, and enforce conventions before any tool runs. ## Two ways to block Exit code 2 (simple): - Write error to stderr - Exit with code 2 - Claude sees the error message and stops the tool JSON output (structured): - Return permissionDecision: "deny" - Provide permissionDecisionReason - Claude sees the reason and caneggheadBlock 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, vali...
eggheadBlock Prompts with Hook GuardrailsBlocking prompts with hooks creates essential guardrails. Validate inputs, enforce conventions, and stop inappropriate requests by exiting with the righ...
.claude/prompts/variations.md:eggheadGenerate 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...
load() function that fetches on demand:eggheadInject 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 cont...
jq gymnastics. ## The shell hook problem Basic hooks work but lack structure: - JSON parsing needs extra tools - No autocompletion or type checking - Complex logic gets messy fast ## Bun + TypeScript solution Set up a typed hook environment:eggheadType-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 gymnast...
eggheadRewrite 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, modi...
https://egghead.io/courses/claude-code-essentials~jc0n6
eggheadClaude Code EssentialsClaude Code Essentials is the starter kit I wish existed when I first opened Claude inside VS Code. These lessons capture the shortcuts, workflows, and ...
.gitignore: eggheadOrganizing 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.
Ignore person...
CLAUDE.md Initialize from the codebase:eggheadCLAUDE.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 ...
~/.claude/settings.json: eggheadCustomize 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 ...