[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6G3EBQS48HX9B43PFF66HDY":3,"skill-same:01M6G3EBQS48HX9B43PFF66HDY":67},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":14,"repositoryHtmlUrl":48,"repositoryHomepageUrl":6,"ownerHtmlUrl":49,"ownerBlogUrl":50,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6G3EBQS48HX9B43PFF66HDY","threejs-skills",null,"Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.","reikiplanet\u002Fdaoskills","reikiplanet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96377599?v=4","01M6CVWCMD740YHQDK7E9QYBW4","Reiki Planet","01M6CVWCS4KXVA2CWFVJ43EAXK",0,"MIT","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\u002Fthreejs-skills\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"threejs skills","threejs","requests","safe","elements","visual","scenes","visual effects","three","use","interactive","js","visualizations","3D","https","create","webgl","github","graphics","3d graphics","2026-11-10 10:12:30",false,"---\nname: threejs-skills\ndescription: \"Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.\"\nsource: https:\u002F\u002Fgithub.com\u002FCloudAI-X\u002Fthreejs-skills\nrisk: safe\n---\n\n# Three.js Skills\n\nSystematically create high-quality 3D scenes and interactive experiences using Three.js best practices.\n\n## When to Use\n\n- Requests 3D visualizations or graphics (\"create a 3D model\", \"show in 3D\")\n- Wants interactive 3D experiences (\"rotating cube\", \"explorable scene\")\n- Needs WebGL or canvas-based rendering\n- Asks for animations, particles, or visual effects\n- Mentions Three.js, WebGL, or 3D rendering\n- Wants to visualize data in 3D space\n\n## Core Setup Pattern\n\n### 1. Essential Three.js Imports\n\nAlways use the correct CDN version (r128):\n\n```javascript\nimport * as THREE from \"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fthree.js\u002Fr128\u002Fthree.min.js\";\n```\n\n**CRITICAL**: Do NOT use example imports like `THREE.OrbitControls` - they won't work on the CDN.\n\n### 2. Scene Initialization\n\nEvery Three.js artifact needs these core components:\n\n```javascript\n\u002F\u002F Scene - contains all 3D objects\nconst scene = new THREE.Scene();\n\n\u002F\u002F Camera - defines viewing perspective\nconst camera = new THREE.PerspectiveCamera(\n  75, \u002F\u002F Field of view\n  window.innerWidth \u002F window.innerHeight, \u002F\u002F Aspect ratio\n  0.1, \u002F\u002F Near clipping plane\n  1000, \u002F\u002F Far clipping plane\n);\ncamera.position.z = 5;\n\n\u002F\u002F Renderer - draws the scene\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n```\n\n### 3. Animation Loop\n\nUse requestAnimationFrame for smooth rendering:\n\n```javascript\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  \u002F\u002F Update object transformations here\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Systematic Development Process\n\n### 1. Define the Scene\n\nStart by identifying:\n\n- **What objects** need to be rendered\n- **Camera position** and field of view\n- **Lighting setup** required\n- **Interaction model** (static, rotating, user-controlled)\n\n### 2. Build Geometry\n\nChoose appropriate geometry types:\n\n**Basic Shapes:**\n\n- `BoxGeometry` - cubes, rectangular prisms\n- `SphereGeometry` - spheres, planets\n- `CylinderGeometry` - cylinders, tubes\n- `PlaneGeometry` - flat surfaces, ground planes\n- `TorusGeometry` - donuts, rings\n\n**IMPORTANT**: Do NOT use `CapsuleGeometry` (introduced in r142, not available in r128)\n\n**Alternatives for capsules:**\n\n- Combine `CylinderGeometry` + 2 `SphereGeometry`\n- Use `SphereGeometry` with adjusted parameters\n- Create custom geometry with vertices\n\n### 3. Apply Materials\n\nChoose materials based on visual needs:\n\n**Common Materials:**\n\n- `MeshBasicMaterial` - unlit, flat colors (no lighting needed)\n- `MeshStandardMaterial` - physically-based, realistic (needs lighting)\n- `MeshPhongMaterial` - shiny surfaces with specular highlights\n- `MeshLambertMaterial` - matte surfaces, diffuse reflection\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({\n  color: 0x00ff00,\n  metalness: 0.5,\n  roughness: 0.5,\n});\n```\n\n### 4. Add Lighting\n\n**If using lit materials** (Standard, Phong, Lambert), add lights:\n\n```javascript\n\u002F\u002F Ambient light - general illumination\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambientLight);\n\n\u002F\u002F Directional light - like sunlight\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\ndirectionalLight.position.set(5, 5, 5);\nscene.add(directionalLight);\n```\n\n**Skip lighting** if using `MeshBasicMaterial` - it's unlit by design.\n\n### 5. Handle Responsiveness\n\nAlways add window resize handling:\n\n```javascript\nwindow.addEventListener(\"resize\", () => {\n  camera.aspect = window.innerWidth \u002F window.innerHeight;\n  camera.updateProjectionMatrix();\n  renderer.setSize(window.innerWidth, window.innerHeight);\n});\n```\n\n## Common Patterns\n\n### Rotating Object\n\n```javascript\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\n```\n\n### Custom Camera Controls (OrbitControls Alternative)\n\nSince `THREE.OrbitControls` isn't available on CDN, implement custom controls:\n\n```javascript\nlet isDragging = false;\nlet previousMousePosition = { x: 0, y: 0 };\n\nrenderer.domElement.addEventListener(\"mousedown\", () => {\n  isDragging = true;\n});\n\nrenderer.domElement.addEventListener(\"mouseup\", () => {\n  isDragging = false;\n});\n\nrenderer.domElement.addEventListener(\"mousemove\", (event) => {\n  if (isDragging) {\n    const deltaX = event.clientX - previousMousePosition.x;\n    const deltaY = event.clientY - previousMousePosition.y;\n\n    \u002F\u002F Rotate camera around scene\n    const rotationSpeed = 0.005;\n    camera.position.x += deltaX * rotationSpeed;\n    camera.position.y -= deltaY * rotationSpeed;\n    camera.lookAt(scene.position);\n  }\n\n  previousMousePosition = { x: event.clientX, y: event.clientY };\n});\n\n\u002F\u002F Zoom with mouse wheel\nrenderer.domElement.addEventListener(\"wheel\", (event) => {\n  event.preventDefault();\n  camera.position.z += event.deltaY * 0.01;\n  camera.position.z = Math.max(2, Math.min(20, camera.position.z)); \u002F\u002F Clamp\n});\n```\n\n### Raycasting for Object Selection\n\nDetect mouse clicks and hovers on 3D objects:\n\n```javascript\nconst raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nconst clickableObjects = []; \u002F\u002F Array of meshes that can be clicked\n\n\u002F\u002F Update mouse position\nwindow.addEventListener(\"mousemove\", (event) => {\n  mouse.x = (event.clientX \u002F window.innerWidth) * 2 - 1;\n  mouse.y = -(event.clientY \u002F window.innerHeight) * 2 + 1;\n});\n\n\u002F\u002F Detect clicks\nwindow.addEventListener(\"click\", () => {\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  if (intersects.length > 0) {\n    const clickedObject = intersects[0].object;\n    \u002F\u002F Handle click - change color, scale, etc.\n    clickedObject.material.color.set(0xff0000);\n  }\n});\n\n\u002F\u002F Hover effect in animation loop\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  \u002F\u002F Reset all objects\n  clickableObjects.forEach((obj) => {\n    obj.scale.set(1, 1, 1);\n  });\n\n  \u002F\u002F Highlight hovered object\n  if (intersects.length > 0) {\n    intersects[0].object.scale.set(1.2, 1.2, 1.2);\n    document.body.style.cursor = \"pointer\";\n  } else {\n    document.body.style.cursor = \"default\";\n  }\n\n  renderer.render(scene, camera);\n}\n```\n\n### Particle System\n\n```javascript\nconst particlesGeometry = new THREE.BufferGeometry();\nconst particlesCount = 1000;\nconst posArray = new Float32Array(particlesCount * 3);\n\nfor (let i = 0; i \u003C particlesCount * 3; i++) {\n  posArray[i] = (Math.random() - 0.5) * 10;\n}\n\nparticlesGeometry.setAttribute(\n  \"position\",\n  new THREE.BufferAttribute(posArray, 3),\n);\n\nconst particlesMaterial = new THREE.PointsMaterial({\n  size: 0.02,\n  color: 0xffffff,\n});\n\nconst particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\nscene.add(particlesMesh);\n```\n\n### User Interaction (Mouse Movement)\n\n```javascript\nlet mouseX = 0;\nlet mouseY = 0;\n\ndocument.addEventListener(\"mousemove\", (event) => {\n  mouseX = (event.clientX \u002F window.innerWidth) * 2 - 1;\n  mouseY = -(event.clientY \u002F window.innerHeight) * 2 + 1;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n  camera.position.x = mouseX * 2;\n  camera.position.y = mouseY * 2;\n  camera.lookAt(scene.position);\n  renderer.render(scene, camera);\n}\n```\n\n### Loading Textures\n\n```javascript\nconst textureLoader = new THREE.TextureLoader();\nconst texture = textureLoader.load(\"texture-url.jpg\");\n\nconst material = new THREE.MeshStandardMaterial({\n  map: texture,\n});\n```\n\n## Best Practices\n\n### Performance\n\n- **Reuse geometries and materials** when creating multiple similar objects\n- **Use `BufferGeometry`** for custom shapes (more efficient)\n- **Limit particle counts** to maintain 60fps (start with 1000-5000)\n- **Dispose of resources** when removing objects:\n  ```javascript\n  geometry.dispose();\n  material.dispose();\n  texture.dispose();\n  ```\n\n### Visual Quality\n\n- Always set `antialias: true` on renderer for smooth edges\n- Use appropriate camera FOV (45-75 degrees typical)\n- Position lights thoughtfully - avoid overlapping multiple bright lights\n- Add ambient + directional lighting for realistic scenes\n\n### Code Organization\n\n- Initialize scene, camera, renderer at the top\n- Group related objects (e.g., all particles in one group)\n- Keep animation logic in the animate function\n- Separate object creation into functions for complex scenes\n\n### Common Pitfalls to Avoid\n\n- ❌ Using `THREE.OrbitControls` - not available on CDN\n- ❌ Using `THREE.CapsuleGeometry` - requires r142+\n- ❌ Forgetting to add objects to scene with `scene.add()`\n- ❌ Using lit materials without adding lights\n- ❌ Not handling window resize\n- ❌ Forgetting to call `renderer.render()` in animation loop\n\n## Example Workflow\n\nUser: \"Create an interactive 3D sphere that responds to mouse movement\"\n\n1. **Setup**: Import Three.js (r128), create scene\u002Fcamera\u002Frenderer\n2. **Geometry**: Create `SphereGeometry(1, 32, 32)` for smooth sphere\n3. **Material**: Use `MeshStandardMaterial` for realistic look\n4. **Lighting**: Add ambient + directional lights\n5. **Interaction**: Track mouse position, update camera\n6. **Animation**: Rotate sphere, render continuously\n7. **Responsive**: Add window resize handler\n8. **Result**: Smooth, interactive 3D sphere ✓\n\n## Troubleshooting\n\n**Black screen \u002F Nothing renders:**\n\n- Check if objects added to scene\n- Verify camera position isn't inside objects\n- Ensure renderer.render() is called\n- Add lights if using lit materials\n\n**Poor performance:**\n\n- Reduce particle count\n- Lower geometry detail (segments)\n- Reuse materials\u002Fgeometries\n- Check browser console for errors\n\n**Objects not visible:**\n\n- Check object position vs camera position\n- Verify material has visible color\u002Fproperties\n- Ensure camera far plane includes objects\n- Add lighting if needed\n\n## Advanced Techniques\n\n### Visual Polish for Portfolio-Grade Rendering\n\n**Shadows:**\n\n```javascript\n\u002F\u002F Enable shadows on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap; \u002F\u002F Soft shadows\n\n\u002F\u002F Light that casts shadows\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\ndirectionalLight.position.set(5, 10, 5);\ndirectionalLight.castShadow = true;\n\n\u002F\u002F Configure shadow quality\ndirectionalLight.shadow.mapSize.width = 2048;\ndirectionalLight.shadow.mapSize.height = 2048;\ndirectionalLight.shadow.camera.near = 0.5;\ndirectionalLight.shadow.camera.far = 50;\n\nscene.add(directionalLight);\n\n\u002F\u002F Objects cast and receive shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n\u002F\u002F Ground plane receives shadows\nconst groundGeometry = new THREE.PlaneGeometry(20, 20);\nconst groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\nconst ground = new THREE.Mesh(groundGeometry, groundMaterial);\nground.rotation.x = -Math.PI \u002F 2;\nground.receiveShadow = true;\nscene.add(ground);\n```\n\n**Environment Maps & Reflections:**\n\n```javascript\n\u002F\u002F Create environment map from cubemap\nconst loader = new THREE.CubeTextureLoader();\nconst envMap = loader.load([\n  \"px.jpg\",\n  \"nx.jpg\", \u002F\u002F positive x, negative x\n  \"py.jpg\",\n  \"ny.jpg\", \u002F\u002F positive y, negative y\n  \"pz.jpg\",\n  \"nz.jpg\", \u002F\u002F positive z, negative z\n]);\n\nscene.environment = envMap; \u002F\u002F Affects all PBR materials\nscene.background = envMap; \u002F\u002F Optional: use as skybox\n\n\u002F\u002F Or apply to specific materials\nconst material = new THREE.MeshStandardMaterial({\n  metalness: 1.0,\n  roughness: 0.1,\n  envMap: envMap,\n});\n```\n\n**Tone Mapping & Output Encoding:**\n\n```javascript\n\u002F\u002F Improve color accuracy and HDR rendering\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.0;\nrenderer.outputEncoding = THREE.sRGBEncoding;\n\n\u002F\u002F Makes colors more vibrant and realistic\n```\n\n**Fog for Depth:**\n\n```javascript\n\u002F\u002F Linear fog\nscene.fog = new THREE.Fog(0xcccccc, 10, 50); \u002F\u002F color, near, far\n\n\u002F\u002F Or exponential fog (more realistic)\nscene.fog = new THREE.FogExp2(0xcccccc, 0.02); \u002F\u002F color, density\n```\n\n### Custom Geometry from Vertices\n\n```javascript\nconst geometry = new THREE.BufferGeometry();\nconst vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0]);\ngeometry.setAttribute(\"position\", new THREE.BufferAttribute(vertices, 3));\n```\n\n### Post-Processing Effects\n\nWhile advanced post-processing may not be available in r128 CDN, basic effects can be achieved with shaders and render targets.\n\n### Group Objects\n\n```javascript\nconst group = new THREE.Group();\ngroup.add(mesh1);\ngroup.add(mesh2);\ngroup.rotation.y = Math.PI \u002F 4;\nscene.add(group);\n```\n\n## Summary\n\nThree.js artifacts require systematic setup:\n\n1. Import correct CDN version (r128)\n2. Initialize scene, camera, renderer\n3. Create geometry + material = mesh\n4. Add lighting if using lit materials\n5. Implement animation loop\n6. Handle window resize\n7. Avoid r128 incompatible features\n\nFollow these patterns for reliable, performant 3D experiences.\n\n## Modern Three.js & Production Practices\n\nWhile this skill focuses on CDN-based Three.js (r128) for artifact compatibility, here's what you'd do in production environments:\n\n### Modular Imports with Build Tools\n\n```javascript\n\u002F\u002F In production with npm\u002Fvite\u002Fwebpack:\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls\";\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader\";\nimport { EffectComposer } from \"three\u002Fexamples\u002Fjsm\u002Fpostprocessing\u002FEffectComposer\";\n```\n\n**Benefits:**\n\n- Tree-shaking (smaller bundle sizes)\n- Access to full example library (OrbitControls, loaders, etc.)\n- Latest Three.js features (r150+)\n- TypeScript support\n\n### Animation Libraries (GSAP Integration)\n\n```javascript\n\u002F\u002F Smooth timeline-based animations\nimport gsap from \"gsap\";\n\n\u002F\u002F Instead of manual animation loops:\ngsap.to(mesh.position, {\n  x: 5,\n  duration: 2,\n  ease: \"power2.inOut\",\n});\n\n\u002F\u002F Complex sequences:\nconst timeline = gsap.timeline();\ntimeline\n  .to(mesh.rotation, { y: Math.PI * 2, duration: 2 })\n  .to(mesh.scale, { x: 2, y: 2, z: 2, duration: 1 }, \"-=1\");\n```\n\n**Why GSAP:**\n\n- Professional easing functions\n- Timeline control (pause, reverse, scrub)\n- Better than manual lerping for complex animations\n\n### Scroll-Based Interactions\n\n```javascript\n\u002F\u002F Sync 3D animations with page scroll\nlet scrollY = window.scrollY;\n\nwindow.addEventListener(\"scroll\", () => {\n  scrollY = window.scrollY;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  \u002F\u002F Rotate based on scroll position\n  mesh.rotation.y = scrollY * 0.001;\n\n  \u002F\u002F Move camera through scene\n  camera.position.y = -(scrollY \u002F window.innerHeight) * 10;\n\n  renderer.render(scene, camera);\n}\n```\n\n**Advanced scroll libraries:**\n\n- ScrollTrigger (GSAP plugin)\n- Locomotive Scroll\n- Lenis smooth scroll\n\n### Performance Optimization in Production\n\n```javascript\n\u002F\u002F Level of Detail (LOD)\nconst lod = new THREE.LOD();\nlod.addLevel(highDetailMesh, 0); \u002F\u002F Close up\nlod.addLevel(mediumDetailMesh, 10); \u002F\u002F Medium distance\nlod.addLevel(lowDetailMesh, 50); \u002F\u002F Far away\nscene.add(lod);\n\n\u002F\u002F Instanced meshes for many identical objects\nconst geometry = new THREE.BoxGeometry();\nconst material = new THREE.MeshStandardMaterial();\nconst instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);\n\n\u002F\u002F Set transforms for each instance\nconst matrix = new THREE.Matrix4();\nfor (let i = 0; i \u003C 1000; i++) {\n  matrix.setPosition(\n    Math.random() * 100,\n    Math.random() * 100,\n    Math.random() * 100,\n  );\n  instancedMesh.setMatrixAt(i, matrix);\n}\n```\n\n### Modern Loading Patterns\n\n```javascript\n\u002F\u002F In production, load 3D models:\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader\";\n\nconst loader = new GLTFLoader();\nloader.load(\"model.gltf\", (gltf) => {\n  scene.add(gltf.scene);\n\n  \u002F\u002F Traverse and setup materials\n  gltf.scene.traverse((child) => {\n    if (child.isMesh) {\n      child.castShadow = true;\n      child.receiveShadow = true;\n    }\n  });\n});\n```\n\n### When to Use What\n\n**CDN Approach (Current Skill):**\n\n- Quick prototypes and demos\n- Educational content\n- Artifacts and embedded experiences\n- No build step required\n\n**Production Build Approach:**\n\n- Client projects and portfolios\n- Complex applications\n- Need latest features (r150+)\n- Performance-critical applications\n- Team collaboration with version control\n\n### Recommended Production Stack\n\n```\nThree.js (latest) + Vite\u002FWebpack\n├── GSAP (animations)\n├── React Three Fiber (optional - React integration)\n├── Drei (helper components)\n├── Leva (debug GUI)\n└── Post-processing effects\n```\n\nThis skill provides CDN-compatible foundations. In production, you'd layer on these modern tools for professional results.\n","# Three.js Skills\n\nSystematically create high-quality 3D scenes and interactive experiences using Three.js best practices.\n\n## When to Use\n\n- Requests 3D visualizations or graphics (\"create a 3D model\", \"show in 3D\")\n- Wants interactive 3D experiences (\"rotating cube\", \"explorable scene\")\n- Needs WebGL or canvas-based rendering\n- Asks for animations, particles, or visual effects\n- Mentions Three.js, WebGL, or 3D rendering\n- Wants to visualize data in 3D space\n\n## Core Setup Pattern\n\n### 1. Essential Three.js Imports\n\nAlways use the correct CDN version (r128):\n\n```javascript\nimport * as THREE from \"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fthree.js\u002Fr128\u002Fthree.min.js\";\n```\n\n**CRITICAL**: Do NOT use example imports like `THREE.OrbitControls` - they won't work on the CDN.\n\n### 2. Scene Initialization\n\nEvery Three.js artifact needs these core components:\n\n```javascript\n\u002F\u002F Scene - contains all 3D objects\nconst scene = new THREE.Scene();\n\n\u002F\u002F Camera - defines viewing perspective\nconst camera = new THREE.PerspectiveCamera(\n  75, \u002F\u002F Field of view\n  window.innerWidth \u002F window.innerHeight, \u002F\u002F Aspect ratio\n  0.1, \u002F\u002F Near clipping plane\n  1000, \u002F\u002F Far clipping plane\n);\ncamera.position.z = 5;\n\n\u002F\u002F Renderer - draws the scene\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n```\n\n### 3. Animation Loop\n\nUse requestAnimationFrame for smooth rendering:\n\n```javascript\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  \u002F\u002F Update object transformations here\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Systematic Development Process\n\n### 1. Define the Scene\n\nStart by identifying:\n\n- **What objects** need to be rendered\n- **Camera position** and field of view\n- **Lighting setup** required\n- **Interaction model** (static, rotating, user-controlled)\n\n### 2. Build Geometry\n\nChoose appropriate geometry types:\n\n**Basic Shapes:**\n\n- `BoxGeometry` - cubes, rectangular prisms\n- `SphereGeometry` - spheres, planets\n- `CylinderGeometry` - cylinders, tubes\n- `PlaneGeometry` - flat surfaces, ground planes\n- `TorusGeometry` - donuts, rings\n\n**IMPORTANT**: Do NOT use `CapsuleGeometry` (introduced in r142, not available in r128)\n\n**Alternatives for capsules:**\n\n- Combine `CylinderGeometry` + 2 `SphereGeometry`\n- Use `SphereGeometry` with adjusted parameters\n- Create custom geometry with vertices\n\n### 3. Apply Materials\n\nChoose materials based on visual needs:\n\n**Common Materials:**\n\n- `MeshBasicMaterial` - unlit, flat colors (no lighting needed)\n- `MeshStandardMaterial` - physically-based, realistic (needs lighting)\n- `MeshPhongMaterial` - shiny surfaces with specular highlights\n- `MeshLambertMaterial` - matte surfaces, diffuse reflection\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({\n  color: 0x00ff00,\n  metalness: 0.5,\n  roughness: 0.5,\n});\n```\n\n### 4. Add Lighting\n\n**If using lit materials** (Standard, Phong, Lambert), add lights:\n\n```javascript\n\u002F\u002F Ambient light - general illumination\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\nscene.add(ambientLight);\n\n\u002F\u002F Directional light - like sunlight\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\ndirectionalLight.position.set(5, 5, 5);\nscene.add(directionalLight);\n```\n\n**Skip lighting** if using `MeshBasicMaterial` - it's unlit by design.\n\n### 5. Handle Responsiveness\n\nAlways add window resize handling:\n\n```javascript\nwindow.addEventListener(\"resize\", () => {\n  camera.aspect = window.innerWidth \u002F window.innerHeight;\n  camera.updateProjectionMatrix();\n  renderer.setSize(window.innerWidth, window.innerHeight);\n});\n```\n\n## Common Patterns\n\n### Rotating Object\n\n```javascript\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\n```\n\n### Custom Camera Controls (OrbitControls Alternative)\n\nSince `THREE.OrbitControls` isn't available on CDN, implement custom controls:\n\n```javascript\nlet isDragging = false;\nlet previousMousePosition = { x: 0, y: 0 };\n\nrenderer.domElement.addEventListener(\"mousedown\", () => {\n  isDragging = true;\n});\n\nrenderer.domElement.addEventListener(\"mouseup\", () => {\n  isDragging = false;\n});\n\nrenderer.domElement.addEventListener(\"mousemove\", (event) => {\n  if (isDragging) {\n    const deltaX = event.clientX - previousMousePosition.x;\n    const deltaY = event.clientY - previousMousePosition.y;\n\n    \u002F\u002F Rotate camera around scene\n    const rotationSpeed = 0.005;\n    camera.position.x += deltaX * rotationSpeed;\n    camera.position.y -= deltaY * rotationSpeed;\n    camera.lookAt(scene.position);\n  }\n\n  previousMousePosition = { x: event.clientX, y: event.clientY };\n});\n\n\u002F\u002F Zoom with mouse wheel\nrenderer.domElement.addEventListener(\"wheel\", (event) => {\n  event.preventDefault();\n  camera.position.z += event.deltaY * 0.01;\n  camera.position.z = Math.max(2, Math.min(20, camera.position.z)); \u002F\u002F Clamp\n});\n```\n\n### Raycasting for Object Selection\n\nDetect mouse clicks and hovers on 3D objects:\n\n```javascript\nconst raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nconst clickableObjects = []; \u002F\u002F Array of meshes that can be clicked\n\n\u002F\u002F Update mouse position\nwindow.addEventListener(\"mousemove\", (event) => {\n  mouse.x = (event.clientX \u002F window.innerWidth) * 2 - 1;\n  mouse.y = -(event.clientY \u002F window.innerHeight) * 2 + 1;\n});\n\n\u002F\u002F Detect clicks\nwindow.addEventListener(\"click\", () => {\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  if (intersects.length > 0) {\n    const clickedObject = intersects[0].object;\n    \u002F\u002F Handle click - change color, scale, etc.\n    clickedObject.material.color.set(0xff0000);\n  }\n});\n\n\u002F\u002F Hover effect in animation loop\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  raycaster.setFromCamera(mouse, camera);\n  const intersects = raycaster.intersectObjects(clickableObjects);\n\n  \u002F\u002F Reset all objects\n  clickableObjects.forEach((obj) => {\n    obj.scale.set(1, 1, 1);\n  });\n\n  \u002F\u002F Highlight hovered object\n  if (intersects.length > 0) {\n    intersects[0].object.scale.set(1.2, 1.2, 1.2);\n    document.body.style.cursor = \"pointer\";\n  } else {\n    document.body.style.cursor = \"default\";\n  }\n\n  renderer.render(scene, camera);\n}\n```\n\n### Particle System\n\n```javascript\nconst particlesGeometry = new THREE.BufferGeometry();\nconst particlesCount = 1000;\nconst posArray = new Float32Array(particlesCount * 3);\n\nfor (let i = 0; i \u003C particlesCount * 3; i++) {\n  posArray[i] = (Math.random() - 0.5) * 10;\n}\n\nparticlesGeometry.setAttribute(\n  \"position\",\n  new THREE.BufferAttribute(posArray, 3),\n);\n\nconst particlesMaterial = new THREE.PointsMaterial({\n  size: 0.02,\n  color: 0xffffff,\n});\n\nconst particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\nscene.add(particlesMesh);\n```\n\n### User Interaction (Mouse Movement)\n\n```javascript\nlet mouseX = 0;\nlet mouseY = 0;\n\ndocument.addEventListener(\"mousemove\", (event) => {\n  mouseX = (event.clientX \u002F window.innerWidth) * 2 - 1;\n  mouseY = -(event.clientY \u002F window.innerHeight) * 2 + 1;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n  camera.position.x = mouseX * 2;\n  camera.position.y = mouseY * 2;\n  camera.lookAt(scene.position);\n  renderer.render(scene, camera);\n}\n```\n\n### Loading Textures\n\n```javascript\nconst textureLoader = new THREE.TextureLoader();\nconst texture = textureLoader.load(\"texture-url.jpg\");\n\nconst material = new THREE.MeshStandardMaterial({\n  map: texture,\n});\n```\n\n## Best Practices\n\n### Performance\n\n- **Reuse geometries and materials** when creating multiple similar objects\n- **Use `BufferGeometry`** for custom shapes (more efficient)\n- **Limit particle counts** to maintain 60fps (start with 1000-5000)\n- **Dispose of resources** when removing objects:\n  ```javascript\n  geometry.dispose();\n  material.dispose();\n  texture.dispose();\n  ```\n\n### Visual Quality\n\n- Always set `antialias: true` on renderer for smooth edges\n- Use appropriate camera FOV (45-75 degrees typical)\n- Position lights thoughtfully - avoid overlapping multiple bright lights\n- Add ambient + directional lighting for realistic scenes\n\n### Code Organization\n\n- Initialize scene, camera, renderer at the top\n- Group related objects (e.g., all particles in one group)\n- Keep animation logic in the animate function\n- Separate object creation into functions for complex scenes\n\n### Common Pitfalls to Avoid\n\n- ❌ Using `THREE.OrbitControls` - not available on CDN\n- ❌ Using `THREE.CapsuleGeometry` - requires r142+\n- ❌ Forgetting to add objects to scene with `scene.add()`\n- ❌ Using lit materials without adding lights\n- ❌ Not handling window resize\n- ❌ Forgetting to call `renderer.render()` in animation loop\n\n## Example Workflow\n\nUser: \"Create an interactive 3D sphere that responds to mouse movement\"\n\n1. **Setup**: Import Three.js (r128), create scene\u002Fcamera\u002Frenderer\n2. **Geometry**: Create `SphereGeometry(1, 32, 32)` for smooth sphere\n3. **Material**: Use `MeshStandardMaterial` for realistic look\n4. **Lighting**: Add ambient + directional lights\n5. **Interaction**: Track mouse position, update camera\n6. **Animation**: Rotate sphere, render continuously\n7. **Responsive**: Add window resize handler\n8. **Result**: Smooth, interactive 3D sphere ✓\n\n## Troubleshooting\n\n**Black screen \u002F Nothing renders:**\n\n- Check if objects added to scene\n- Verify camera position isn't inside objects\n- Ensure renderer.render() is called\n- Add lights if using lit materials\n\n**Poor performance:**\n\n- Reduce particle count\n- Lower geometry detail (segments)\n- Reuse materials\u002Fgeometries\n- Check browser console for errors\n\n**Objects not visible:**\n\n- Check object position vs camera position\n- Verify material has visible color\u002Fproperties\n- Ensure camera far plane includes objects\n- Add lighting if needed\n\n## Advanced Techniques\n\n### Visual Polish for Portfolio-Grade Rendering\n\n**Shadows:**\n\n```javascript\n\u002F\u002F Enable shadows on renderer\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap; \u002F\u002F Soft shadows\n\n\u002F\u002F Light that casts shadows\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\ndirectionalLight.position.set(5, 10, 5);\ndirectionalLight.castShadow = true;\n\n\u002F\u002F Configure shadow quality\ndirectionalLight.shadow.mapSize.width = 2048;\ndirectionalLight.shadow.mapSize.height = 2048;\ndirectionalLight.shadow.camera.near = 0.5;\ndirectionalLight.shadow.camera.far = 50;\n\nscene.add(directionalLight);\n\n\u002F\u002F Objects cast and receive shadows\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n\u002F\u002F Ground plane receives shadows\nconst groundGeometry = new THREE.PlaneGeometry(20, 20);\nconst groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\nconst ground = new THREE.Mesh(groundGeometry, groundMaterial);\nground.rotation.x = -Math.PI \u002F 2;\nground.receiveShadow = true;\nscene.add(ground);\n```\n\n**Environment Maps & Reflections:**\n\n```javascript\n\u002F\u002F Create environment map from cubemap\nconst loader = new THREE.CubeTextureLoader();\nconst envMap = loader.load([\n  \"px.jpg\",\n  \"nx.jpg\", \u002F\u002F positive x, negative x\n  \"py.jpg\",\n  \"ny.jpg\", \u002F\u002F positive y, negative y\n  \"pz.jpg\",\n  \"nz.jpg\", \u002F\u002F positive z, negative z\n]);\n\nscene.environment = envMap; \u002F\u002F Affects all PBR materials\nscene.background = envMap; \u002F\u002F Optional: use as skybox\n\n\u002F\u002F Or apply to specific materials\nconst material = new THREE.MeshStandardMaterial({\n  metalness: 1.0,\n  roughness: 0.1,\n  envMap: envMap,\n});\n```\n\n**Tone Mapping & Output Encoding:**\n\n```javascript\n\u002F\u002F Improve color accuracy and HDR rendering\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.0;\nrenderer.outputEncoding = THREE.sRGBEncoding;\n\n\u002F\u002F Makes colors more vibrant and realistic\n```\n\n**Fog for Depth:**\n\n```javascript\n\u002F\u002F Linear fog\nscene.fog = new THREE.Fog(0xcccccc, 10, 50); \u002F\u002F color, near, far\n\n\u002F\u002F Or exponential fog (more realistic)\nscene.fog = new THREE.FogExp2(0xcccccc, 0.02); \u002F\u002F color, density\n```\n\n### Custom Geometry from Vertices\n\n```javascript\nconst geometry = new THREE.BufferGeometry();\nconst vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0]);\ngeometry.setAttribute(\"position\", new THREE.BufferAttribute(vertices, 3));\n```\n\n### Post-Processing Effects\n\nWhile advanced post-processing may not be available in r128 CDN, basic effects can be achieved with shaders and render targets.\n\n### Group Objects\n\n```javascript\nconst group = new THREE.Group();\ngroup.add(mesh1);\ngroup.add(mesh2);\ngroup.rotation.y = Math.PI \u002F 4;\nscene.add(group);\n```\n\n## Summary\n\nThree.js artifacts require systematic setup:\n\n1. Import correct CDN version (r128)\n2. Initialize scene, camera, renderer\n3. Create geometry + material = mesh\n4. Add lighting if using lit materials\n5. Implement animation loop\n6. Handle window resize\n7. Avoid r128 incompatible features\n\nFollow these patterns for reliable, performant 3D experiences.\n\n## Modern Three.js & Production Practices\n\nWhile this skill focuses on CDN-based Three.js (r128) for artifact compatibility, here's what you'd do in production environments:\n\n### Modular Imports with Build Tools\n\n```javascript\n\u002F\u002F In production with npm\u002Fvite\u002Fwebpack:\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three\u002Fexamples\u002Fjsm\u002Fcontrols\u002FOrbitControls\";\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader\";\nimport { EffectComposer } from \"three\u002Fexamples\u002Fjsm\u002Fpostprocessing\u002FEffectComposer\";\n```\n\n**Benefits:**\n\n- Tree-shaking (smaller bundle sizes)\n- Access to full example library (OrbitControls, loaders, etc.)\n- Latest Three.js features (r150+)\n- TypeScript support\n\n### Animation Libraries (GSAP Integration)\n\n```javascript\n\u002F\u002F Smooth timeline-based animations\nimport gsap from \"gsap\";\n\n\u002F\u002F Instead of manual animation loops:\ngsap.to(mesh.position, {\n  x: 5,\n  duration: 2,\n  ease: \"power2.inOut\",\n});\n\n\u002F\u002F Complex sequences:\nconst timeline = gsap.timeline();\ntimeline\n  .to(mesh.rotation, { y: Math.PI * 2, duration: 2 })\n  .to(mesh.scale, { x: 2, y: 2, z: 2, duration: 1 }, \"-=1\");\n```\n\n**Why GSAP:**\n\n- Professional easing functions\n- Timeline control (pause, reverse, scrub)\n- Better than manual lerping for complex animations\n\n### Scroll-Based Interactions\n\n```javascript\n\u002F\u002F Sync 3D animations with page scroll\nlet scrollY = window.scrollY;\n\nwindow.addEventListener(\"scroll\", () => {\n  scrollY = window.scrollY;\n});\n\nfunction animate() {\n  requestAnimationFrame(animate);\n\n  \u002F\u002F Rotate based on scroll position\n  mesh.rotation.y = scrollY * 0.001;\n\n  \u002F\u002F Move camera through scene\n  camera.position.y = -(scrollY \u002F window.innerHeight) * 10;\n\n  renderer.render(scene, camera);\n}\n```\n\n**Advanced scroll libraries:**\n\n- ScrollTrigger (GSAP plugin)\n- Locomotive Scroll\n- Lenis smooth scroll\n\n### Performance Optimization in Production\n\n```javascript\n\u002F\u002F Level of Detail (LOD)\nconst lod = new THREE.LOD();\nlod.addLevel(highDetailMesh, 0); \u002F\u002F Close up\nlod.addLevel(mediumDetailMesh, 10); \u002F\u002F Medium distance\nlod.addLevel(lowDetailMesh, 50); \u002F\u002F Far away\nscene.add(lod);\n\n\u002F\u002F Instanced meshes for many identical objects\nconst geometry = new THREE.BoxGeometry();\nconst material = new THREE.MeshStandardMaterial();\nconst instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);\n\n\u002F\u002F Set transforms for each instance\nconst matrix = new THREE.Matrix4();\nfor (let i = 0; i \u003C 1000; i++) {\n  matrix.setPosition(\n    Math.random() * 100,\n    Math.random() * 100,\n    Math.random() * 100,\n  );\n  instancedMesh.setMatrixAt(i, matrix);\n}\n```\n\n### Modern Loading Patterns\n\n```javascript\n\u002F\u002F In production, load 3D models:\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader\";\n\nconst loader = new GLTFLoader();\nloader.load(\"model.gltf\", (gltf) => {\n  scene.add(gltf.scene);\n\n  \u002F\u002F Traverse and setup materials\n  gltf.scene.traverse((child) => {\n    if (child.isMesh) {\n      child.castShadow = true;\n      child.receiveShadow = true;\n    }\n  });\n});\n```\n\n### When to Use What\n\n**CDN Approach (Current Skill):**\n\n- Quick prototypes and demos\n- Educational content\n- Artifacts and embedded experiences\n- No build step required\n\n**Production Build Approach:**\n\n- Client projects and portfolios\n- Complex applications\n- Need latest features (r150+)\n- Performance-critical applications\n- Team collaboration with version control\n\n### Recommended Production Stack\n\n```\nThree.js (latest) + Vite\u002FWebpack\n├── GSAP (animations)\n├── React Three Fiber (optional - React integration)\n├── Drei (helper components)\n├── Leva (debug GUI)\n└── Post-processing effects\n```\n\nThis skill provides CDN-compatible foundations. In production, you'd layer on these modern tools for professional results.\n",{"name":5,"risk":22,"source":44,"description":7},"https:\u002F\u002Fgithub.com\u002FCloudAI-X\u002Fthreejs-skills","master","dff58085da947e81e8418c922055644bf0082b1b","skills\u002Fdevelopment\u002Fthreejs-skills","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills","https:\u002F\u002Fgithub.com\u002Freikiplanet","https:\u002F\u002Fwww.reiki-planet.com","Reiki Planet Game","2026-03-29 06:02:29",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add reikiplanet\u002Fdaoskills --skill threejs-skills",{"tool":59,"command":60},"bunx","bunx skills add reikiplanet\u002Fdaoskills --skill threejs-skills",{"tool":62,"command":63},"pnpm","pnpm dlx skills add reikiplanet\u002Fdaoskills --skill threejs-skills","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\u002Fthreejs-skills\u002FSKILL.md",true,[],[68,95,107,121,141,164],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":39},"01M6G614JTEQJHPT8AKK3YQ18S","web-games","Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fweb-games\u002FSKILL.md",[],[75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94],"games","web games","web","grep","principles","selection","community","framework selection","edit","write","read","pwa","game","web browser","game development","Optimization","framework","browser","development","webgpu",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":39},"01M6G611H2YGV0GZFP90D38ZMJ","vr-ar","VR\u002FAR development principles. Comfort, interaction, performance requirements.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fvr-ar\u002FSKILL.md",[],[102,103,93,104,105,81,83,84,85,78,106,79],"ar","vr ar","interaction","requirements","performance",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":39},"01M6G60XNMHAMV1SV0EJ1CX0AY","templates","Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Ftemplates\u002FSKILL.md",[],[109,114,115,116,117,118,81,28,85,119,120,78],"project scaffolding","From Scratch","tech","project","scaffolding","projects","applications",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":39},"01M6G60T0GATMK3Q5H8GDC1Z8S","wcag-audit-patterns","Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fwcag-audit-patterns\u002FSKILL.md",[],[128,129,130,131,132,81,133,134,135,136,28,137,138,139,140],"wcag audit patterns","wcag audit","patterns","WCAG","audit","manual","with","automated testing","guidance","remediation","verification","accessibility","testing",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":147,"publishedAt":39},"01M6G60PMCHW1FRZ63F931QK3R","vulnerability-scanner","Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fvulnerability-scanner\u002FSKILL.md",[],[148,149,150,151,152,153,154,155,81,85,78,156,79,157,158,159,160,161,162,163],"scanner","vulnerability scanner","vulnerability","prioritization","2025","mapping","chain","supply chain","Bash","analysis","risk","owasp","supply chain security","security","supply","advanced",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":170,"publishedAt":39},"01M6G60JZBB8DK0W3DSG1WNMZK","threat-modeling-expert","Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fthreat-modeling-expert\u002FSKILL.md",[],[171,172,173,174,175,176,177,178,161,28,179,180,181,81,182,183,184,158,185,186],"modeling","threat modeling expert","threat modeling","expert","threat","risk assessment","architecture review","architecture","security architecture review","trees","security architecture","security requirement extraction","assessment","extraction","review","stride"]