vibes-plug 2.5.0 → 2.11.0

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

@@ -1,126 +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."
+---
+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
-
-### 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
-
-### 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`).
+---
+
+# 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

@@ -1,131 +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."
+---
+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
-
-### 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
-
-### 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.
+---
+
+# 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.