@leejungkiin/awkit 1.7.6 → 1.7.7

package/skills/threejs-node-tsl/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: threejs-node-tsl
+description: "three.js node-based shading: Nodes API surface, NodeMaterial and MeshStandardNodeMaterial-style families, TSL (Three.js Shading Language) entry at TSL.html, WebGPURenderer pairing, and core PostProcessing (class) versus addon EffectComposer at a high level. Use when authoring shaders as graphs, using TSL builtins, compute-oriented nodes, or modern WebGPU pipelines; for classic ShaderMaterial GLSL use threejs-materials; for stock EffectComposer passes use threejs-postprocessing; for WebGLRenderer-only tuning use threejs-renderers."
+---
+
+## When to use this skill
+
+**ALWAYS use this skill when the user mentions:**
+
+- `NodeMaterial`, `TSL`, imports from `three/nodes` or WebGPU entry points in docs
+- Building materials or post effects from nodes instead of string GLSL
+- `WebGPURenderer`, `PostProcessing` (core class) in a node-centric pipeline
+
+**IMPORTANT: node-tsl vs materials vs postprocessing**
+
+| Situation | Skill |
+|-----------|--------|
+| Standard PBR tuning, no nodes | **threejs-materials** |
+| TSL graph, NodeMaterial, WGSL path | **threejs-node-tsl** |
+| Classic `EffectComposer` + Pass classes | **threejs-postprocessing** |
+| Node post passes listed under Addons TSL in docs | **threejs-node-tsl** + **threejs-postprocessing** awareness |
+
+**Trigger phrases include:**
+
+- "TSL", "NodeMaterial", "three/nodes", "WebGPU", "node builder"
+- "节点材质", "着色语言 TSL"
+
+## How to use this skill
+
+1. **Decide path**: WebGPU + nodes vs WebGL + classic materials—do not hybridize blindly.
+2. **Anchor docs**: start from [Nodes index](https://threejs.org/docs/#Nodes) and [TSL.html](https://threejs.org/docs/TSL.html); use [NodeMaterial](https://threejs.org/docs/NodeMaterial.html) for material entry.
+3. **Progressive disclosure**: keep SKILL.md navigational; long symbol lists live in [references/official-links.md](references/official-links.md) and [references/tsl-vs-classic.md](references/tsl-vs-classic.md); see [examples/workflow-tsl-entry.md](examples/workflow-tsl-entry.md) for navigation habits.
+4. **Renderer**: enable `WebGPURenderer` per docs; fall back notes belong in **threejs-renderers**.
+5. **Debugging**: use version-stamped examples in three.js repo; avoid copying deprecated import paths.
+6. **Post stack**: if user names `PostProcessing` core class vs addon composer, clarify table in **threejs-renderers** / **threejs-postprocessing**.
+
+## Doc map (official)
+
+| Docs section | Representative links |
+|--------------|----------------------|
+| Nodes | https://threejs.org/docs/#Nodes |
+| TSL | https://threejs.org/docs/TSL.html |
+| NodeMaterial | https://threejs.org/docs/NodeMaterial.html |
+| WebGPU renderer | https://threejs.org/docs/WebGPURenderer.html |
+
+## Scope
+
+- **In scope:** Nodes/TSL discovery, architecture, renderer pairing, where to look next, migration hints from ShaderMaterial.
+- **Out of scope:** Pasting entire TSL symbol tables into SKILL.md; guaranteeing API stability across rapid releases—always cite "current docs".
+
+## Common pitfalls and best practices
+
+- Three.js node APIs evolve quickly—tie answers to a **version** or "current docs".
+- Do not confuse **core** `PostProcessing` class with **addons** `EffectComposer`—names collide in conversation.
+- WGSL vs GLSL expectations differ; TSL abstracts but limits still apply.
+- Keep graphs modular; use references for lookup instead of bloating agent context.
+
+## Documentation and version
+
+The [Nodes](https://threejs.org/docs/#Nodes) index and [TSL](https://threejs.org/docs/TSL.html) page are large and **fast-moving**. Treat https://threejs.org/docs/ as the source of truth for the user’s installed three.js; prefer linking [NodeMaterial](https://threejs.org/docs/NodeMaterial.html) and [WebGPURenderer](https://threejs.org/docs/WebGPURenderer.html) over paraphrasing long symbol lists.
+
+## Agent response checklist
+
+When answering under this skill, prefer responses that:
+
+1. Anchor on [TSL.html](https://threejs.org/docs/TSL.html) and/or `#Nodes` rather than inventing API names.
+2. Contrast **threejs-materials** (classic) vs node/TSL path explicitly.
+3. Warn that WebGPU + nodes examples may require recent minors—cite version when known.
+4. Point to [references/tsl-vs-classic.md](references/tsl-vs-classic.md) and [references/official-links.md](references/official-links.md) for long lookups.
+5. Disambiguate core `PostProcessing` vs addon `EffectComposer` (**threejs-postprocessing**).
+
+## References
+
+- https://threejs.org/docs/#Nodes
+- https://threejs.org/docs/TSL.html
+- https://threejs.org/docs/NodeMaterial.html
+- https://threejs.org/docs/WebGPURenderer.html
+
+## Keywords
+
+**English:** tsl, node material, nodes, webgpu, wgsl, three.js shading language, node builder, nodematerial
+
+**中文：** TSL、节点材质、WebGPU、着色语言、NodeMaterial、three.js

package/skills/threejs-node-tsl/examples/workflow-tsl-entry.md

@@ -0,0 +1,13 @@
+# Workflow: finding the right TSL entry
+
+## Steps
+
+1. Open https://threejs.org/docs/TSL.html and locate the function or node category matching the effect (lighting, texture, math).
+
+2. Cross-check [Nodes](https://threejs.org/docs/#Nodes) for class-style nodes if TSL links to underlying node types.
+
+3. Pair with `WebGPURenderer` setup from **threejs-renderers**.
+
+4. For post effects expressed as nodes, compare with addon `EffectComposer` path in **threejs-postprocessing** and pick one pipeline per project.
+
+Do not duplicate upstream example code here—link to the official example filename instead.

package/skills/threejs-node-tsl/references/official-links.md

@@ -0,0 +1,8 @@
+# Official entry points (Nodes / TSL)
+
+Use these pages as the source of truth; the Nodes catalog is large—link out instead of duplicating.
+
+- https://threejs.org/docs/#Nodes
+- https://threejs.org/docs/TSL.html
+- https://threejs.org/docs/NodeMaterial.html
+- https://threejs.org/docs/Node.html

package/skills/threejs-node-tsl/references/tsl-vs-classic.md

@@ -0,0 +1,23 @@
+# TSL / NodeMaterial vs classic materials
+
+## When to prefer classic (`threejs-materials`)
+
+- You need widely documented PBR with `MeshStandardMaterial` / `MeshPhysicalMaterial`.
+- Target is WebGL-only deployments without WebGPU.
+- Team maintains GLSL `ShaderMaterial` with known light setups.
+
+## When to prefer TSL / Node path (`threejs-node-tsl`)
+
+- You adopt `WebGPURenderer` and node-based materials in examples.
+- You want composable shader pieces without huge GLSL strings.
+- You follow new three.js examples that import from node/TSL modules.
+
+## Migration sanity
+
+- Rebuild lighting model expectations: not every classic knob maps 1:1 on day one.
+- Keep references to official migration notes in the three.js repository for your version.
+
+## Links
+
+- https://threejs.org/docs/TSL.html
+- https://threejs.org/docs/ShaderMaterial.html

package/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/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/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/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/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/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/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/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/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.