Use this guide when an agent must build, modify, inspect, or document a terrain scene with THREE.Terrain. The library creates heightmapped Three.js terrain and provides procedural generators, filters, material blending, decoration tools, grass, image conversion, analysis, and seeded randomness.
Visual reasoning discipline for verifying UI and Three.js work with the SceneProof CLI. Use whenever a change can alter rendered output — components, styles, layout, SVG, canvas, scenes, cameras, lights, materials, animation — or whenever about to claim that something "looks right", "is visible", or "renders…
Guide for creating effective skills. Use when users want to create or update a skill that extends Claude with specialized knowledge, workflows, or tool integrations.
Build scroll-driven 3D web experiences that stay fast, indexable, and genuinely usable on mid-range phones. Use when the work involves scroll animation, parallax 3D effects, a Three.js scene, a GLTF or GLB model on a page, scrollytelling, a product page with 3D rotation, an animated hero, GSAP ScrollTrigger…
This skill should be used when the user asks to "build a particle system", "make confetti/snow/smoke/sparks", "create a connected-dot/constellation network background", "add a flow-field or curl-noise particle effect", "render thousands of GPU particles with Three.js Points", or "animate emitters with forces". Covers…
This skill should be used when the user asks to "write a fragment shader", "make a GLSL gradient/noise/plasma background", "create an image transition (dissolve, displacement, glitch)", "add distortion or chromatic aberration", "build an SDF shape shader", "wire up a Three.js ShaderMaterial with uniforms", or "do GPU…
This skill should be used when the user asks to "build a 3D hero section or WebGL background", "animate a Three.js scene", "play or crossfade GLTF animation clips", "move/lerp the camera or link it to scroll", "render thousands of objects with InstancedMesh", "set up React Three Fiber (R3F) motion", "add bloom/DOF…
Visualize your current project as a 3D city in the browser. Files become buildings, folders become districts, bugs become fires. Use when user says 'city', 'visualize', '3d', 'show my code', or '/city'.
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it"…
Control an open SemaFrame universal 2D/3D component workspace through MCP or its OpenAPI fallback. Use when an agent, including a realtime voice or multimodal client, needs to inspect, model, create, arrange, update, connect, present, undo, or redo exact spatial assemblies, reusable models, Gaussian-splat Reality…
Generate procedural low-poly 3D models with Three.js and export them as glTF or GLB assets. Use when Codex needs to create browser-previewable low-poly props, terrain, rocks, trees, buildings, vehicles, collectibles, or simple game assets with flat shading, simple geometry, materials, export controls, and validation…
Expert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive…
Makes AI-generated Three.js / WebGL / react-three-fiber code produce coherent, playable 3D scenes instead of code that compiles but looks and feels broken — correct model scale and orientation, grounded and non-overlapping placement, real collisions, frame-rate-independent controls, and characters that walk without…
Thiết kế nhà bằng Atelier — quy trình 5 pha có checkpoint từ phỏng vấn đến bản vẽ. Dùng khi người dùng muốn thiết kế/vẽ nhà, sửa mặt bằng, hoặc làm việc với model atelier.project.json.