Use when creating, fixing, or optimizing a 3D model for a website: procedurally authoring a model in Blender via Python/headless (bpy), exporting glTF/GLB (Draco, Meshopt, KTX2), and loading it in Three.js or React-Three-Fiber. Triggers when a model looks like a toy / Minecraft / Roblox, materials don't read as real, exported geometry shades flat or comes out wrong, deployable or rigged parts clip / detach / sweep through the body when animated, a GLB is too large, shadeautosmooth no-ops headless, join() drops modifiers or bevels, wheels spin on the wrong axis, or you need to inspect and verify a 3D model in the browser. Covers Blender bpy gotchas, hard-surface realism, the GLB web pipeline, articulated rigging, and programmatic clip detection.
EnglishUse when brainstorming, designing, or building high-fidelity, interactive, animated marketing or landing websites: the near-3D, eye-catching, awwwards-grade tier (Stripe, Linear, Vercel, Column). Covers the full lifecycle: concept and art direction, design tokens, a motion language, building in code (vanilla JS + GSAP + Tailwind, or React + Framer Motion / Three.js / R3F), performance, and accessibility. Triggers on requests like "build a premium landing page", "make this site feel like Stripe", "add scroll animations or a scrollytelling section", "an animated hero", "parallax and micro-interactions", "a WebGL or gradient hero", or "design an awwwards-grade marketing site".
EnglishIncludes Building 3D for Web and High Fidelity Web.
Supported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Building 3D for Web
Use when creating, fixing, or optimizing a 3D model for a website: procedurally authoring a model in Blender via Python/headless (bpy), exporting glTF/GLB (Draco, Meshopt, KTX2), and loading it in Three.js or React-Three-Fiber. Triggers when a model looks like a toy / Minecraft / Roblox, materials don't read as real, exported geometry shades flat or comes out wrong, deployable or rigged parts clip / detach / sweep through the body when animated, a GLB is too large, shadeautosmooth no-ops headless, join() drops modifiers or bevels, wheels spin on the wrong axis, or you need to inspect and verify a 3D model in the browser. Covers Blender bpy gotchas, hard-surface realism, the GLB web pipeline, articulated rigging, and programmatic clip detection.
High Fidelity Web
Use when brainstorming, designing, or building high-fidelity, interactive, animated marketing or landing websites: the near-3D, eye-catching, awwwards-grade tier (Stripe, Linear, Vercel, Column). Covers the full lifecycle: concept and art direction, design tokens, a motion language, building in code (vanilla JS + GSAP + Tailwind, or React + Framer Motion / Three.js / R3F), performance, and accessibility. Triggers on requests like "build a premium landing page", "make this site feel like Stripe", "add scroll animations or a scrollytelling section", "an animated hero", "parallax and micro-interactions", "a WebGL or gradient hero", or "design an awwwards-grade marketing site".
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Building 3D for Web skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- Reported license for the skills shown: MIT. The author’s terms apply.