vibes-plug 1.0.0 → 2.11.0

package/skills/voice-ai-realtime-agent/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: voice-ai-realtime-agent
+description: "Expert guide for Ultra-Low Latency Conversational Voice AI (<300ms), WebRTC bidirectional streaming, OpenAI Realtime API, Gemini Multimodal Live Audio, LiveKit Agents, and Semantic VAD / Panduan ahli AI suara percakapan real-time berlatensi ultra-rendah."
+author: "Roedy Rustam"
+---
+
+# Voice AI Realtime Agent (2026 Edition)
+
+Expert guide for building ultra-low-latency (<300ms), bi-directional conversational voice AI applications. Covers WebRTC, full-duplex WebSocket audio streaming (PCM 24kHz), OpenAI Realtime API, Gemini Multimodal Live API, LiveKit Agents SDK, and smart interruption (barge-in) handling.
+
+*Panduan ahli untuk membangun aplikasi AI suara percakapan dua arah berlatensi ultra-rendah (<300ms) menggunakan WebRTC, WebSocket full-duplex, OpenAI Realtime API, Gemini Multimodal Live API, LiveKit Agents SDK, dan penanganan interupsi (barge-in).*
+
+---
+
+## 1. Core Architecture: Full-Duplex Speech-to-Speech
+
+Traditional voice pipelines chain STT ➔ LLM ➔ TTS with cumulative latency exceeding 1,200ms–2,500ms. Modern 2026 voice agents use **native speech-to-speech** or **streamable full-duplex WebRTC pipelines** achieving natural, human-like reaction times (~250–350ms).
+
+```
+User Mic ──► [WebRTC / WebSocket] ──► [VAD: Silero / WebRTC VAD]
+                                                │
+                                                ▼
+User Speaks <── [Audio Output] ◄── [Native Audio Stream / Cartesia] ◄── [OpenAI Realtime / Gemini Live]
+     │
+     └── User Interrupts (Barge-in) ──► Instant Buffer Flush & Cancel Audio Frame Emission
+```
+
+---
+
+## 2. Production Recipe: LiveKit Agents + OpenAI Realtime (Python)
+
+```python
+# agent.py - Production Voice Agent Worker with LiveKit & OpenAI Realtime
+import asyncio
+import os
+from livekit import rtc
+from livekit.agents import (
+    AutoSubscribe,
+    JobContext,
+    JobProcess,
+    WorkerOptions,
+    cli,
+    llm,
+)
+from livekit.agents.pipeline import VoicePipelineAgent
+from livekit.plugins import deepgram, openai, silero
+
+async def entrypoint(ctx: JobContext):
+    # Connect to room with audio only to minimize bandwidth & latency
+    await ctx.connect(auto_subscribe=AutoSubscribe.AUDIO_ONLY)
+    
+    # Wait for the user participant to join
+    participant = await ctx.wait_for_participant()
+    
+    # Define agent instructions and tools
+    initial_ctx = llm.ChatContext().append(
+        role="system",
+        text=(
+            "You are a helpful, concise voice assistant. "
+            "Respond naturally in 1-2 short sentences. Never output markdown, bullet points, or emojis."
+        )
+    )
+
+    # Realtime Voice Pipeline: Deepgram (STT) + OpenAI (LLM) + Cartesia/OpenAI (TTS)
+    # Or use native OpenAI Realtime Model: gpt-4o-realtime-preview
+    agent = VoicePipelineAgent(
+        vad=silero.VAD.load(
+            min_speech_duration=0.1,
+            min_silence_duration=0.3, # Snappy turn-taking
+            prefix_padding_duration=0.2,
+        ),
+        stt=deepgram.STT(model="nova-2", language="id"), # Multi-language support
+        llm=openai.LLM(model="gpt-4o-mini"),
+        tts=openai.TTS(voice="alloy"),
+        chat_ctx=initial_ctx,
+        allow_interruptions=True, # Barge-in capability
+        interrupt_speech_duration=0.3, # Immediate cutoff when user talks
+    )
+
+    agent.start(ctx.room, participant)
+    
+    # Greet user immediately
+    await agent.say("Halo! Ada yang bisa saya bantu hari ini?", now=True)
+
+if __name__ == "__main__":
+    cli.run_app(WorkerOptions(entrypoint_fnc=entrypoint))
+```
+
+---
+
+## 3. Production Recipe: Gemini Multimodal Live Audio (TypeScript / Node.js)
+
+```typescript
+// gemini-live-audio.ts - Bidirectional WebSocket PCM 24kHz
+import WebSocket from 'ws';
+
+interface GeminiAudioConfig {
+  apiKey: string;
+  model?: string;
+  systemInstruction?: string;
+}
+
+export class GeminiVoiceAgent {
+  private ws: WebSocket | null = null;
+  private isConnected = false;
+
+  constructor(private config: GeminiAudioConfig) {}
+
+  public async connect(): Promise<void> {
+    const url = `wss://generativelanguage.googleapis.com/ws/google.ai.generativelanguage.v1alpha.GenerativeService.BidiGenerateContent?key=${this.config.apiKey}`;
+    
+    this.ws = new WebSocket(url);
+
+    this.ws.on('open', () => {
+      this.isConnected = true;
+      this.sendInitialHandshake();
+    });
+
+    this.ws.on('message', (data: WebSocket.Data) => {
+      this.handleIncomingAudio(data);
+    });
+  }
+
+  private sendInitialHandshake(): void {
+    const setupMessage = {
+      setup: {
+        model: `models/${this.config.model || 'gemini-2.0-flash-exp'}`,
+        generationConfig: {
+          responseModalities: ["AUDIO"],
+          speechConfig: {
+            voiceConfig: {
+              prebuiltVoiceConfig: { voiceName: "Puck" }
+            }
+          }
+        },
+        systemInstruction: {
+          parts: [{ text: this.config.systemInstruction || "You are a conversational voice agent. Keep answers brief." }]
+        }
+      }
+    };
+    this.ws?.send(JSON.stringify(setupMessage));
+  }
+
+  // Stream raw PCM 16-bit 24kHz mono audio from mic
+  public sendAudioChunk(pcm16Chunk: Buffer): void {
+    if (!this.isConnected || !this.ws) return;
+
+    const base64Audio = pcm16Chunk.toString('base64');
+    const msg = {
+      realtimeInput: {
+        mediaChunks: [
+          {
+            mimeType: "audio/pcm;rate=24000",
+            data: base64Audio
+          }
+        ]
+      }
+    };
+    this.ws.send(JSON.stringify(msg));
+  }
+
+  private handleIncomingAudio(data: WebSocket.Data): void {
+    try {
+      const response = JSON.parse(data.toString());
+      const parts = response.serverContent?.modelTurn?.parts;
+      if (parts) {
+        for (const part of parts) {
+          if (part.inlineData?.data) {
+            const pcmBuffer = Buffer.from(part.inlineData.data, 'base64');
+            this.playAudioSpeaker(pcmBuffer);
+          }
+        }
+      }
+    } catch {
+      // Binary PCM frame handler
+    }
+  }
+
+  private playAudioSpeaker(pcmChunk: Buffer): void {
+    // Send to WebRTC audio track or audio output device
+  }
+}
+```
+
+---
+
+## 4. Key 2026 Performance Guardrails
+
+1. **Barge-in Latency Budget (<150ms)**: When the user speaks while the bot is talking, cancel outgoing audio immediately. Do not wait for the LLM to finish streaming its chunk.
+2. **Audio Sample Rates**:
+   - Mic Input: 16kHz or 24kHz 16-bit Linear PCM Mono.
+   - Bot Output: 24kHz PCM for crystal-clear natural prosody.
+3. **Turn-Taking Jitter Prevention**: Use minimum silence thresholds between `300ms` and `450ms`. Lower thresholds cause the bot to interrupt users when they pause to think; higher thresholds make the conversation feel robotic.
+
+---
+
+## Orchestration & Integration
+
+- **`ai-llm-integration-expert`**: For base LLM prompt routing and function calling during conversation.
+- **`realtime-collaboration-expert`**: For syncing WebRTC tracks and room states with client applications.
+- **`gemini-agent-booster`**: Connects Gemini 3.x / 2.0 Flash thinking models to live voice agents.
+- **`mobile-expo-expert`**: Audio streaming implementation in React Native with `expo-av` and WebRTC shim.

package/skills/vue-frontend-expert/SKILL.md

@@ -0,0 +1,132 @@
+---
+name: vue-frontend-expert
+description: "Expert guide for Vue 3 (Composition API), Nuxt 3, and Pinia. Covers advanced reactive state management, `<script setup>` syntax, Vue Router, VueUse, and SPA/SSR architectural patterns in English and Indonesian."
+author: "Roedy Rustam"
+---
+
+# Vue Frontend Expert (Vue 3 / Nuxt 3)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
+### Description
+Production-grade guidance for building highly reactive and scalable frontend applications using **Vue 3 (Composition API)** and **Nuxt 3**. Covers the latest ecosystem tools including **Pinia** for state management, **VueUse** for composables, and **Tailwind CSS v4** integration.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Scaffolding a new Vue 3 or Nuxt 3 project.
+- Writing or refactoring Vue components using `<script setup>` and Composition API.
+- Managing global state with Pinia.
+- Handling client-side routing with Vue Router or Nuxt's file-based routing.
+- Implementing SSR (Server-Side Rendering) or SSG (Static Site Generation) using Nuxt 3.
+
+---
+
+### Core Concepts
+
+#### 1. Vue 3 Composition API & `<script setup>`
+Use the `<script setup>` syntax by default. It provides better type inference, less boilerplate, and superior performance compared to the Options API.
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const count = ref(0)
+const doubleCount = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+
+onMounted(() => {
+  console.log('Component is mounted!')
+})
+</script>
+
+<template>
+  <button @click="increment">Count is: {{ count }} (Double: {{ doubleCount }})</button>
+</template>
+```
+
+#### 2. Global State Management (Pinia)
+Pinia is the official state management library for Vue. Avoid Vuex in modern applications.
+
+```typescript
+// stores/counter.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+```
+
+#### 3. Nuxt 3 Architecture
+For SSR, SEO optimization, and file-based routing, use Nuxt 3.
+- Data fetching: Use `useAsyncData` or `useFetch` to prevent hydration mismatches.
+- Server API: Utilize the `server/api/` directory for Nitro API routes.
+
+#### 4. The VueUse Collection
+Always leverage [VueUse](https://vueuse.org/) for common composables (e.g., `useWindowSize`, `onClickOutside`, `useStorage`) instead of writing custom composables from scratch.
+
+---
+
+### Best Practices
+1. **Ref vs Reactive:** Prefer `ref` for primitive values and `reactive` for deeply nested objects. When in doubt, default to `ref`.
+2. **Define Macros:** Use `defineProps` and `defineEmits` in `<script setup>` for typed props and events.
+3. **Avoid Watchers when possible:** Rely on `computed` properties instead of `watch` to derive state. Use `watch` only for side-effects (e.g., API calls, DOM manipulation).
+4. **V-Model:** Use the updated `v-model` binding in Vue 3.4+ with `defineModel()` for cleaner two-way data binding between components.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+This skill works best when combined with:
+- `design-system-architect` — To build headless UI components using Radix Vue or VueUse components.
+- `tailwind-expert` — For styling Vue/Nuxt components with Tailwind CSS v4.
+- `performance-web-vitals` — To optimize Nuxt 3 SSR metrics (LCP, INP).
+
+### Referenced By Orchestrators (MANDATORY)
+
+This skill should be referenced by the following orchestrators:
+- `brainstorming` — Add to "Frontend Frameworks" row in the Matrix.
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend Implementation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan tingkat produksi untuk membangun aplikasi frontend reaktif dan terukur menggunakan **Vue 3 (Composition API)** dan **Nuxt 3**. Mencakup pengelolaan state dengan **Pinia**, utilitas **VueUse**, dan integrasi **Tailwind CSS v4**.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna sedang:
+- Memulai proyek Vue 3 atau Nuxt 3 baru.
+- Menulis ulang (refactoring) komponen ke `<script setup>` dan Composition API.
+- Mengelola state global dengan Pinia (bukan Vuex).
+- Menerapkan SSR (Server-Side Rendering) dengan Nuxt 3.
+
+### Panduan Singkat
+
+- **Composition API Default:** Selalu gunakan sintaks `<script setup lang="ts">`. Lebih ringkas, type-safe, dan efisien.
+- **Pinia:** Gunakan Pinia dengan pola *Setup Store* (mirip Composition API) alih-alih pola Options (state, getters, actions).
+- **Nuxt 3 Fetching:** Gunakan `useFetch` atau `useAsyncData` di dalam komponen Nuxt untuk pengambilan data saat SSR, bukan `onMounted` dengan `fetch` biasa.
+- **Reaktivitas:** Gunakan `ref` untuk nilai primitif (string, number) dan `reactive` untuk objek bersarang yang kompleks. Utamakan `computed` daripada `watch` untuk state turunan.
+- **VueUse:** Jangan menulis fungsi utilitas dari nol jika sudah ada di *library* VueUse (contoh: `useIntersectionObserver`, `useLocalStorage`).

package/skills/wasm-edge-computing-expert/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: wasm-edge-computing-expert
+description: "Expert guide for WebAssembly (WASM) and Edge Computing. Covers WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, and high-performance browser computing / Panduan ahli untuk WebAssembly (WASM) dan Edge Computing. Mencakup WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, dan komputasi performa tinggi di browser."
+author: "Roedy Rustam"
+---
+
+# WASM & Edge Computing Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A specialized guide for writing, compiling, and deploying WebAssembly (WASM) modules both on the Edge and in the browser. Covers the new WebAssembly System Interface (WASI) Preview 2, serverless execution environments (Spin, Cloudflare Workers, Fastly Compute), and bidirectional JavaScript-to-WASM interop.
+
+### Trigger Conditions
+- When porting heavy computational tasks (image processing, video encoding, cryptography) from JavaScript to Rust/Go via WASM.
+- When deploying ultra-fast, cold-start-free serverless functions on Cloudflare Workers or Fermyon Spin.
+- When the user asks about "WASI", "WebAssembly", or "Edge computing performance".
+- When bridging legacy C/C++ libraries to run in the browser using Emscripten.
+
+### Core Architectural Guidelines
+
+#### 1. Language Choice & Toolchain
+- **Rust (Recommended)**: Use `wasm-pack` for browser modules and `cargo component` for WASI Preview 2. Rust offers the smallest binary sizes and no garbage collector overhead.
+- **Go**: Go 1.21+ has native WASI support (`GOOS=wasip1 GOARCH=wasm`), but binaries are larger due to the included runtime. Use TinyGo for smaller binaries.
+- **AssemblyScript**: Use when the team only knows TypeScript, though performance is slightly less than Rust.
+
+#### 2. Browser Integration (`wasm-bindgen`)
+When writing Rust for the browser, minimize crossings between JS and WASM, as serialization is expensive.
+```rust
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn compute_heavy_task(input: &[u8]) -> Vec<u8> {
+    // Process data entirely in WASM before returning
+    input.iter().map(|&b| b.wrapping_add(1)).collect()
+}
+```
+
+#### 3. Edge & WASI Preview 2
+WASI Preview 2 introduces the Component Model, allowing WASM modules to securely access system resources (HTTP, Filesystem) without being tied to a specific language.
+- Deploying to Cloudflare Workers:
+  ```toml
+  # wrangler.toml
+  main = "./build/worker.js"
+  [wasm_modules]
+  MODULE = "./build/module.wasm"
+  ```
+- Deploying to Fermyon Spin: Use the `spin` CLI to build microservices entirely in WASM that start in under 1 millisecond.
+
+#### 4. Shared Memory & Atomics
+For multi-threaded browser WASM, use `SharedArrayBuffer` and Web Workers. Ensure your server sends the correct headers:
+- `Cross-Origin-Opener-Policy: same-origin`
+- `Cross-Origin-Embedder-Policy: require-corp`
+
+## Orchestration & Integration
+- Enhances `api-gateway-proxy-expert` for running custom logic at the edge (Cloudflare/Kong).
+- Integrates with `rust-programming-expert` or `go-programming-expert` for module compilation.
+- Pairs with `performance-web-vitals` to offload main-thread blocking tasks.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan khusus untuk menulis, mengompilasi, dan mendeploy modul WebAssembly (WASM) baik di Edge maupun di browser. Mencakup WebAssembly System Interface (WASI) Preview 2, lingkungan serverless (Spin, Cloudflare Workers), dan interoperabilitas JavaScript-ke-WASM dua arah.
+
+### Kondisi Pemicu
+- Saat memindahkan tugas komputasi berat (pemrosesan gambar, kriptografi) dari JavaScript ke Rust/Go melalui WASM.
+- Saat mendeploy fungsi serverless ultra-cepat tanpa *cold start* di Cloudflare Workers atau Fermyon Spin.
+- Saat menjembatani library C/C++ lama untuk dijalankan di browser menggunakan Emscripten.
+
+### Panduan Arsitektur Inti
+
+#### 1. Pilihan Bahasa & Toolchain
+- **Rust (Direkomendasikan)**: Menghasilkan ukuran biner terkecil. Gunakan `wasm-pack` untuk web dan `cargo component` untuk WASI.
+- **Go**: Gunakan TinyGo untuk ukuran modul yang lebih kecil, atau Go native `GOOS=wasip1` untuk dukungan WASI penuh (namun biner akan lebih besar).
+- **AssemblyScript**: Jika tim hanya menguasai TypeScript.
+
+#### 2. Integrasi Browser
+Minimalkan pertukaran data (crossing) antara JavaScript dan WASM karena biaya serialisasinya tinggi. Kirim array besar (seperti `Uint8Array`) sekali, proses seluruhnya di WASM, lalu kembalikan hasilnya.
+
+#### 3. Edge & WASI Preview 2 (Component Model)
+WASI Preview 2 memungkinkan modul WASM mengakses resource sistem (HTTP, File) secara aman. Anda dapat mendeploy service WASM murni ke infrastruktur edge seperti Fermyon Spin atau Fastly dengan waktu mulai (startup time) di bawah 1 milidetik, jauh lebih cepat daripada container Docker tradisional.
+
+#### 4. Shared Memory & Web Workers
+Untuk performa multi-threading sejati di browser menggunakan WASM, gunakan `SharedArrayBuffer`. Pastikan server Anda mengirimkan header keamanan COOP dan COEP yang diwajibkan oleh browser modern.
+
+## Integrasi Orkestrasi
+- Memperkuat `api-gateway-proxy-expert` untuk logika kustom di edge.
+- Terintegrasi dengan `rust-programming-expert` untuk kompilasi modul.
+- Melengkapi `performance-web-vitals` dengan memindahkan komputasi berat dari *main thread* JavaScript.

package/skills/web-3d-graphics-expert/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: web-3d-graphics-expert
+description: "Expert guide for WebGL and 3D graphics in the browser using Three.js, Babylon.js, React Three Fiber (R3F), and TresJS. Covers scene optimization, shaders, lighting, 3D model loading (GLTF/GLB), and performance tuning."
+author: "Roedy Rustam"
+---
+
+# Web 3D Graphics Expert (Three.js & Babylon.js)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
+### Description
+Production-level guidance for developing high-performance 3D graphics in the browser. Covers the raw APIs of **Three.js** and **Babylon.js**, as well as framework-specific wrappers like **React Three Fiber (R3F)** for React and **TresJS** for Vue. Focuses on rendering performance, efficient memory management, and realistic lighting/material setups.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Initializing a WebGL/WebGPU 3D scene.
+- Using `three`, `@react-three/fiber`, `@babylonjs/core`, or `@tresjs/core`.
+- Loading 3D models (`.glb`, `.gltf`, `.obj`).
+- Adding advanced lighting, shadows, or Post-Processing effects (Bloom, Depth of Field).
+- Asking about framerate drops, memory leaks, or rendering performance in 3D apps.
+
+---
+
+### Core Concepts & Framework Selection
+
+#### 1. React Three Fiber (R3F) vs Vanilla Three.js
+When building with React, always use **React Three Fiber**. It manages the scene graph, object lifecycles, and `requestAnimationFrame` natively within the React component tree.
+
+```tsx
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls, Environment, useGLTF } from '@react-three/drei'
+
+export default function App() {
+  const { scene } = useGLTF('/model.glb')
+  return (
+    <Canvas camera={{ position: [0, 2, 5] }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} castShadow />
+      <primitive object={scene} />
+      <Environment preset="city" />
+      <OrbitControls />
+    </Canvas>
+  )
+}
+```
+*Note: Always use `@react-three/drei` for common helpers (OrbitControls, Text, Environment).*
+
+#### 2. Babylon.js vs Three.js
+- **Three.js**: Lighter, more flexible, vast community, excellent for creative coding, landing page animations, and React/Vue integrations.
+- **Babylon.js**: Robust, game-engine-like architecture, built-in physics, excellent for web-based games, AR/VR (WebXR), and complex interactive simulations. Fully written in TypeScript.
+
+```typescript
+// Basic Babylon.js Setup
+import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, HemisphericLight } from '@babylonjs/core'
+
+const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement
+const engine = new Engine(canvas, true)
+const scene = new Scene(engine)
+
+const camera = new FreeCamera('camera1', new Vector3(0, 5, -10), scene)
+camera.setTarget(Vector3.Zero())
+camera.attachControl(canvas, true)
+
+const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene)
+const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene)
+
+engine.runRenderLoop(() => {
+  scene.render()
+})
+```
+
+#### 3. Asset Loading & Optimization
+- **Format:** ALWAYS use `.glb` or `.gltf`. Avoid `.obj` or `.fbx` in the browser as they are unoptimized.
+- **Compression:** Use Draco compression (`glTF-Transform` or `gltf-pipeline`) to dramatically reduce file sizes.
+- **Loading:** Preload models if they are critical to the first paint.
+
+---
+
+### Best Practices for Performance
+
+1. **Geometry and Material Reuse:**
+   Never create new Geometries or Materials inside the render loop. Instantiate them once and reuse them. Use `InstancedMesh` (Three.js) or `Thin Instances` (Babylon.js) when rendering hundreds of identical objects.
+2. **Memory Management (Disposing):**
+   WebGL does not automatically garbage collect textures and geometries. When an object is removed from the scene, you MUST call `.dispose()` on its geometry and material.
+   *(Note: R3F handles this automatically when components unmount).*
+3. **Shadows & Lighting:**
+   Limit the number of shadow-casting lights to 1 or 2. Use baked shadows (lightmaps) for static scenes. Use `Environment` maps (HDRI) instead of multiple lights for realistic reflections.
+4. **Post-Processing:**
+   Post-processing requires rendering the scene multiple times. Use it sparingly. Group passes together when possible.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+This skill works best when combined with:
+- `senior-frontend` — When integrating React Three Fiber into Next.js/React applications.
+- `vue-frontend-expert` — When integrating TresJS into Vue 3/Nuxt 3 applications.
+- `performance-web-vitals` — To optimize the bundle size of 3D libraries and reduce Total Blocking Time (TBT).
+
+### Referenced By Orchestrators (MANDATORY)
+
+This skill should be referenced by the following orchestrators:
+- `brainstorming` — Add to "UI/UX & Design Systems" or create a "3D & Graphics" category.
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend Implementation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan produksi untuk pengembangan grafis 3D performa tinggi di browser. Mencakup **Three.js** dan **Babylon.js**, serta integrasi framework seperti **React Three Fiber (R3F)** untuk React dan **TresJS** untuk Vue. Fokus pada performa render, manajemen memori, dan pencahayaan realistis.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna sedang:
+- Menginisialisasi *scene* WebGL 3D.
+- Menggunakan library `three`, `@react-three/fiber`, atau `@babylonjs/core`.
+- Memuat model 3D (terutama format `.glb`/`.gltf`).
+- Mengoptimalkan FPS (frame-rate) atau menangani masalah *memory leak* pada aplikasi 3D.
+
+### Panduan Singkat
+- **Pemilihan Alat:** Gunakan **React Three Fiber** jika menggunakan React. Gunakan **TresJS** jika menggunakan Vue. Gunakan **Babylon.js** jika membuat game berbasis web yang membutuhkan mesin fisika kuat (physics engine).
+- **Format Aset:** Selalu gunakan format `.glb` dengan kompresi Draco.
+- **Performa:** Jangan membuat *Geometry* atau *Material* baru di dalam *render loop* (`requestAnimationFrame`). 
+- **Manajemen Memori:** Panggil method `.dispose()` pada geometry, material, dan texture yang sudah tidak digunakan di vanilla Three.js/Babylon.js untuk mencegah kebocoran memori.
+- **Pencahayaan:** Gunakan *Environment map* (HDRI) untuk pencahayaan realistis yang lebih ringan diproses daripada banyak lampu *directional/point*. Batasi lampu yang memancarkan bayangan maksimal 1-2 saja.

package/skills/web-game-engine-expert/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: web-game-engine-expert
+description: "Expert guide for web-based game development. Covers Entity Component System (ECS) architectures, physics engines (Rapier, Havok, Cannon-es), collision detection, and game loop optimization."
+author: "Roedy Rustam"
+---
+
+# Web Game Engine Expert (Physics & ECS)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
+### Description
+Production-grade guidance for building highly interactive 3D simulations and web games. Focuses on integrating modern WebAssembly-based **Physics Engines** (Havok, Rapier, Cannon-es) and structuring application state using the **Entity Component System (ECS)** pattern (e.g., bitECS, Miniplex).
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Adding physics (gravity, collisions, rigid bodies) to a 3D scene (Three.js/Babylon.js).
+- Dealing with performance issues in web games with thousands of objects.
+- Structuring a complex game or simulation architecture.
+- Using `@dimforge/rapier3d`, `havok`, or `cannon-es`.
+
+### Core Concepts
+
+#### 1. Physics Engine Integration
+Avoid calculating collisions manually in JavaScript. Use a dedicated physics engine.
+- **Babylon.js + Havok:** Babylon.js natively supports Havok Physics (the same engine used in AAA titles like Zelda BotW).
+- **Three.js / React Three Fiber + Rapier:** Use `@react-three/rapier` for seamless integration in R3F. It is written in Rust and compiled to WebAssembly.
+
+```tsx
+// React Three Fiber + Rapier Example
+import { Physics, RigidBody } from '@react-three/rapier';
+
+function GameScene() {
+  return (
+    <Physics gravity={[0, -9.81, 0]}>
+      {/* Falling Object */}
+      <RigidBody colliders="box" position={[0, 10, 0]}>
+        <mesh>
+          <boxGeometry />
+          <meshStandardMaterial color="hotpink" />
+        </mesh>
+      </RigidBody>
+
+      {/* Static Floor */}
+      <RigidBody type="fixed" colliders="cuboid">
+        <mesh position={[0, -1, 0]}>
+          <boxGeometry args={[10, 1, 10]} />
+          <meshStandardMaterial color="gray" />
+        </mesh>
+      </RigidBody>
+    </Physics>
+  );
+}
+```
+
+#### 2. Entity Component System (ECS)
+Traditional Object-Oriented Programming (OOP) can cause performance bottlenecks in games due to poor cache locality. ECS stores data in contiguous memory arrays (Components) and processes them in tight loops (Systems).
+- Use **bitECS** for extreme performance (uses TypedArrays).
+- Use **Miniplex** for an easier, developer-friendly React integration.
+
+### Best Practices
+- **Decouple Logic from Rendering:** The physics engine should update at a fixed timestep (e.g., 60Hz), while rendering should happen at the screen's refresh rate (e.g., 144Hz) using interpolation to prevent stuttering.
+- **Use Simple Colliders:** Never use complex mesh colliders (Convex/Trimesh) for moving objects unless absolutely necessary. Use primitives (Spheres, Boxes, Capsules).
+
+---
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `web-3d-graphics-expert` — For the visual rendering of the physics world.
+- `webxr-ar-vr-expert` — For adding grabbable physics objects in VR space.
+- `realtime-collaboration-expert` — For synchronizing physics state across multiple players using WebRTC.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "3D & Graphics" or "Game Development".
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend / Simulation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan pengembangan *game* dan simulasi 3D di web. Mencakup integrasi *Physics Engine* berbasis WebAssembly (Rapier, Havok, Cannon) dan arsitektur *Entity Component System* (ECS).
+
+### Kondisi Pemicu
+- Saat menambahkan gravitasi, tabrakan (collision), atau benda padat (rigid body) ke dalam aplikasi 3D.
+- Saat membuat game web yang membutuhkan performa tinggi dengan ribuan entitas.
+
+### Panduan Singkat
+- **Pilih Mesin Fisika:** Gunakan **Havok** jika menggunakan Babylon.js. Gunakan **Rapier** (`@react-three/rapier`) jika menggunakan Three.js/R3F.
+- **Gunakan Collider Sederhana:** Untuk objek bergerak, selalu gunakan *primitive colliders* (Kotak, Bola, Kapsul) alih-alih *mesh collider* agar perhitungan CPU/WASM tetap ringan.
+- **Pola ECS (Entity Component System):** Untuk game kompleks, pisahkan logika dan data menggunakan arsitektur ECS (seperti `miniplex` atau `bitECS`) untuk memaksimalkan performa *cache* memori.