@rune-kit/rune 2.2.0 → 2.2.2

package/extensions/ecommerce/skills/tax-compliance.md

@@ -0,0 +1,117 @@
+---
+name: "tax-compliance"
+pack: "@rune/ecommerce"
+description: "Tax calculation — sales tax API integration, VAT for EU, digital goods tax, tax-inclusive pricing, audit trail."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# tax-compliance
+
+Tax calculation — sales tax API integration, VAT for EU, digital goods tax, tax-inclusive pricing, audit trail.
+
+#### Workflow
+
+**Step 1 — Detect tax setup**
+Use Grep to find: `tax`, `vat`, `taxjar`, `avalara`, `tax_rate`, `taxAmount`, `tax_exempt`. Check if tax calculation exists and where it happens (cart time vs checkout time).
+
+**Step 2 — Audit tax accuracy**
+Check for:
+- Tax calculated at cart time but not recalculated at checkout (rate may have changed, or user changed shipping address)
+- Hardcoded tax rates instead of API-based calculation (rates change; nexus rules are complex)
+- Missing tax on digital goods (many US states and all EU countries tax digital products)
+- EU VAT: must charge buyer's country VAT rate for B2C digital sales (not seller's country)
+- Tax-inclusive vs tax-exclusive display: must be consistent and clearly labeled
+- No tax audit trail: amounts, rates, and jurisdiction must be stored per order for compliance
+- Missing tax exemption handling (B2B customers with valid VAT number or tax-exempt certificate)
+
+**Step 3 — Emit tax patterns**
+Emit: tax calculation at checkout time (not cart time), API-based rate lookup, EU VAT reverse charge for B2B, and tax audit trail per order line item.
+
+#### Example
+
+```typescript
+// Tax calculation at CHECKOUT time (not cart time) — rates may change
+interface TaxLineItem {
+  productId: string;
+  amount: number;
+  quantity: number;
+  taxCode: string; // Product tax code (e.g., 'txcd_10000000' for general goods)
+}
+
+async function calculateTax(
+  items: TaxLineItem[],
+  shippingAddress: Address,
+  customerTaxExempt: boolean
+): Promise<TaxResult> {
+  if (customerTaxExempt) {
+    return { totalTax: 0, lineItems: items.map(i => ({ ...i, tax: 0, rate: 0 })) };
+  }
+
+  // Use tax API — never hardcode rates
+  const calculation = await stripe.tax.calculations.create({
+    currency: 'usd',
+    line_items: items.map(item => ({
+      amount: item.amount * item.quantity,
+      reference: item.productId,
+      tax_code: item.taxCode,
+    })),
+    customer_details: {
+      address: {
+        line1: shippingAddress.line1,
+        city: shippingAddress.city,
+        state: shippingAddress.state,
+        postal_code: shippingAddress.postalCode,
+        country: shippingAddress.country,
+      },
+      address_source: 'shipping',
+    },
+  });
+
+  return {
+    totalTax: calculation.tax_amount_exclusive,
+    lineItems: calculation.line_items.data.map(li => ({
+      productId: li.reference,
+      tax: li.amount_tax,
+      rate: li.tax_breakdown?.[0]?.rate ?? 0,
+      jurisdiction: li.tax_breakdown?.[0]?.jurisdiction?.display_name ?? 'Unknown',
+    })),
+  };
+}
+
+// EU VAT validation — B2B reverse charge
+async function validateEuVat(vatNumber: string, buyerCountry: string): Promise<boolean> {
+  // Use VIES (VAT Information Exchange System) API
+  const res = await fetch(
+    `https://ec.europa.eu/taxation_customs/vies/rest-api/ms/${buyerCountry}/vat/${vatNumber.replace(/^[A-Z]{2}/, '')}`
+  );
+  const data = await res.json();
+  return data.isValid === true;
+}
+
+// Store tax audit trail per order (required for compliance)
+interface OrderTaxRecord {
+  orderId: string;
+  lineItemId: string;
+  taxAmount: number;
+  taxRate: number;
+  jurisdiction: string;
+  calculatedAt: Date;
+  taxApiTransactionId: string;
+}
+
+// Commit tax record immediately at payment creation — never calculate retroactively
+async function commitTaxRecord(orderId: string, calculation: TaxResult, txnId: string) {
+  await prisma.orderTaxRecord.createMany({
+    data: calculation.lineItems.map(li => ({
+      orderId,
+      lineItemId: li.productId,
+      taxAmount: li.tax,
+      taxRate: li.rate,
+      jurisdiction: li.jurisdiction,
+      calculatedAt: new Date(),
+      taxApiTransactionId: txnId,
+    })),
+  });
+}
+```

package/extensions/gamedev/PACK.md

@@ -1,19 +1,20 @@
 ---
 name: "@rune/gamedev"
-description: Game development patterns — Three.js, WebGL, game loops, physics engines, and asset pipelines.
+description: Game development patterns — Three.js, WebGL, game loops, physics engines, asset pipelines, multiplayer, audio, input, ECS, particles, camera, and scene management.
 metadata:
   author: runedev
-  version: "0.1.0"
+  version: "0.2.0"
   layer: L4
   price: "$12"
   target: Game developers
+  format: split
 ---
 
 # @rune/gamedev
 
 ## Purpose
 
-Web game development hits performance walls that traditional web apps never encounter: 60fps render loops that stutter on garbage collection, physics simulations that diverge between clients, shaders that work on desktop but fail on mobile GPUs, and asset loading that blocks the first frame for 10 seconds. This pack provides patterns for the full web game stack — rendering, simulation, physics, and assets — each optimized for the unique constraints of real-time interactive applications running in a browser.
+Web game development hits performance walls that traditional web apps never encounter: 60fps render loops that stutter on garbage collection, physics simulations that diverge between clients, shaders that work on desktop but fail on mobile GPUs, and asset loading that blocks the first frame for 10 seconds. This pack provides patterns for the full web game stack — rendering, simulation, physics, assets, multiplayer, audio, input, ECS, particles, camera, and scene management — each optimized for the unique constraints of real-time interactive applications running in a browser.
 
 ## Triggers
 
@@ -23,329 +24,62 @@ Web game development hits performance walls that traditional web apps never enco
 - `/rune game-loops` — implement or audit game loop architecture
 - `/rune physics-engine` — set up or optimize physics simulation
 - `/rune asset-pipeline` — optimize asset loading and management
+- `/rune multiplayer` — WebSocket game server and client prediction
+- `/rune audio-system` — Web Audio API, spatial audio, SFX management
+- `/rune input-system` — keyboard/mouse/gamepad/touch input handling
+- `/rune ecs` — Entity Component System architecture
+- `/rune particles` — GPU particle system with WebGL
+- `/rune camera-system` — follow camera, screen shake, zoom
+- `/rune scene-management` — scene transitions, preloading, serialization
 - Called by `cook` (L1) when game development task detected
 
 ## Skills Included
 
-### threejs-patterns
-
-Three.js patterns — scene setup, React Three Fiber integration, PBR materials, post-processing, performance optimization.
-
-#### Workflow
-
-**Step 1 — Detect Three.js setup**
-Use Grep to find Three.js usage: `THREE.`, `useThree`, `useFrame`, `Canvas`, `@react-three/fiber`, `@react-three/drei`. Read the main scene file to understand: renderer setup, scene graph structure, camera type, and lighting model.
-
-**Step 2 — Audit performance**
-Check for: objects created inside `useFrame` (GC pressure), missing `dispose()` on unmount (memory leak), no frustum culling on large scenes, textures without power-of-two dimensions, unoptimized geometry (too many draw calls), and missing LOD for distant objects.
-
-**Step 3 — Emit optimized scene**
-Emit: properly structured R3F scene with declarative lights, memoized geometries, disposal on unmount, instanced meshes for repeated objects, and post-processing pipeline.
-
-#### Example
-
-```tsx
-// React Three Fiber — optimized scene with instancing and post-processing
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls, Environment, useGLTF, Instances, Instance } from '@react-three/drei';
-import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
-import { useRef, useMemo } from 'react';
-
-function InstancedTrees({ count = 500 }) {
-  const positions = useMemo(() =>
-    Array.from({ length: count }, () => [
-      (Math.random() - 0.5) * 100,
-      0,
-      (Math.random() - 0.5) * 100,
-    ] as [number, number, number]),
-  [count]);
-
-  return (
-    <Instances limit={count}>
-      <cylinderGeometry args={[0.2, 0.4, 3]} />
-      <meshStandardMaterial color="#4a7c59" />
-      {positions.map((pos, i) => <Instance key={i} position={pos} />)}
-    </Instances>
-  );
-}
-
-function GameScene() {
-  return (
-    <Canvas camera={{ position: [0, 10, 20], fov: 60 }} gl={{ antialias: true }}>
-      <ambientLight intensity={0.3} />
-      <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
-      <Environment preset="sunset" />
-      <InstancedTrees count={500} />
-      <OrbitControls maxPolarAngle={Math.PI / 2.2} />
-      <EffectComposer>
-        <Bloom intensity={0.3} luminanceThreshold={0.8} />
-        <Vignette offset={0.3} darkness={0.6} />
-      </EffectComposer>
-    </Canvas>
-  );
-}
-```
-
----
-
-### webgl
-
-WebGL patterns — shader programming, GLSL, buffer management, texture handling, instanced rendering.
-
-#### Workflow
-
-**Step 1 — Detect WebGL usage**
-Use Grep to find WebGL code: `getContext('webgl`, `gl.createShader`, `gl.createProgram`, `*.glsl`, `*.vert`, `*.frag`. Read shader files and GL initialization to understand: WebGL version, shader complexity, and buffer strategy.
-
-**Step 2 — Audit shader and buffer efficiency**
-Check for: uniforms set every frame that don't change (use UBO), separate draw calls for identical geometry (use instancing), textures not using mipmaps, missing `gl.deleteBuffer`/`gl.deleteTexture` cleanup, and shaders with expensive per-fragment branching.
-
-**Step 3 — Emit optimized WebGL code**
-Emit: WebGL2 setup with proper context attributes, VAO-based buffer management, instanced rendering for repeated geometry, and GLSL shaders with documented inputs/outputs.
-
-#### Example
-
-```glsl
-// Vertex shader — instanced rendering with per-instance transform
-#version 300 es
-layout(location = 0) in vec3 aPosition;
-layout(location = 1) in vec3 aNormal;
-layout(location = 2) in mat4 aInstanceMatrix; // per-instance (locations 2-5)
-
-uniform mat4 uViewProjection;
-
-out vec3 vNormal;
-out vec3 vWorldPos;
-
-void main() {
-  vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
-  vWorldPos = worldPos.xyz;
-  vNormal = mat3(transpose(inverse(aInstanceMatrix))) * aNormal;
-  gl_Position = uViewProjection * worldPos;
-}
-```
-
-```glsl
-// Fragment shader — PBR-lite with single directional light
-#version 300 es
-precision highp float;
-
-in vec3 vNormal;
-in vec3 vWorldPos;
-out vec4 fragColor;
-
-uniform vec3 uLightDir;
-uniform vec3 uCameraPos;
-uniform vec3 uBaseColor;
-
-void main() {
-  vec3 N = normalize(vNormal);
-  vec3 L = normalize(uLightDir);
-  vec3 V = normalize(uCameraPos - vWorldPos);
-  vec3 H = normalize(L + V);
-
-  float diffuse = max(dot(N, L), 0.0);
-  float specular = pow(max(dot(N, H), 0.0), 32.0);
-  vec3 ambient = uBaseColor * 0.15;
-
-  fragColor = vec4(ambient + uBaseColor * diffuse + vec3(specular * 0.5), 1.0);
-}
-```
-
----
-
-### game-loops
-
-Game loop architecture — fixed timestep, interpolation, input handling, state machines, ECS.
-
-#### Workflow
-
-**Step 1 — Detect game loop pattern**
-Use Grep to find loop code: `requestAnimationFrame`, `setInterval.*16`, `update`, `fixedUpdate`, `deltaTime`, `gameLoop`. Read the main loop to understand: timestep strategy, update/render separation, and input handling.
-
-**Step 2 — Audit loop correctness**
-Check for: variable timestep physics (non-deterministic), no accumulator for fixed update (physics tied to framerate), input polled inside render (inconsistent), missing interpolation between fixed steps (visual stuttering), and no frame budget monitoring.
-
-**Step 3 — Emit fixed timestep loop**
-Emit: fixed timestep (60Hz) with accumulator, interpolation for smooth rendering, decoupled input handler, and frame budget monitoring.
-
-#### Example
-
-```typescript
-// Fixed timestep game loop with interpolation
-const TICK_RATE = 60;
-const TICK_DURATION = 1000 / TICK_RATE;
-
-class GameLoop {
-  private accumulator = 0;
-  private previousTime = 0;
-  private running = false;
-
-  constructor(
-    private update: (dt: number) => void,     // fixed timestep logic
-    private render: (alpha: number) => void,   // interpolated rendering
-  ) {}
-
-  start() {
-    this.running = true;
-    this.previousTime = performance.now();
-    requestAnimationFrame(this.tick);
-  }
-
-  private tick = (currentTime: number) => {
-    if (!this.running) return;
-    const elapsed = Math.min(currentTime - this.previousTime, 250); // cap spiral of death
-    this.previousTime = currentTime;
-    this.accumulator += elapsed;
-
-    while (this.accumulator >= TICK_DURATION) {
-      this.update(TICK_DURATION / 1000); // dt in seconds
-      this.accumulator -= TICK_DURATION;
-    }
-
-    const alpha = this.accumulator / TICK_DURATION; // interpolation factor [0, 1)
-    this.render(alpha);
-    requestAnimationFrame(this.tick);
-  };
-
-  stop() { this.running = false; }
-}
-
-// Usage
-const loop = new GameLoop(
-  (dt) => { world.step(dt); entities.forEach(e => e.update(dt)); },
-  (alpha) => { renderer.render(scene, camera, alpha); },
-);
-loop.start();
-```
-
----
-
-### physics-engine
-
-Physics integration — Rapier.js, rigid bodies, constraints, raycasting, collision callbacks, deterministic simulation.
-
-#### Workflow
-
-**Step 1 — Detect physics setup**
-Use Grep to find physics libraries: `rapier`, `cannon`, `ammo`, `@dimforge/rapier3d`, `RigidBody`, `Collider`. Read physics initialization and body creation to understand: engine choice, world configuration, and collision handling.
-
-**Step 2 — Audit physics configuration**
-Check for: physics step tied to render frame (non-deterministic), missing collision groups (everything collides with everything), no sleep threshold (wasted CPU on static objects), raycasts without max distance (expensive), and missing body cleanup on entity destroy.
-
-**Step 3 — Emit optimized physics**
-Emit: Rapier.js (WASM, deterministic) setup with proper collision groups, sleep thresholds, event-driven collision callbacks, and raycasting utility.
-
-#### Example
-
-```typescript
-// Rapier.js (WASM) — setup with collision groups and raycasting
-import RAPIER from '@dimforge/rapier3d-compat';
-
-await RAPIER.init();
-const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 });
-
-// Collision groups: player=0x0001, enemy=0x0002, ground=0x0004, projectile=0x0008
-const GROUPS = { PLAYER: 0x0001, ENEMY: 0x0002, GROUND: 0x0004, PROJECTILE: 0x0008 };
-
-// Ground — static, collides with everything
-const groundBody = world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(0, 0, 0));
-world.createCollider(
-  RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
-    .setCollisionGroups((GROUPS.GROUND << 16) | 0xFFFF),
-  groundBody,
-);
-
-// Player — dynamic, collides with ground + enemy (not own projectiles)
-const playerBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0));
-world.createCollider(
-  RAPIER.ColliderDesc.capsule(0.5, 0.3)
-    .setCollisionGroups((GROUPS.PLAYER << 16) | (GROUPS.GROUND | GROUPS.ENEMY))
-    .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS),
-  playerBody,
-);
-
-// Raycast utility
-function raycast(origin: RAPIER.Vector3, direction: RAPIER.Vector3, maxDist = 100) {
-  const ray = new RAPIER.Ray(origin, direction);
-  const hit = world.castRay(ray, maxDist, true);
-  if (hit) {
-    const point = ray.pointAt(hit.timeOfImpact);
-    return { point, normal: hit.normal, collider: hit.collider };
-  }
-  return null;
-}
-```
-
----
-
-### asset-pipeline
-
-Game asset pipeline — glTF loading, texture compression, audio management, asset manifest, preloading.
-
-#### Workflow
-
-**Step 1 — Detect asset strategy**
-Use Glob to find asset files: `*.gltf`, `*.glb`, `*.ktx2`, `*.basis`, `*.png` in `assets/` or `public/`. Use Grep to find loaders: `GLTFLoader`, `TextureLoader`, `KTX2Loader`, `Howler`, `Audio`. Read the loading code to understand: preloading strategy, compression, and caching.
-
-**Step 2 — Audit asset efficiency**
-Check for: uncompressed textures (PNG/JPG instead of KTX2/Basis), glTF without Draco compression, no asset manifest (scattered inline paths), missing preloader (assets load mid-gameplay causing stutters), audio files in WAV format (use OGG/MP3), and no LOD variants for 3D models.
-
-**Step 3 — Emit asset pipeline**
-Emit: asset manifest with typed entries, preloader with progress tracking, glTF loader with Draco decoder, KTX2 texture loader, and audio manager with Howler.js.
-
-#### Example
-
-```typescript
-// Asset manifest + preloader with progress tracking
-interface AssetManifest {
-  models: Record<string, { url: string; draco?: boolean }>;
-  textures: Record<string, { url: string; format: 'ktx2' | 'png' }>;
-  audio: Record<string, { url: string; volume?: number; loop?: boolean }>;
-}
-
-const MANIFEST: AssetManifest = {
-  models: {
-    player: { url: '/assets/player.glb', draco: true },
-    level1: { url: '/assets/level1.glb', draco: true },
-  },
-  textures: {
-    terrain: { url: '/assets/terrain.ktx2', format: 'ktx2' },
-  },
-  audio: {
-    bgm: { url: '/assets/bgm.ogg', volume: 0.5, loop: true },
-    jump: { url: '/assets/jump.ogg', volume: 0.8 },
-  },
-};
-
-class AssetLoader {
-  private loaded = 0;
-  private total = 0;
-
-  async loadAll(manifest: AssetManifest, onProgress: (pct: number) => void) {
-    const entries = [
-      ...Object.values(manifest.models),
-      ...Object.values(manifest.textures),
-      ...Object.values(manifest.audio),
-    ];
-    this.total = entries.length;
-
-    await Promise.all(entries.map(async (entry) => {
-      await fetch(entry.url); // preload into browser cache
-      this.loaded++;
-      onProgress(this.loaded / this.total);
-    }));
-  }
-}
-```
-
----
+| Skill | Model | Description |
+|-------|-------|-------------|
+| [threejs-patterns](skills/threejs-patterns.md) | sonnet | Three.js scene, React Three Fiber, PBR materials, LOD, post-processing, instanced rendering, and disposal patterns. |
+| [webgl](skills/webgl.md) | sonnet | Raw WebGL2, GLSL shaders, VAO buffer management, instanced rendering, and texture handling. |
+| [game-loops](skills/game-loops.md) | sonnet | Fixed timestep with accumulator, interpolation for smooth rendering, decoupled input handler, and frame budget monitoring. |
+| [physics-engine](skills/physics-engine.md) | sonnet | Rapier.js (WASM) setup with collision groups, sleep thresholds, event-driven collision callbacks, and raycasting. |
+| [asset-pipeline](skills/asset-pipeline.md) | sonnet | glTF/Draco loading, KTX2 texture compression, typed asset manifest, preloader with progress tracking. |
+| [multiplayer](skills/multiplayer.md) | sonnet | Authoritative WebSocket game server, client-side prediction, reconciliation, entity interpolation, and lag compensation. |
+| [audio-system](skills/audio-system.md) | sonnet | Web Audio API AudioManager — spatial audio, music crossfade, SFX pooling, browser autoplay policy handling. |
+| [input-system](skills/input-system.md) | sonnet | Unified keyboard/mouse/gamepad/touch input with action mapping, input buffering, coyote time, and virtual joystick. |
+| [ecs](skills/ecs.md) | sonnet | Lightweight archetype-based ECS — dense component storage, query-based entity iteration, and pure system functions. |
+| [particles](skills/particles.md) | sonnet | Object-pooled CPU particle system with WebGL instancing path for 10k+ particles and emitter presets. |
+| [camera-system](skills/camera-system.md) | sonnet | 2D camera with smooth lerp follow, dead zone, screen shake decay, and zoom-to target. |
+| [scene-management](skills/scene-management.md) | sonnet | Stack-based SceneManager with fade transitions, asset preloading before enter, and level JSON serialization. |
+
+## Common Workflows
+
+| Workflow | Skills Involved | Typical Trigger |
+|----------|----------------|----------------|
+| 2D platformer bootstrap | game-loops → physics-engine → input-system → camera-system | new Phaser/PixiJS project |
+| 3D world with NPCs | threejs-patterns → ecs → physics-engine → camera-system | Three.js/R3F project |
+| Multiplayer action game | game-loops → multiplayer → physics-engine → input-system | real-time PvP feature |
+| Mobile game port | asset-pipeline → input-system → camera-system → game-loops | add touch controls |
+| VFX & atmosphere | particles → webgl → threejs-patterns → audio-system | visual polish sprint |
+| Game level editor | scene-management → asset-pipeline → ecs → camera-system | tooling sprint |
+| Performance audit | game-loops → webgl → particles → asset-pipeline | frame rate complaints |
+
+## Cross-Pack Connections
+
+| Target Pack | Connection | Use Case |
+|-------------|-----------|----------|
+| **@rune/ui** | HUD components, inventory screens, pause menus, leaderboard overlays | Health bars, minimap, skill cooldowns, settings modal |
+| **@rune/backend** | REST/WebSocket API for leaderboards, save data, player accounts, matchmaking | POST `/scores`, GET `/leaderboard`, save game state to DB |
+| **@rune/analytics** | Player telemetry — session length, death locations, skill usage heatmaps | `analytics.track('player_died', { x, y, cause })` |
+| **@rune/ai-ml** | NPC behavior trees, pathfinding ML, procedural content, cheat detection | A* pathfinding, trained NPC models, PCG level generation |
 
 ## Connections
 
 ```
 Calls → perf (L2): frame budget and rendering performance audit
 Calls → asset-creator (L3): generate placeholder assets and sprites
+Calls → @rune/ui: HUD, inventory, menus, overlays
+Calls → @rune/backend: leaderboards, save data, player accounts, matchmaking
+Calls → @rune/analytics: player telemetry and session tracking
+Calls → @rune/ai-ml: NPC behavior, procedural content, cheat detection
 Called By ← cook (L1): when game development task detected
 Called By ← review (L2): when game code under review
 ```
@@ -367,6 +101,9 @@ Called By ← review (L2): when game code under review
 3. MUST NOT create objects inside the render loop — allocate outside, reuse inside.
 4. MUST test on target minimum hardware (mobile GPU) not just development machine.
 5. MUST use compressed asset formats (Draco for geometry, KTX2/Basis for textures) — raw assets cause unacceptable load times.
+6. MUST use authoritative server model for multiplayer — never trust client position data.
+7. MUST resume AudioContext on user gesture — browsers block autoplay audio.
+8. MUST call `input.flush()` at end of each fixed tick — prevents justPressed persisting across frames.
 
 ## Sharp Edges
 
@@ -378,6 +115,10 @@ Called By ← review (L2): when game code under review
 | Shader compiles on first use causing frame drop (shader cache miss) | MEDIUM | Pre-warm shaders during loading screen; use `renderer.compile(scene, camera)` |
 | Asset loading blocks first frame (white screen for 5+ seconds) | HIGH | Implement progressive loading with preloader UI; prioritize visible assets |
 | Mobile GPU fails on desktop-quality shaders (WebGL context lost) | HIGH | Detect GPU tier with `detect-gpu`; provide shader LOD variants |
+| Multiplayer client trusts own position — speed hack trivial | CRITICAL | Server is authoritative; client sends inputs only, reconciles with server state |
+| AudioContext locked until user gesture — no music on load | MEDIUM | Resume AudioContext in first click/keydown handler; show muted indicator |
+| Gamepad axes not zeroed when gamepad disconnects | LOW | Set axes to 0 in gamepaddisconnected handler |
+| Input justPressed persists to next frame if flush() skipped | HIGH | Always flush at end of fixed update, not render |
 
 ## Done When
 
@@ -386,8 +127,16 @@ Called By ← review (L2): when game code under review
 - All GPU resources properly disposed on cleanup
 - Assets compressed and preloaded with progress indicator
 - Game loop decouples update from render with interpolation
+- Multiplayer: server authoritative, client predicts + reconciles
+- Audio: spatial SFX + crossfade music, resumable after user gesture
+- Input: keyboard/mouse/gamepad/touch unified, buffered, rebindable
+- ECS: entities/components/systems cleanly separated, query-based
+- Particles: pooled, no GC spikes, emitter presets for common FX
+- Camera: smooth follow, dead zone, screen shake on impact
+- Scenes: transition with fade, preload assets before enter
+- Performance: quadtree spatial queries, frame budget monitoring active
 - Structured report emitted for each skill invoked
 
 ## Cost Profile
 
-~10,000–20,000 tokens per full pack run (all 5 skills). Individual skill: ~2,000–4,000 tokens. Sonnet default. Use haiku for asset detection scans; escalate to sonnet for shader optimization and physics configuration.
+~10,000–20,000 tokens per full pack run (all skills). Individual skill: ~2,000–4,000 tokens. Sonnet default. Use haiku for asset detection scans and grep passes; sonnet for physics config, shader optimization, and multiplayer architecture; escalate to opus for full game architecture decisions spanning multiple systems.

package/extensions/gamedev/skills/asset-pipeline.md

@@ -0,0 +1,74 @@
+---
+name: "asset-pipeline"
+pack: "@rune/gamedev"
+description: "Game asset pipeline — glTF loading, texture compression, audio management, asset manifest, preloading."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# asset-pipeline
+
+Game asset pipeline — glTF loading, texture compression, audio management, asset manifest, preloading.
+
+#### Workflow
+
+**Step 1 — Detect asset strategy**
+Use Glob to find asset files: `*.gltf`, `*.glb`, `*.ktx2`, `*.basis`, `*.png` in `assets/` or `public/`. Use Grep to find loaders: `GLTFLoader`, `TextureLoader`, `KTX2Loader`, `Howler`, `Audio`. Read the loading code to understand: preloading strategy, compression, and caching.
+
+**Step 2 — Audit asset efficiency**
+Check for: uncompressed textures (PNG/JPG instead of KTX2/Basis), glTF without Draco compression, no asset manifest (scattered inline paths), missing preloader (assets load mid-gameplay causing stutters), audio files in WAV format (use OGG/MP3), and no LOD variants for 3D models.
+
+**Step 3 — Emit asset pipeline**
+Emit: asset manifest with typed entries, preloader with progress tracking, glTF loader with Draco decoder, KTX2 texture loader, and audio manager with Howler.js.
+
+#### Example
+
+```typescript
+// Asset manifest + preloader with progress tracking
+interface AssetManifest {
+  models: Record<string, { url: string; draco?: boolean }>;
+  textures: Record<string, { url: string; format: 'ktx2' | 'png' }>;
+  audio: Record<string, { url: string; volume?: number; loop?: boolean }>;
+}
+
+const MANIFEST: AssetManifest = {
+  models: {
+    player: { url: '/assets/player.glb', draco: true },
+    level1: { url: '/assets/level1.glb', draco: true },
+  },
+  textures: {
+    terrain: { url: '/assets/terrain.ktx2', format: 'ktx2' },
+  },
+  audio: {
+    bgm: { url: '/assets/bgm.ogg', volume: 0.5, loop: true },
+    jump: { url: '/assets/jump.ogg', volume: 0.8 },
+  },
+};
+
+class AssetLoader {
+  private loaded = 0;
+  private total = 0;
+  private cache = new Map<string, unknown>();
+
+  async loadAll(manifest: AssetManifest, onProgress: (pct: number) => void) {
+    const entries = [
+      ...Object.entries(manifest.models).map(([k, v]) => ({ key: k, ...v, type: 'model' })),
+      ...Object.entries(manifest.textures).map(([k, v]) => ({ key: k, ...v, type: 'texture' })),
+      ...Object.entries(manifest.audio).map(([k, v]) => ({ key: k, ...v, type: 'audio' })),
+    ];
+    this.total = entries.length;
+
+    await Promise.all(entries.map(async (entry) => {
+      await fetch(entry.url); // preload into browser cache
+      this.loaded++;
+      onProgress(this.loaded / this.total);
+    }));
+  }
+
+  get<T>(key: string): T {
+    const asset = this.cache.get(key);
+    if (!asset) throw new Error(`Asset not loaded: ${key}`);
+    return asset as T;
+  }
+}
+```