{
  "markdown": "# Three.js Skills for Claude Code\n\nA curated collection of Three.js skill files that provide Claude Code with foundational knowledge for creating 3D elements and interactive experiences.\n\n## Purpose\n\nWhen working with Three.js, Claude Code starts with general programming knowledge but lacks specific Three.js API details, best practices, and common patterns. These skill files bridge that gap by providing:\n\n- Accurate API references and constructor signatures\n- Working code examples for common use cases\n- Performance optimization tips\n- Integration patterns between different Three.js systems\n\n## Installation\n\nClone this repository into your project or copy the `.claude/skills` directory:\n\n```bash\ngit clone https://github.com/pinkforest/threejs-playground.git\n```\n\nOr add as a submodule:\n\n```bash\ngit submodule add https://github.com/pinkforest/threejs-playground.git\n```\n\n## Skills Included\n\n| Skill                      | Description                                                             |\n| -------------------------- | ----------------------------------------------------------------------- |\n| **threejs-fundamentals**   | Scene setup, cameras, renderer, Object3D hierarchy, coordinate systems  |\n| **threejs-geometry**       | Built-in shapes, BufferGeometry, custom geometry, instancing            |\n| **threejs-materials**      | PBR materials, basic/phong/standard materials, shader materials         |\n| **threejs-lighting**       | Light types, shadows, environment lighting, light helpers               |\n| **threejs-textures**       | Texture types, UV mapping, environment maps, render targets             |\n| **threejs-animation**      | Keyframe animation, skeletal animation, morph targets, animation mixing |\n| **threejs-loaders**        | GLTF/GLB loading, texture loading, async patterns, caching              |\n| **threejs-shaders**        | GLSL basics, ShaderMaterial, uniforms, custom effects                   |\n| **threejs-postprocessing** | EffectComposer, bloom, DOF, screen effects, custom passes               |\n| **threejs-interaction**    | Raycasting, camera controls, mouse/touch input, object selection        |\n\n## How It Works\n\nClaude Code automatically loads skill files from the `.claude/skills` directory when they match the context of your request. When you ask Claude Code to:\n\n- Create a 3D scene → `threejs-fundamentals` is loaded\n- Add lighting and shadows → `threejs-lighting` is loaded\n- Load a GLTF model → `threejs-loaders` is loaded\n- Create custom visual effects → `threejs-shaders` and `threejs-postprocessing` are loaded\n\n## Usage Examples\n\n### Basic Scene Setup\n\nAsk Claude Code:\n\n> \"Create a basic Three.js scene with a rotating cube\"\n\nClaude Code will use `threejs-fundamentals` to generate accurate boilerplate with proper renderer setup, animation loop, and resize handling.\n\n### Loading 3D Models\n\nAsk Claude Code:\n\n> \"Load a GLTF model with Draco compression and play its animations\"\n\nClaude Code will use `threejs-loaders` and `threejs-animation` to generate code with proper loader configuration, animation mixer setup, and error handling.\n\n### Custom Shaders\n\nAsk Claude Code:\n\n> \"Create a custom shader material with a fresnel effect\"\n\nClaude Code will use `threejs-shaders` to generate working GLSL code with proper uniform declarations and coordinate space handling.\n\n## Skill File Structure\n\nEach skill file follows a consistent format:\n\n```markdown\n---\nname: skill-name\ndescription: When this skill should be activated\n---\n\n# Skill Title\n\n## Quick Start\n\n[Minimal working example]\n\n## Core Concepts\n\n[Detailed API documentation with examples]\n\n## Common Patterns\n\n[Real-world usage patterns]\n\n## Performance Tips\n\n[Optimization guidance]\n\n## See Also\n\n[Related skills]\n```\n\n## Verification\n\nThese skills have been audited against the official Three.js documentation (r160+) for:\n\n- Correct class names and constructor signatures\n- Valid property names and method signatures\n- Accurate import paths (`three/addons/` format)\n- Working code examples\n- Current best practices\n\n## Contributing\n\nFound an error or want to add coverage for additional Three.js features?\n\n1. Fork the repository\n2. Edit or create skill files in `.claude/skills/`\n3. Verify against [Three.js documentation](https://threejs.org/docs/)\n4. Submit a pull request\n\n### Skill File Guidelines\n\n- Use accurate, tested code examples\n- Include both simple and advanced patterns\n- Document performance implications\n- Cross-reference related skills\n- Keep examples concise but complete\n\n## License\n\nMIT License - Feel free to use, modify, and distribute.\n\n## Acknowledgments\n\n- [Three.js](https://threejs.org/) - The 3D library these skills document\n",
  "bytes": 4693,
  "sha": "1ecd94808b3684e0da4e00cf37b2d80a31e2186feda26db93f1e863476ef57bd",
  "repo_slug": "cloudai-x/threejs-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_cloudai_x_threejs_skills_threejs_postpro_7b3d975b/readme"
}