@leejungkiin/awkit 1.5.5 → 1.5.6

package/skill-packs/threejs/skills/threejs-objects/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: threejs-objects
+description: "three.js scene graph objects: Object3D transforms and hierarchy, Group, Mesh, InstancedMesh, SkinnedMesh, BatchedMesh, LOD, Line/LineLoop/LineSegments, Points, Sprite, Bone, Skeleton, ClippingGroup; interaction via Raycaster, Layers masks, and EventDispatcher patterns. Use when building scene hierarchies, picking objects with Raycaster, or configuring instanced/skinned meshes; for pure vector math use threejs-math; for skeletal clips use threejs-animation."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- Parent/child relationships, `position/rotation/scale`, `matrixAutoUpdate`, `updateMatrixWorld`
+- Choosing mesh types: static vs instanced vs skinned vs batched LOD
+- **Picking**: `Raycaster.setFromCamera`, `intersectObjects`, recursive flag, face/uv results
+- **Layers**: selective visibility for cameras/lights/objects
+
+**IMPORTANT: objects vs math**
+
+| Need | Skill |
+|------|--------|
+| Scene graph + picking | **threejs-objects** |
+| Box/ray math only | **threejs-math** |
+
+**Trigger phrases include:**
+
+- "Object3D", "InstancedMesh", "SkinnedMesh", "Raycaster", "layers"
+- "父子节点", "射线拾取", "图层"
+
+## How to use this skill
+
+1. **Compose** scenes with `Group` and transforms; minimize deep hierarchies where possible.
+2. **Instancing** — set per-instance matrices; understand `count` and frustum culling behavior.
+3. **SkinnedMesh** — bind skeleton; clips in **threejs-animation**; skinning material flags in **threejs-materials**.
+4. **Picking** — normalize device coords, set ray from camera, filter by layers, validate intersections are sorted by distance before processing.
+5. **Events** — `EventDispatcher` on custom objects; patterns only, not DOM frameworks.
+6. **Clipping** — `ClippingGroup` usage per docs when user needs sectional cuts.
+7. **Dispose** — call `dispose()` on geometries/materials/textures when removing objects permanently.
+
+### Example: Raycaster picking with validation
+
+```javascript
+import * as THREE from 'three';
+
+const raycaster = new THREE.Raycaster();
+const pointer = new THREE.Vector2();
+
+function onPointerMove(event) {
+  // Normalize device coordinates (-1 to +1)
+  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+}
+
+function pick(camera, scene) {
+  raycaster.setFromCamera(pointer, camera);
+  const intersections = raycaster.intersectObjects(scene.children, true);
+
+  // Validate: intersections are sorted by distance (nearest first)
+  if (intersections.length > 0) {
+    console.log('Nearest hit:', intersections[0].object.name,
+                'at distance:', intersections[0].distance);
+  }
+  return intersections;
+}
+```
+
+See [examples/workflow-raycaster-pick.md](examples/workflow-raycaster-pick.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Core | https://threejs.org/docs/Object3D.html |
+| Objects | https://threejs.org/docs/Mesh.html |
+| Objects | https://threejs.org/docs/InstancedMesh.html |
+| Core | https://threejs.org/docs/Raycaster.html |
+
+## Scope
+
+- **In scope:** Object3D graph, renderable object types, raycasting, layers, dispatcher basics.
+- **Out of scope:** Physics engines; XR input mapping (**threejs-webxr**).
+
+## Common pitfalls and best practices
+
+- Forgetting `updateMatrixWorld` before world-space ray tests on moved objects.
+- Raycaster without `layers` set picks unintended objects—set masks consistently on camera and objects.
+- InstancedMesh raycast hits need per-instance handling—check docs for your version.
+
+## Documentation and version
+
+`Object3D`, mesh types, `Raycaster`, and `Layers` are documented under [Objects](https://threejs.org/docs/#Objects) and [Core](https://threejs.org/docs/Raycaster.html) in [three.js docs](https://threejs.org/docs/). Behavior of picking and layers can shift slightly—link the exact page for the user’s three.js line.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `Object3D`, `Mesh`, `InstancedMesh`, `Raycaster`, or `Layers` as needed.
+2. Pair skeletal animation with **threejs-animation** and skinned mesh setup.
+3. Route pure linear-algebra questions without a scene graph to **threejs-math**.
+4. Route XR input to **threejs-webxr** when sessions/controllers are involved.
+5. Mention `dispose()` for geometries/materials when removing objects permanently.
+
+## References
+
+- https://threejs.org/docs/Object3D.html
+- https://threejs.org/docs/Raycaster.html
+- https://threejs.org/docs/Layers.html
+- https://threejs.org/docs/InstancedMesh.html
+
+## Keywords
+
+**English:** object3d, mesh, instancedmesh, skinnedmesh, raycaster, layers, scene graph, three.js
+
+**中文：** 场景图、Object3D、Mesh、实例化、骨骼网格、射线拾取、图层、three.js

package/skill-packs/threejs/skills/threejs-objects/examples/workflow-raycaster-pick.md

@@ -0,0 +1,17 @@
+# Workflow: pick mesh with Raycaster
+
+## Steps
+
+1. `const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2();`
+
+2. On pointer event: `pointer.x = (x / width) * 2 - 1; pointer.y = -(y / height) * 2 + 1;`
+
+3. `raycaster.setFromCamera(pointer, camera);`
+
+4. `const hits = raycaster.intersectObjects(scene.children, true);` — tune recursive/layers.
+
+5. Read `hits[0].object`, `face`, `uv`, `distance` per application.
+
+6. Throttle on pointermove if needed for performance.
+
+Details: https://threejs.org/docs/Raycaster.html

package/skill-packs/threejs/skills/threejs-postprocessing/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: threejs-postprocessing
+description: "Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules. Use when building composer chains for bloom, SSAO, or other screen-space effects; not for basic renderer tone mapping alone (threejs-renderers)."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `EffectComposer`, `RenderPass`, stacking passes, resize of composer
+- Bloom, SSAO, SSR, DOF, outline, glitch, film grain, TAA—**addon** pass names
+- `ShaderPass` with shader modules from Addons **Shaders** group
+
+**IMPORTANT: postprocessing vs renderers vs node-tsl**
+
+| Pipeline | Skill |
+|----------|--------|
+| Classic composer + passes | **threejs-postprocessing** |
+| Renderer output color/tone only | **threejs-renderers** |
+| Node/TSL post nodes | **threejs-node-tsl** |
+
+**Trigger phrases include:**
+
+- "EffectComposer", "RenderPass", "UnrealBloomPass", "SSAOPass", "后期"
+- "泛光", "环境光遮蔽", "描边"
+
+## How to use this skill
+
+1. **Chain** — `RenderPass` → effect passes → output; ensure size matches renderer and DPR changes.
+2. **Resize** — call `composer.setSize` alongside renderer resize workflows.
+3. **Half-float** — many passes expect appropriate render target types; cite docs for your version.
+4. **Performance** — each pass has cost; profile with `renderer.info` to check draw calls and triangles.
+5. **Validate output** — render a simple test scene through the composer first to verify passes work before adding complexity.
+6. **Shader modules** — link Addons **Shaders** list instead of inlining huge GLSL in SKILL.
+7. **Output** — final pass should align color management with renderer (**threejs-renderers**).
+8. **Contrast** — mention core `PostProcessing` class separately to avoid name collision confusion.
+
+### Example: EffectComposer with bloom and debugging
+
+```javascript
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+
+const bloomPass = new UnrealBloomPass(
+  new THREE.Vector2(window.innerWidth, window.innerHeight),
+  1.5, // strength
+  0.4, // radius
+  0.85 // threshold
+);
+composer.addPass(bloomPass);
+
+// Resize handler — must match renderer size
+window.addEventListener('resize', () => {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  composer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Render loop: use composer.render() instead of renderer.render()
+function animate() {
+  composer.render();
+}
+renderer.setAnimationLoop(animate);
+```
+
+See [examples/workflow-composer-bloom.md](examples/workflow-composer-bloom.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Postprocessing | https://threejs.org/docs/EffectComposer.html |
+| Postprocessing | https://threejs.org/docs/RenderPass.html |
+| Postprocessing | https://threejs.org/docs/UnrealBloomPass.html |
+| Shaders (addon modules) | https://threejs.org/docs/module-CopyShader.html |
+
+## Scope
+
+- **In scope:** Addon postprocessing passes and composer wiring; pointers to shader modules.
+- **Out of scope:** Custom full-screen pipeline design outside three docs; engine-level frame graphs.
+
+## Common pitfalls and best practices
+
+- Forgetting composer resize produces smeared or low-res effects.
+- Pass order matters—bloom often after main scene pass, outline may need masks.
+- Some passes need depth—ensure depth buffer availability per pass docs.
+
+## Documentation and version
+
+Addon passes live under [Postprocessing](https://threejs.org/docs/#Postprocessing) and **Shaders** modules in [three.js docs](https://threejs.org/docs/). Pass constructors and required buffers change across versions—link the specific pass page (e.g. `UnrealBloomPass`) rather than guessing uniform names.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `EffectComposer`, `RenderPass`, or the named pass (`SSAOPass`, …).
+2. Contrast **addon** composer stack with core `PostProcessing` + **threejs-node-tsl** when users mix terms.
+3. Require `setSize` on composer when **threejs-renderers** resizes.
+4. Point to **Shaders** group for raw shader modules used by `ShaderPass`.
+5. Warn about VR frame-time when stacking heavy passes (**threejs-webxr**).
+
+## References
+
+- https://threejs.org/docs/#Postprocessing
+- https://threejs.org/docs/EffectComposer.html
+- https://threejs.org/docs/RenderPass.html
+
+## Keywords
+
+**English:** effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js
+
+**中文：** 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js

package/skill-packs/threejs/skills/threejs-postprocessing/examples/workflow-composer-bloom.md

@@ -0,0 +1,15 @@
+# Workflow: minimal composer with bloom
+
+## Steps
+
+1. Create `EffectComposer(renderer)`.
+
+2. Add `RenderPass(scene, camera)`.
+
+3. Add `UnrealBloomPass` with strength/radius/threshold per [UnrealBloomPass](https://threejs.org/docs/UnrealBloomPass.html).
+
+4. In animation loop: `composer.render()` instead of `renderer.render` for the final path—or follow the exact pattern from current examples (some versions use `composer.render()` only).
+
+5. On resize: `composer.setSize(width, height)`.
+
+Verify against a known three.js example filename from the official repo for your version—API details shift between releases.

package/skill-packs/threejs/skills/threejs-renderers/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: threejs-renderers
+description: "Core rendering pipeline for three.js using WebGLRenderer and WebGPURenderer, canvas sizing, device pixel ratio, color space and tone mapping, output encoding, WebGL/WebGPU render targets, Info statistics, and addon overlay renderers (CSS2D/CSS3D/SVG). Use when tuning the draw loop, performance, or switching WebGPU vs WebGL; for EffectComposer passes use threejs-postprocessing; for XR session lifecycle use threejs-webxr; for shader graphs use threejs-node-tsl."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `WebGLRenderer` or `WebGPURenderer` creation, `setSize`, `setPixelRatio`, `setAnimationLoop`
+- Color management: `outputColorSpace`, `toneMapping`, exposure-like behavior via renderer properties
+- `WebGLRenderTarget`, `WebGLCubeRenderTarget`, MRT, readback, or render-to-texture setup at renderer level
+- `Info` (`render`, `triangles`, `calls`) for profiling; `CanvasTarget` / storage textures when working from docs index
+
+**IMPORTANT: this skill vs neighbors**
+
+| Topic | Use skill |
+|-------|-----------|
+| Fullscreen passes, bloom, SSAO, composer chain | **threejs-postprocessing** |
+| VR/AR session, `XRButton`, hand models | **threejs-webxr** |
+| Node-based frame graph / TSL post stack | **threejs-node-tsl** + renderer enablement |
+| Loading assets | **threejs-loaders** |
+
+**Trigger phrases include:**
+
+- "WebGLRenderer", "WebGPURenderer", "setPixelRatio", "toneMapping", "WebGLRenderTarget"
+- "渲染器", "像素比", "色调映射", "离屏渲染"
+
+## How to use this skill
+
+1. **Choose API**: `WebGLRenderer` for widest compatibility; `WebGPURenderer` when targeting WebGPU and node/TSL stack per project rules.
+2. **Size**: match drawing buffer to canvas CSS size × `devicePixelRatio` with a sane cap (performance).
+3. **Color**: set `outputColorSpace` / `toneMapping` consistently with textures and materials (cross-link threejs-textures, threejs-materials).
+4. **Loop**: prefer `setAnimationLoop` for WebXR-friendly loops; otherwise `requestAnimationFrame`.
+5. **Render targets**: pick `WebGLRenderTarget` vs cube/3D/array variants per environment/reflection needs; document dispose when recreating.
+6. **Overlay UI**: import `CSS2DRenderer` / `CSS3DRenderer` from addons; sync size with main renderer.
+7. **Profiling**: read `renderer.info` in dev builds only; explain cost of high pixel ratio and overdraw.
+8. **WebXR hook**: enable XR on renderer but delegate session to **threejs-webxr**.
+
+See [examples/workflow-renderer-resize.md](examples/workflow-renderer-resize.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Core Renderers | https://threejs.org/docs/WebGLRenderer.html |
+| WebGPU | https://threejs.org/docs/WebGPURenderer.html |
+| Render targets | https://threejs.org/docs/WebGLRenderTarget.html |
+| Core PostProcessing (class) | https://threejs.org/docs/PostProcessing.html |
+| Addons renderers | https://threejs.org/docs/CSS2DRenderer.html |
+
+More class links: [references/official-sections.md](references/official-sections.md).
+
+## Scope
+
+- **In scope:** Renderer construction, sizing, color/tone, targets, Info, addon CSS/SVG renderers, high-level XR enable only.
+- **Out of scope:** Individual composer passes (threejs-postprocessing); XR input (threejs-webxr); file IO (threejs-loaders).
+
+## Common pitfalls and best practices
+
+- Uncapped DPR burns fill rate; cap `setPixelRatio(Math.min(devicePixelRatio, 2))` on dense scenes.
+- Mixing sRGB textures with wrong `outputColorSpace` causes washed or crushed blacks.
+- Forgetting `dispose()` on render targets and full-screen quads leaks GPU memory on hot reload.
+- `WebGPURenderer` feature set moves quickly—always cite current docs version note in answers.
+
+## Documentation and version
+
+`WebGLRenderer`, `WebGPURenderer`, and color-management defaults evolve across releases. Use the [Renderers](https://threejs.org/docs/#Renderers) section of [three.js docs](https://threejs.org/docs/) for the user’s three.js line; WebGPU and node stacks may require newer minors—link class pages rather than memorizing constructor defaults.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link official renderer or render-target pages (`WebGLRenderer`, `WebGLRenderTarget`, etc.).
+2. Relate `outputColorSpace` / `toneMapping` to **threejs-textures** and **threejs-materials** when color looks wrong.
+3. Point XR session details to **threejs-webxr** after `renderer.xr.enabled` is mentioned.
+4. Mention `dispose()` for render targets and render lists on teardown or hot reload.
+5. Cite **Addons → Renderers** (`CSS2DRenderer`, …) when overlays are in scope.
+
+## References
+
+- https://threejs.org/docs/WebGLRenderer.html
+- https://threejs.org/docs/WebGPURenderer.html
+- https://threejs.org/docs/#Renderers
+- https://threejs.org/docs/Info.html
+
+## Keywords
+
+**English:** webglrenderer, webgpurenderer, rendertarget, pixelratio, tonemapping, outputcolorspace, css2d, css3d, three.js
+
+**中文：** WebGLRenderer、WebGPU、渲染目标、像素比、色调映射、输出色彩空间、渲染器、three.js

package/skill-packs/threejs/skills/threejs-renderers/examples/workflow-renderer-resize.md

@@ -0,0 +1,21 @@
+# Workflow: responsive renderer and DPR cap
+
+## Goal
+
+Keep drawing buffer size in sync with the canvas element and limit device pixel ratio on high-DPI displays.
+
+## Steps
+
+1. Listen to `window` `resize` (or ResizeObserver on the canvas parent).
+
+2. Read `clientWidth` / `clientHeight` of the element hosting the canvas.
+
+3. Call `renderer.setSize(width, height, false)` when the third argument should match CSS pixels (typical for full-window).
+
+4. Set `renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))` (adjust cap per project).
+
+5. If using composer or effects that depend on resolution, update passes after resize—see **threejs-postprocessing**.
+
+6. Update projection `camera.aspect` for perspective cameras and `camera.updateProjectionMatrix()`.
+
+This complements **threejs-camera**; do not duplicate XR projection here.

package/skill-packs/threejs/skills/threejs-renderers/references/official-sections.md

@@ -0,0 +1,14 @@
+# Renderer-related docs (non-exhaustive)
+
+- https://threejs.org/docs/WebGLRenderer.html
+- https://threejs.org/docs/WebGPURenderer.html
+- https://threejs.org/docs/WebGLCubeRenderTarget.html
+- https://threejs.org/docs/WebGL3DRenderTarget.html
+- https://threejs.org/docs/Renderer.html
+- https://threejs.org/docs/PostProcessing.html
+- https://threejs.org/docs/CSS2DRenderer.html
+- https://threejs.org/docs/CSS3DRenderer.html
+- https://threejs.org/docs/SVGRenderer.html
+- https://threejs.org/docs/WebXRManager.html
+
+Use the live [docs index](https://threejs.org/docs/#Renderers) for additions in new three.js releases.

package/skill-packs/threejs/skills/threejs-scenes/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: threejs-scenes
+description: "three.js Scene graph root object, linear Fog and exponential FogExp2, Scene.background for solid colors or textures, and high-level environment background concepts that tie to PMREM and loaders in other skills. Use when configuring world container, atmospheric fog, or background; for HDR env map file loading use threejs-loaders; for GPU texture settings after load use threejs-textures; for tone mapping use threejs-renderers."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `Scene` as root, `scene.background`, environment or skyball setup at scene level
+- `Fog` or `FogExp2` parameters (`near`, `far`, `color`, density) and interaction with camera far plane
+- Organizing render lists conceptually (children of scene)
+
+**IMPORTANT: scenes vs textures vs loaders**
+
+| Concern | Skill |
+|---------|--------|
+| Scene + fog API | **threejs-scenes** |
+| Texture sampling, PMREM generator usage | **threejs-textures** |
+| Fetching HDR/glTF | **threejs-loaders** |
+
+**Trigger phrases include:**
+
+- "Scene", "Fog", "FogExp2", "background", "雾"
+- "场景根节点", "线性雾", "指数雾"
+
+## How to use this skill
+
+1. Instantiate `Scene` and add lights/meshes/cameras as children per graph rules (**threejs-objects**).
+2. Choose fog: linear `Fog` vs exponential `FogExp2` for outdoor/horizon feel.
+3. Tune fog `near`/`far` alongside camera `far` to avoid clipping artifacts.
+4. Set `scene.background` to `Color`, `Texture`, or cube map per docs; env lighting still needs matching renderer/material settings.
+5. When user wants IBL from HDR file, point to loaders → textures → materials pipeline explicitly.
+6. Document that fog does not replace frustum culling for performance.
+
+### Example: Scene with fog and background
+
+```javascript
+import * as THREE from 'three';
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xa0a0a0);
+
+// Linear fog — match color with background to hide horizon seam
+scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);
+
+// Ensure camera far plane covers fog range
+camera.far = 60; // slightly beyond fog far
+camera.updateProjectionMatrix();
+```
+
+See [examples/workflow-fog-background.md](examples/workflow-fog-background.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Scenes | https://threejs.org/docs/Scene.html |
+| Fog | https://threejs.org/docs/Fog.html |
+| FogExp2 | https://threejs.org/docs/FogExp2.html |
+
+## Scope
+
+- **In scope:** `Scene`, fog types, background field semantics at API level.
+- **Out of scope:** HDR / glTF file fetch (**threejs-loaders**); PMREM and texture sampling (**threejs-textures**); tone mapping / output color space defaults (**threejs-renderers**); full-screen fog-only post stack (**threejs-postprocessing**) unless tying to scene `Fog`; custom atmospheric scattering shaders beyond core fog API.
+
+## Common pitfalls and best practices
+
+- Fog color should harmonize with background to hide the horizon seam.
+- Very large `far` on camera with fog still needs scene scale consistency.
+- `background` rotation/intensity features depend on renderer version—cite current docs.
+
+## Documentation and version
+
+`Scene`, `Fog`, and background fields are documented under [Scenes](https://threejs.org/docs/#Scenes) in [three.js docs](https://threejs.org/docs/). Environment-related visuals often combine this skill with **threejs-textures** (PMREM) and **threejs-loaders** (HDR files) — link those pages when the user moves from “fog color” to “HDR sky”.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `Scene`, `Fog`, or `FogExp2` official pages.
+2. Relate fog distances to **threejs-camera** `far` plane and world scale.
+3. Defer PMREM/HDR file steps to **threejs-textures** / **threejs-loaders** with one sentence each.
+4. Avoid duplicating full color-management tutorials — point to renderer + textures skills.
+
+## Keywords
+
+**English:** scene, fog, fogexp2, background, environment, three.js
+
+**中文：** 场景、雾、Fog、背景、环境、three.js

package/skill-packs/threejs/skills/threejs-scenes/examples/workflow-fog-background.md

@@ -0,0 +1,13 @@
+# Workflow: fog plus solid background
+
+## Steps
+
+1. `scene.background = new THREE.Color(0x87ceeb);`
+
+2. `scene.fog = new THREE.Fog(0x87ceeb, near, far);` — adjust `near`/`far` relative to world units.
+
+3. Keep `PerspectiveCamera.far` larger than fog `far` or tune both together.
+
+4. Remove fog by setting `scene.fog = null`.
+
+For textured HDR backgrounds, load env via **threejs-loaders** then assign textures per **threejs-textures** / PMREM flow.

package/skill-packs/threejs/skills/threejs-textures/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: threejs-textures
+description: "three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `texture.wrapS` / `wrapT`, `minFilter`, `magFilter`, `generateMipmaps`, `anisotropy`
+- `colorSpace` / correct handling of sRGB vs linear data maps
+- Creating `DataTexture`, `CubeTexture`, compressed GPU formats, video/canvas driven textures
+- `PMREMGenerator` from environment maps for IBL
+
+**IMPORTANT: textures vs loaders**
+
+| Step | Skill |
+|------|--------|
+| Decode file / HTTP | **threejs-loaders** |
+| Configure GPU `Texture` | **threejs-textures** |
+
+**Trigger phrases include:**
+
+- "Texture", "CubeTexture", "PMREM", "colorSpace", "mipmap", "各向异性"
+- "环境贴图", "数据纹理", "压缩纹理"
+
+## How to use this skill
+
+1. **Classify** texture dimensionality and format (2D, cube, depth, compressed, data).
+2. **Color pipeline**: set `colorSpace` appropriately; normal/roughness maps are non-color data.
+3. **Sampling**: choose filters; enable mipmaps when minification occurs; consider max anisotropy.
+4. **PMREM**: feed env map through `PMREMGenerator` per docs; assign result to scene/env/intensity paths as required.
+5. **Video/canvas**: understand update needs each frame for `VideoTexture` / `CanvasTexture`.
+6. **Disposal**: `dispose()` textures when replacing to free GPU memory.
+7. **KTX2/Basis**: transcoder wiring belongs in **threejs-loaders** before this step.
+
+See [examples/workflow-pmrem-env.md](examples/workflow-pmrem-env.md).
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Textures | https://threejs.org/docs/Texture.html |
+| Cube | https://threejs.org/docs/CubeTexture.html |
+| Data | https://threejs.org/docs/DataTexture.html |
+| PMREM | https://threejs.org/docs/PMREMGenerator.html |
+
+## Scope
+
+- **In scope:** Core Textures + PMREMGenerator; sampling and color pipeline at texture level.
+- **Out of scope:** Loader configuration; post-processing passes that sample buffers (threejs-postprocessing).
+
+## Common pitfalls and best practices
+
+- sRGB albedo in linear workflow without proper colorSpace looks wrong next to renderer output.
+- Non-power-of-two textures have mip/wrap limitations unless padded.
+- Forgetting texture disposal on hot reload leaks VRAM.
+
+## Documentation and version
+
+Texture classes and `PMREMGenerator` are documented under [Textures](https://threejs.org/docs/#Textures) and [PMREMGenerator](https://threejs.org/docs/PMREMGenerator.html) in [three.js docs](https://threejs.org/docs/). Compressed and KTX2 paths often depend on **threejs-loaders** for transcoder setup before this skill applies.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Link `Texture`, `DataTexture`, `CubeTexture`, or `PMREMGenerator` as appropriate.
+2. Tie `colorSpace` / filtering to **threejs-renderers** output and **threejs-materials** maps.
+3. Send Draco/KTX2 **decoder wiring** questions to **threejs-loaders** first.
+4. Emphasize `dispose()` when replacing env maps or large atlases.
+5. Mention [Global](https://threejs.org/docs/#Global) constants only when wrapping/filter enums matter.
+
+## References
+
+- https://threejs.org/docs/#Textures
+- https://threejs.org/docs/Texture.html
+- https://threejs.org/docs/PMREMGenerator.html
+
+## Keywords
+
+**English:** texture, cubemap, pmrem, mipmap, colorspace, compressed texture, data texture, three.js
+
+**中文：** 纹理、立方体贴图、PMREM、mipmap、色彩空间、压缩纹理、three.js

package/skill-packs/threejs/skills/threejs-textures/examples/workflow-pmrem-env.md

@@ -0,0 +1,19 @@
+# Workflow: PMREM from an equirectangular texture
+
+## Preconditions
+
+- An equirectangular HDR or suitable env image is already a `Texture` (often via **threejs-loaders**).
+
+## Steps
+
+1. Create `PMREMGenerator(renderer)`.
+
+2. `const envMap = pmremGenerator.fromEquirectangular(equirectTexture).texture;`
+
+3. Assign to scene or materials per your lighting model; intensity via renderer or material properties (**threejs-materials**).
+
+4. `pmremGenerator.dispose()` when done generating; dispose intermediate textures per docs.
+
+5. Dispose `equirectTexture` if no longer needed.
+
+Cross-check current [PMREMGenerator](https://threejs.org/docs/PMREMGenerator.html) for API variants (`fromScene`, etc.).