[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75129":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":8,"languages":8,"totalLinesOfCode":8,"stars":9,"forks":10,"watchers":11,"openIssues":12,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":17,"compositeScore":18,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":8,"pushedAt":8,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":13,"starSnapshotCount":13,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},75129,"threejs-skills","CloudAI-X\u002Fthreejs-skills","CloudAI-X",null,2370,275,8,4,0,51,81,197,153,103.32,false,"main",true,[],"2026-06-12 04:01:17","# 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\u002Fskills` directory:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fpinkforest\u002Fthreejs-playground.git\n```\n\nOr add as a submodule:\n\n```bash\ngit submodule add https:\u002F\u002Fgithub.com\u002Fpinkforest\u002Fthreejs-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\u002Fphong\u002Fstandard 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\u002FGLB 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\u002Ftouch input, object selection        |\n\n## How It Works\n\nClaude Code automatically loads skill files from the `.claude\u002Fskills` 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\u002Faddons\u002F` 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\u002Fskills\u002F`\n3. Verify against [Three.js documentation](https:\u002F\u002Fthreejs.org\u002Fdocs\u002F)\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:\u002F\u002Fthreejs.org\u002F) - The 3D library these skills document\n","该项目提供了一系列Three.js技能文件，旨在为Claude Code提供创建3D元素和互动体验的基础知识。核心功能包括准确的API参考、构造函数签名、常见用例的工作代码示例、性能优化建议以及不同Three.js系统之间的集成模式。这些技能文件覆盖了从场景设置到几何体、材质、光照、纹理、动画、加载器、着色器及后期处理等多个方面，适合需要快速掌握Three.js开发技巧并希望高效构建3D Web应用的开发者使用。通过简单的克隆或子模块添加方式即可轻松集成到现有项目中，使得Claude Code能够根据请求上下文自动加载相应的技能文件，从而简化开发流程。",2,"2026-06-11 03:52:25","high_star"]