[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-71cef47c-62ad-4183-97eb-5241962139b4":3,"$fVpBjAmFpZPBqFbOji1ry2Mi8yL3z1-tJyN3BD1Zx5n8":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"71cef47c-62ad-4183-97eb-5241962139b4","threejs-skills","使用Three.js创建3D场景、交互体验和视觉效果。当用户请求3D图形、WebGL体验、3D可视化、动画或交互式3D元素时使用。","cat_design_graphic","mod_design","sickn33,design","---\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.\"\nrisk: safe\nsource: \"https:\u002F\u002Fgithub.com\u002FCloudAI-X\u002Fthreejs-skills\"\ndate_added: \"2026-02-27\"\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- 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\nUse ES module import maps for modern Three.js (r183+):\n\n```html\n\u003Cscript type=\"importmap\">\n{\n  \"imports\": {\n    \"three\": \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fthree@0.183.0\u002Fbuild\u002Fthree.module.js\",\n    \"three\u002Faddons\u002F\": \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fthree@0.183.0\u002Fexamples\u002Fjsm\u002F\"\n  }\n}\n\u003C\u002Fscript>\n\u003Cscript type=\"module\">\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three\u002Faddons\u002Fcontrols\u002FOrbitControls.js\";\n\u003C\u002Fscript>\n```\n\nFor production with npm\u002Fvite\u002Fwebpack:\n\n```javascript\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three\u002Faddons\u002Fcontrols\u002FOrbitControls.js\";\n```\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 `renderer.setAnimationLoop()` (preferred) or `requestAnimationFrame`:\n\n```javascript\n\u002F\u002F Preferred: setAnimationLoop (handles WebXR compatibility)\nrenderer.setAnimationLoop(() => {\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\n  renderer.render(scene, camera);\n});\n\n\u002F\u002F Alternative: manual requestAnimationFrame\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.x += 0.01;\n  mesh.rotation.y += 0.01;\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**CapsuleGeometry** is available (stable since r142):\n\n```javascript\nnew THREE.CapsuleGeometry(0.5, 1, 4, 8); \u002F\u002F radius, length, capSegments, radialSegments\n```\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### OrbitControls\n\nWith import maps or build tools, OrbitControls works directly:\n\n```javascript\nimport { OrbitControls } from \"three\u002Faddons\u002Fcontrols\u002FOrbitControls.js\";\n\nconst controls = new OrbitControls(camera, renderer.domElement);\ncontrols.enableDamping = true;\n\n\u002F\u002F Update in animation loop\nrenderer.setAnimationLoop(() => {\n  controls.update();\n  renderer.render(scene, camera);\n});\n```\n\n### Custom Camera Controls (Alternative)\n\nFor lightweight custom controls without importing OrbitControls:\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 `outputEncoding` instead of `outputColorSpace` (renamed in r152)\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- ❌ Using `THREE.Clock` without considering `THREE.Timer` (recommended in r183)\n\n## Example Workflow\n\nUser: \"Create an interactive 3D sphere that responds to mouse movement\"\n\n1. **Setup**: Import Three.js, 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.outputColorSpace = THREE.SRGBColorSpace; \u002F\u002F Was outputEncoding in older versions\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\nPost-processing effects are available via import maps or build tools. See `threejs-postprocessing` skill for EffectComposer, bloom, DOF, and more.\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 Three.js via import maps or build tools\n2. Initialize scene, camera, renderer\n3. Create geometry + material = mesh\n4. Add lighting if using lit materials\n5. Implement animation loop (prefer `setAnimationLoop`)\n6. Handle window resize\n7. Set `renderer.outputColorSpace = THREE.SRGBColorSpace`\n\nFollow these patterns for reliable, performant 3D experiences.\n\n## Modern Three.js Practices (r183)\n\n### Modular Imports\n\n```javascript\n\u002F\u002F With npm\u002Fvite\u002Fwebpack:\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three\u002Faddons\u002Fcontrols\u002FOrbitControls.js\";\nimport { GLTFLoader } from \"three\u002Faddons\u002Floaders\u002FGLTFLoader.js\";\nimport { EffectComposer } from \"three\u002Faddons\u002Fpostprocessing\u002FEffectComposer.js\";\n```\n\n### WebGPU Renderer (Alternative)\n\nThree.js r183 includes a WebGPU renderer as an alternative to WebGL:\n\n```javascript\nimport { WebGPURenderer } from \"three\u002Faddons\u002Frenderers\u002Fwebgpu\u002FWebGPURenderer.js\";\n\nconst renderer = new WebGPURenderer({ antialias: true });\nawait renderer.init();\nrenderer.setSize(window.innerWidth, window.innerHeight);\n```\n\nWebGPU uses TSL (Three.js Shading Language) instead of GLSL for custom shaders. See `threejs-shaders` for details.\n\n### Timer (r183 Recommended)\n\n`THREE.Timer` is recommended over `THREE.Clock` as of r183:\n\n```javascript\nconst timer = new THREE.Timer();\n\nrenderer.setAnimationLoop(() => {\n  timer.update();\n  const delta = timer.getDelta();\n  const elapsed = timer.getElapsed();\n\n  mesh.rotation.y += delta;\n  renderer.render(scene, camera);\n});\n```\n\n**Benefits over Clock:**\n\n- Not affected by page visibility (pauses when tab is hidden)\n- Cleaner API design\n- Better integration with `setAnimationLoop`\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**Import Map Approach:**\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- Performance-critical applications\n- Team collaboration with version control\n\n### Recommended Production Stack\n\n```\nThree.js r183 + Vite\n├── GSAP (animations)\n├── React Three Fiber (optional - React integration)\n├── Drei (helper components)\n├── Leva (debug GUI)\n└── Post-processing effects\n```\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,196,859,"2026-05-16 13:44:22",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"视觉创意","graphic","mdi-brush","海报、Logo、插画等视觉创作",2,48,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"0715d8d1-4fda-4856-8aba-7496f60afb28","1.0.0","threejs-skills.zip",6579,"uploads\u002Fskills\u002F71cef47c-62ad-4183-97eb-5241962139b4\u002Fthreejs-skills.zip","8fef5b4c0a7d7b750557763c62b9d2f3cb740b0b3ee778519dfff4dc396ea186","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":18769}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]