Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.
- Building an interactive 3D product configurator
- Adding 3D scenes to a portfolio
- Animating models and cameras as visitors scroll
davila7/claude-code-templates☆ 32.8KUpdated Oct 21, 2026
Build a single HTML product showcase with real content displayed inside CSS-drawn iPhone and optional MacBook screens. Use supplied HTML, text, or data, with perspective, reflections, highlights, and optional gentle rotation.
- Create a visual for a product launch
- Present an app inside an iPhone-style screen
- Show mobile and desktop designs together
nexu-io/html-anything☆ 9.2KUpdated Oct 13, 2026
Plan a browser game's architecture before coding. Choose an engine, separate game rules from rendering, and define input, assets, menus, saves, debugging, and performance checks within a shared design.
- Choose an engine for a 2D or 3D browser game
- Separate game state from rendering responsibilities
- Plan input mappings and asset organization
openai/plugins☆ 7.5KUpdated Oct 8, 2026
Build browser-based 3D games with Three.js, TypeScript, and Vite. Structure scene and camera control, model loading, physics, and interface overlays separately from game rules, with guidance for WebGL rendering diagnostics and performance.
- Build a browser-based 3D exploration demo
- Prototype vehicle movement or character traversal
- Load GLB models and integrate Rapier physics
openai/plugins☆ 7.5KUpdated Oct 8, 2026
Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.
- Adding a faceted 3D object to a hero section
- Creating metal or ceramic-looking product visuals
- Adding subtle rotation and floating motion to web layouts
MengTo/Skills☆ 6.9KUpdated Oct 18, 2026
Write, review, and optimize React Three Fiber code for 3D scenes in React. Apply prioritized guidance on unnecessary re-renders, animation loops, model loading, state management, visual effects, and physics across the Poimandres ecosystem.
- Reviewing unnecessary re-renders in 3D scenes
- Improving animation update code
- Setting up model loading and loading indicators
zebbern/claude-code-guide☆ 4.7KUpdated Oct 21, 2026
Stand up a three.js scene: import maps and the three/addons path, the Scene/PerspectiveCamera/WebGLRenderer trio, the setAnimationLoop render loop, responsive resize, and OrbitControls. Use when starting or debugging a three.js app — when the user mentions three.js, THREE.Scene, WebGLRenderer, PerspectiveCamera, the render loop, resizing, or OrbitControls. For models use threejs-gltf-loading; for materials/lights use threejs-materials-lighting.
The English summary is being prepared. Showing the original description.
gamedev-skills/awesome-gamedev-agent-skills☆ 1.8KUpdated Oct 9, 2026
Light and shade a three.js scene: choose materials (MeshStandardMaterial PBR vs unlit MeshBasicMaterial), add ambient/hemisphere/directional/point/spot lights, turn on shadow maps, and use an environment map (IBL) for realistic reflections. Use when a three.js model looks black, flat, or wrong — when the user mentions three.js materials, MeshStandardMaterial, lights, shadows, envMap, or PBR. For renderer/loop setup use threejs-scene-setup; for loading models use threejs-gltf-loading.
The English summary is being prepared. Showing the original description.
gamedev-skills/awesome-gamedev-agent-skills☆ 1.8KUpdated Oct 9, 2026
Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing 3D assets for real-time rendering, or automating texture workflows. Triggers on tasks involving Substance 3D Painter, PBR texturing, material creation, texture export for Three.js, Babylon.js, Unity, Unreal, glTF optimization, or Python API automation. Creates optimized textures for threejs-webgl, react-three-fiber, and babylonjs-engine materials.
The English summary is being prepared. Showing the original description.
freshtechbro/claudedesignskills☆ 1.1KUpdated Nov 20, 2025
Use when building 3D levels and worlds in Godot 4.7: third-person or FPS controller, player stuck on stairs, spring arm camera clipping, blockout with CSG, GridMap and MeshLibrary, terrain (heightmap, HeightMapShape3D, Terrain3D regions, textures, painting), scattering trees with MultiMesh, streaming a big world, procedural meshes with SurfaceTool, Jolt physics settings, importing GLB or glTF from Blender or AI generators (Scenario, Tripo, Meshy, Hitem3D), import scripts, name suffixes, model facing, collision generation, LODs.
The English summary is being prepared. Showing the original description.
scenario-labs/skills☆ 1.1KUpdated Oct 20, 2026
Use when importing FBX, USD, OBJ or glTF from Maya, ZBrush or Blender into Unreal Engine 5.8 in bulk or reimporting changed files, writing Editor Python tools, Interchange pipelines or import presets, enforcing naming conventions, assigning material instances by script, setting Nanite, collision and LODs per asset class, writing data validators or automation tests, fixing redirectors, or cooking and packaging from the command line (BuildCookRun, RunUAT, CI, Perforce). Also when a scripted import ignores its settings or names, a Python validator never runs, or a Mac build will not package.
The English summary is being prepared. Showing the original description.
scenario-labs/skills☆ 1.1KUpdated Oct 20, 2026
Use when animating characters or scenes in Godot 4.7: AnimationPlayer clips and RESET, AnimationTree state machines and blend spaces built in code, Mixamo or glTF import, loop settings, BoneMap retargeting and shared animation libraries, root motion, foot sliding, foot IK with TwoBoneIK3D or custom SkeletonModifier3D, tweens, SpringArm3D cameras, cutscenes; or when a character T-poses, slides, floats, freezes mid-blend or a transition never fires.
The English summary is being prepared. Showing the original description.
scenario-labs/skills☆ 1.1KUpdated Oct 20, 2026
Expert-level toolkit for modular Godot 4.7+ CLI automation and headless build orchestration. Use when you need to: (1) Build complex scene trees or UI layouts programmatically, (2) Automate expert 3D asset pipelines (glTF -> Collision), (3) Optimize procedural geometry headlessly (CSG -> Static Mesh), or (4) Engineer production-grade CI/CD pipelines. Set GODOT_PATH env var for custom engine location. Keywords: Godot CLI, headless, CI, export, builder, 4.7.
The English summary is being prepared. Showing the original description.
thedivergentai/Game-Dev-Agentic-Skills☆ 873Updated Oct 17, 2026
Expert-level toolkit for modular Godot 4.7+ CLI automation and headless build orchestration. Use when you need to: (1) Build complex scene trees or UI layouts programmatically, (2) Automate expert 3D asset pipelines (glTF -> Collision), (3) Optimize procedural geometry headlessly (CSG -> Static Mesh), or (4) Engineer production-grade CI/CD pipelines. Set GODOT_PATH env var for custom engine location. Keywords: Godot CLI, headless, CI, export, builder, 4.7.
The English summary is being prepared. Showing the original description.
thedivergentai/Game-Design-Agentic-Skills☆ 850Updated Oct 13, 2026
Production export from Blender to FBX, GLTF, OBJ, USD, and Alembic with scale, pivot, rotation, normals, materials, animation, and collision verification via MCP.
The English summary is being prepared. Showing the original description.
arjun988/blender-skills☆ 367Updated Jul 11, 2026
Godot-specific Blender export favoring GLTF/GLB with correct scale, materials, animation clips, and collision shapes via MCP.
The English summary is being prepared. Showing the original description.
arjun988/blender-skills☆ 367Updated Jul 11, 2026
Three.js 3D graphics library - scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. Use when building 3D web experiences, creating WebGL visualizations, working with GLTF models, implementing custom shaders, or adding interactive 3D elements to web applications.
The English summary is being prepared. Showing the original description.
secondsky/claude-skills☆ 231Updated Oct 20, 2026
Production guidance for planning, building, animating, capturing, and reviewing complete Three.js scenes for rendered media. Use for browser-native 3D product shots, title sequences, procedural worlds, glTF scene assembly, camera and lighting animation, shaders, post-processing, deterministic frame export, and Three.js render QA; not for modeling standalone assets, WebXR interaction, or generic website decoration.
The English summary is being prepared. Showing the original description.
calesthio/generative-media-skills☆ 208Updated Jul 14, 2026
Use this skill to turn generated, captured, scanned, or modeled 3D output into production-ready standalone assets for DCC, real-time engine, web, or interchange delivery. It covers requirements, topology repair, scale and axes, UVs, PBR baking, LODs, static and skeletal readiness, rig handoff, optimization, glTF/USD/FBX delivery, validation, QA, and rights/provenance. Do not use it for provider-specific generation prompts, full scene/world building, mocap operation, or exact CAD/manufacturing work.
The English summary is being prepared. Showing the original description.
calesthio/generative-media-skills☆ 208Updated Jul 14, 2026
CesiumJS 3D Tiles - Cesium3DTileset, compressed and CAD-style glTF content, MVTDataProvider, UrlTemplate3DTilesDataProvider, styling, metadata, feature picking, voxels, point clouds, I3S, Gaussian splats, clipping. Use when a task involves loading 3D Tiles or Mapbox Vector Tiles, draping vector tiles on terrain, rendering KHR meshopt/CAD content, styling or querying features, working with voxels or point clouds, or clipping spatial data.
The English summary is being prepared. Showing the original description.
CesiumGS/cesiumjs-skills☆ 191Updated Sep 14, 2026
Expert 3D modeling specialist with deep knowledge of topology, UV mapping, game-ready and film-ready pipelines, DCC tool workflows (Blender, Maya, ZBrush, 3ds Max, Houdini), retopology, LOD systems, and export pipelines. This skill represents years of production experience distilled into actionable guidance. Use when "3d model, 3d modeling, mesh topology, uv unwrap, uv mapping, retopology, retopo, low poly, high poly, subdivision, subdiv, edge flow, edge loops, polygon modeling, box modeling, hard surface, organic modeling, sculpting, zbrush, blender modeling, maya modeling, 3ds max, LOD, level of detail, game ready mesh, film ready, baking normals, high to low, fbx export, gltf export, texel density, 3d, modeling, topology, uv, game-dev, vfx, blender, maya, zbrush, retopology, lod, hard-surface, organic, sculpting" mentioned.
The English summary is being prepared. Showing the original description.
omer-metin/skills-for-antigravity☆ 169Updated Jan 22, 2026
Use when building a 3D web game with three.js, Babylon.js or PlayCanvas - render loop and delta per library, fixed-step physics with Rapier or Havok, explicit dispose of GPU resources, instancing and draw-call budgets, glTF with Draco/meshopt/KTX2, pixel ratio and resize, WebGPU opt-in, React Three Fiber notes, and headless testing.
The English summary is being prepared. Showing the original description.
makifbaysal/tasktrooper☆ 117Updated Oct 21, 2026
Convert 2D orthographic wireframe PNG drawings to 3D Blender models exported as glTF/GLB. Use this skill whenever the user provides wireframe images (technical drawings, line drawings, orthographic views, side/front/back panels) and wants to generate a 3D model, mesh, or .glb file. Triggers on phrases like "convert this wireframe to 3D", "make a 3D model from these drawings", "build a model from this wireframe", "generate GLB from these views", or any image-to-3D-mesh request involving line drawings. Make sure to use this skill even if the user does not explicitly say "wireframe" — also covers "orthographic views", "technical drawings", "line drawings of objects", "front and side views". Requires a configured Blender MCP backend (official or ahujasid) and Python with opencv-python, numpy, scipy installed.
The English summary is being prepared. Showing the original description.
RobLe3/cc-blender-skill☆ 109Updated Oct 13, 2026
Convert 2D orthographic wireframe PNG drawings to 3D Blender models exported as glTF/GLB. Use this skill whenever the user provides wireframe images (technical drawings, line drawings, orthographic views, side/front/back panels) and wants to generate a 3D model, mesh, or .glb file. Triggers on phrases like "convert this wireframe to 3D", "make a 3D model from these drawings", "build a model from this wireframe", "generate GLB from these views", or any image-to-3D-mesh request involving line drawings. Make sure to use this skill even if the user does not explicitly say "wireframe" — also covers "orthographic views", "technical drawings", "line drawings of objects", "front and side views". Requires the Blender MCP addon to be running (port 9876) and Python with opencv-python, numpy, scipy installed.
The English summary is being prepared. Showing the original description.
RobLe3/cc-blender-skill☆ 109Updated Oct 13, 2026