vibes-plug 2.11.0 → 3.9.0

package/skills/global-a11y-i18n-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: global-a11y-i18n-expert
 description: "Expert guide for Web Accessibility (WCAG a11y) and Internationalization (i18n) / Panduan ahli untuk Aksesibilitas Web dan Internasionalisasi."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Global Accessibility (a11y) & i18n Expert
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 This skill focuses on making enterprise web applications universally accessible and globally adaptable. It covers Web Content Accessibility Guidelines (WCAG) compliance and Internationalization (i18n) patterns for multi-language, multi-timezone software.
@@ -53,7 +54,7 @@ Time is incredibly difficult to manage globally.
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Skill ini berfokus pada pembuatan aplikasi web skala *enterprise* yang dapat diakses secara universal dan diadaptasi secara global. Panduan ini mencakup kepatuhan pedoman Aksesibilitas Web (WCAG) serta pola Internasionalisasi (i18n) untuk perangkat lunak multi-bahasa dan multi-zona-waktu.
@@ -84,4 +85,4 @@ Menangani berbagai bahasa memerlukan perencanaan struktural.
 Mengelola waktu secara global sangatlah rumit.
 - **Penyimpanan**: SELALU simpan tanggal di dalam database dalam format UTC (`TIMESTAMPTZ` pada PostgreSQL). Jangan pernah menyimpan waktu lokal komputer.
 - **Transportasi**: Kirimkan tanggal melalui API dalam format ISO 8601 (mis., `2024-03-15T12:00:00Z`).
-- **Tampilan UI**: Konversikan waktu UTC ke zona waktu lokal pengguna *hanya di lapisan UI* sesaat sebelum dirender (menggunakan `Intl.DateTimeFormat` bawaan browser atau pustaka seperti `date-fns-tz`).
+- **Tampilan UI**: Konversikan waktu UTC ke zona waktu lokal pengguna *hanya di lapisan UI* sesaat sebelum dirender (menggunakan `Intl.DateTimeFormat` bawaan browser atau pustaka seperti `date-fns-tz`).

package/skills/glsl-shader-expert/SKILL.md

@@ -1,10 +1,11 @@
 ---
 name: glsl-shader-expert
-description: "Expert guide for writing custom GLSL shaders (Vertex/Fragment) for WebGL using Three.js and Babylon.js. Covers shader materials, post-processing, noise, and performance optimization."
-author: "Roedy Rustam"
+description: "Expert guide for modern web shaders: Three Shading Language (TSL), WebGPU WGSL, Compute Shaders, and WebGL GLSL in Three.js and Babylon.js. Covers procedural generation, compute kernels, and post-processing / Panduan ahli shader web modern: TSL, WGSL, Compute Shader, dan GLSL."
+author: "vibes-plug-swarm"
+version: "3.0.0"
 ---
 
-# GLSL Shader Expert (WebGL 3D Graphics)
+# Modern Web Shader Expert (TSL, WGSL, Compute Shaders & GLSL)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -14,75 +15,138 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills:
+- `web-3d-graphics-expert` — WebGPU/WebGL scene rendering and NodeMaterial binding.
+- `web-game-engine-expert` — Physics simulations, particle systems, and VFX materials.
+- `ui-ux-pro-max` — Modern visual effects, glassmorphism, and screen-space distortion.
+- `performance-web-vitals` — GPU profiling, draw call reduction, and compute shader optimization.
 
 ### Description
-Production-grade guidance for writing and integrating custom GLSL (OpenGL Shading Language) shaders into web applications using **Three.js** (`ShaderMaterial` / `RawShaderMaterial`) or **Babylon.js** (`ShaderMaterial`). Focuses on creating advanced visual effects, custom lighting models, procedural textures (noise), and post-processing passes.
+Production-grade guidance for authoring, compiling, and optimizing GPU shaders for modern web applications. Focuses on the cutting-edge **TSL (Three Shading Language)** node system which cross-compiles to both **WGSL (WebGPU)** and **GLSL (WebGL2)**, standalone **WGSL Compute Shaders** for parallel processing (particles, boids, simulation), and legacy **GLSL** optimization.
 
 ### Trigger Conditions
 Activate this skill when the user is:
-- Asking to create custom materials that standard PBR materials cannot achieve.
-- Writing Vertex or Fragment shaders in GLSL.
-- Implementing procedural generation (e.g., Perlin noise, Simplex noise) on the GPU.
-- Creating post-processing effects or screen-space shaders.
-- Optimizing GPU performance by moving CPU calculations to vertex shaders.
-
-### Core Concepts
-
-#### 1. The Graphics Pipeline
-Understand the flow:
-1. **Vertex Shader:** Runs for every vertex. Used to manipulate geometry (position) and pass data (varyings) to the fragment shader. Must set `gl_Position`.
-2. **Fragment Shader:** Runs for every pixel (fragment). Used to determine color. Must set `gl_FragColor`.
-
-#### 2. Three.js `ShaderMaterial` Example
-```javascript
-import * as THREE from 'three';
-
-const vertexShader = `
-  varying vec2 vUv;
-  void main() {
-    vUv = uv;
-    // Standard projection
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`;
-
-const fragmentShader = `
-  uniform float uTime;
-  varying vec2 vUv;
-  void main() {
-    // Simple animated color based on UV coordinates and time
-    vec3 color = vec3(vUv.x, vUv.y, sin(uTime) * 0.5 + 0.5);
-    gl_FragColor = vec4(color, 1.0);
-  }
-`;
-
-const material = new THREE.ShaderMaterial({
-  vertexShader,
-  fragmentShader,
-  uniforms: {
-    uTime: { value: 0 }
-  }
+- Writing custom shader materials in Three.js or Babylon.js.
+- Refactoring legacy GLSL shaders to Three Shading Language (TSL) or WebGPU WGSL.
+- Implementing WebGPU Compute Shaders (`@compute` workgroups, storage buffers).
+- Creating procedural VFX: fluid simulations, volumetric clouds, noise-based terrain, or holographic shields.
+- Designing post-processing screen passes (bloom, chromatic aberration, SSAO/GTAO, depth of field).
+- Optimizing GPU bottlenecks, thread divergence, or ALU instruction counts.
+
+---
+
+### Modern Web Shader Paradigms (2026)
+
+| Paradigm | Target API | Key Advantages | When to Use |
+| :--- | :--- | :--- | :--- |
+| **TSL (Three Shading Language)** | WebGPU + WebGL2 | Cross-compiles node trees to WGSL and GLSL; type-safe JavaScript/TypeScript syntax. | Default standard for modern Three.js (r170+) materials and post-processing. |
+| **WGSL (WebGPU Shading Language)** | WebGPU native | Direct GPU memory access, structured storage buffers, atomic operations. | Raw WebGPU apps, Babylon.js WebGPU compute, custom WebGPU pipelines. |
+| **Compute Shaders** | WebGPU | General-purpose GPU (GPGPU) computing; runs without rasterization or vertex buffers. | 100,000+ particle systems, cloth physics, fluid simulation, GPU boids. |
+| **GLSL (ES 3.0)** | WebGL2 fallback | Universal device compatibility on legacy hardware. | Legacy Three.js/Babylon.js projects and fallback pipelines. |
+
+---
+
+### 1. Three Shading Language (TSL) Node System
+
+TSL replaces string-concatenated GLSL with modular, type-safe node expressions that Three.js automatically compiles to WGSL on WebGPU and GLSL on WebGL2.
+
+```typescript
+import * as THREE from 'three/webgpu';
+import { Fn, float, vec3, color, uv, time, positionLocal, sin, uniform } from 'three/tsl';
+
+// Define custom dynamic uniforms
+const uFrequency = uniform(3.0);
+const uSpeed = uniform(1.5);
+
+// Reusable TSL shader function (Node-based)
+const waterWave = Fn(([freq, spd]) => {
+  const coord = uv();
+  const wave = sin(coord.x.mul(freq).add(time.mul(spd)))
+    .add(sin(coord.y.mul(freq).add(time.mul(spd))))
+    .mul(0.5);
+  return wave;
 });
+
+// Vertex Position displacement in TSL
+const displacedPosition = Fn(() => {
+  const wave = waterWave(uFrequency, uSpeed);
+  const newPos = positionLocal.add(vec3(0.0, wave.mul(0.2), 0.0));
+  return newPos;
+});
+
+// Create Node Material
+const oceanMaterial = new THREE.MeshStandardNodeMaterial();
+oceanMaterial.positionNode = displacedPosition();
+oceanMaterial.colorNode = Fn(() => {
+  const wave = waterWave(uFrequency, uSpeed);
+  const baseColor = color(0x004488);
+  const foamColor = color(0x88eeff);
+  return baseColor.mix(foamColor, wave.add(0.5));
+})();
 ```
-*Note: In the render loop, you must update `material.uniforms.uTime.value += delta;`*
 
-#### 3. Best Practices for Shaders
-- **Avoid Branching:** GPU threads run in lockstep (warps/wavefronts). `if/else` statements can cause significant performance drops. Prefer mathematical functions like `step()`, `smoothstep()`, `mix()`, and `clamp()`.
-- **Precision:** Explicitly declare float precision (`precision mediump float;` or `highp` if necessary). Use `mediump` for colors/UVs to save performance, particularly on mobile.
-- **Use Uniforms Wisely:** Only pass data that changes per frame or per object as uniforms.
+---
+
+### 2. WebGPU Compute Shaders (GPGPU Parallel Processing)
+
+Compute shaders run arbitrary mathematical workloads across thousands of GPU threads simultaneously:
+
+```typescript
+import * as THREE from 'three/webgpu';
+import { Fn, float, vec3, uniform, storage, instanceIndex } from 'three/tsl';
+
+const PARTICLE_COUNT = 65536;
+
+// Create GPU Storage Buffers
+const positionBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
+const velocityBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
+
+const posStorage = storage(positionBuffer, 'vec3', PARTICLE_COUNT);
+const velStorage = storage(velocityBuffer, 'vec3', PARTICLE_COUNT);
+
+// TSL Compute Kernel (executes per particle on GPU)
+const computeParticles = Fn(() => {
+  const index = instanceIndex;
+  const pos = posStorage.element(index);
+  const vel = velStorage.element(index);
+
+  // Update position based on velocity
+  pos.addAssign(vel.mul(0.016));
+
+  // Bounce off boundaries [-5, 5]
+  vel.y.assign(pos.y.lessThan(-5.0).select(vel.y.abs(), vel.y));
+  vel.y.assign(pos.y.greaterThan(5.0).select(vel.y.abs().negate(), vel.y));
+})().compute(PARTICLE_COUNT);
+
+// In the render loop:
+// renderer.compute(computeParticles);
+// renderer.render(scene, camera);
+```
 
 ---
 
-### Integration with Other Skills (MANDATORY)
-This skill works best when combined with:
-- `web-3d-graphics-expert` — For setting up the core WebGL scene in Three.js/Babylon.js.
-- `web-game-engine-expert` — For linking shader uniforms with physics data (e.g., impact ripples).
-- `ui-ux-pro-max` — For ensuring shader visual effects match the modern Web design tokens.
+### 3. High-Performance Shader Rules (GPU Architecture)
+
+1. **Eliminate Branching Divergence:**
+   - GPU threads execute in lockstep warps (NVIDIA: 32 threads, AMD/Apple: 32-64 threads).
+   - If threads inside the same warp take different branches in an `if/else`, both paths are evaluated serially, destroying throughput.
+   - **Use Math Primitives:** Replace branches with `step()`, `smoothstep()`, `mix()`, `clamp()`, or `select()`.
+   ```glsl
+   // BAD: Divergent GPU branch
+   if (vDepth > 0.5) { color = vec3(1.0); } else { color = vec3(0.0); }
 
-### Referenced By Orchestrators (MANDATORY)
-- `brainstorming` — Add to "3D & Graphics" or "UI/UX & Design Systems".
-- `zero-to-prod-orchestrator` — Phase 5 (Frontend / WebGL Implementation).
+   // GOOD: Branchless step function
+   color = vec3(step(0.5, vDepth));
+   ```
+
+2. **Precision Management:**
+   - Always specify precision for mobile GPUs.
+   - Use `mediump` (16-bit float) for colors, normal vectors, and UVs to gain 2x arithmetic throughput and save bandwidth.
+   - Reserve `highp` (32-bit float) for world-space coordinates and depth calculations.
+
+3. **Precompute on CPU or Vertex Shader:**
+   - Never compute values in the fragment shader (millions of pixels) that are constant across the mesh or linear across vertices.
+   - Move matrix inversions, static lighting directions, or uniform transformations to the CPU or Vertex stage.
 
 ---
 
@@ -90,18 +154,38 @@ This skill works best when combined with:
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `web-3d-graphics-expert` — Rendering scene WebGPU/WebGL dan integrasi NodeMaterial.
+- `web-game-engine-expert` — Simulasi fisika, sistem partikel, dan material efek game.
+- `ui-ux-pro-max` — Efek visual modern, glassmorphism, dan distorsi screen-space.
+- `performance-web-vitals` — Profiling GPU, optimasi draw call, dan compute shader.
 
 ### Deskripsi
-Panduan ahli untuk menulis dan mengintegrasikan shader GLSL khusus ke dalam aplikasi web menggunakan **Three.js** atau **Babylon.js**. Mencakup pembuatan *Vertex Shader*, *Fragment Shader*, efek visual prosedural, dan optimasi GPU.
+Panduan produksi untuk menulis, mengompilasi, dan mengoptimalkan shader GPU untuk aplikasi web modern. Fokus pada sistem node **TSL (Three Shading Language)** yang dapat dikompilasi silang menjadi **WGSL (WebGPU)** dan **GLSL (WebGL2)**, **Compute Shader WGSL** mandiri untuk pemrosesan paralel GPU skala masif (partikel, boids, simulasi cairan), dan optimasi **GLSL**.
 
 ### Kondisi Pemicu
-- Saat pengguna ingin membuat efek visual kustom (seperti air, hologram, distorsi) yang tidak bisa dilakukan oleh material standar.
-- Menulis kode GLSL untuk *ShaderMaterial*.
-- Mengoptimalkan performa grafis dengan memindahkan komputasi CPU ke GPU.
-
-### Panduan Singkat
-- **Vertex vs Fragment:** *Vertex shader* mengatur posisi dan memanipulasi geometri (`gl_Position`), sedangkan *Fragment shader* mengatur pewarnaan setiap pixel (`gl_FragColor`).
-- **Hindari If/Else:** CPU sangat cepat dalam percabangan (`if/else`), tetapi GPU sangat lambat. Gunakan fungsi interpolasi matematika bawaan GLSL seperti `step()`, `smoothstep()`, dan `mix()`.
-- **Gunakan Uniforms:** Gunakan `uniforms` untuk mengirim data dari JavaScript (seperti waktu, posisi mouse, atau tekstur) ke dalam shader. Update nilai uniform ini di dalam *render loop*.
-- **Presisi (Precision):** Gunakan `precision mediump float;` secara default untuk menyeimbangkan performa dan kualitas visual, terutama untuk optimalisasi *mobile*.
+Aktifkan skill ini ketika pengguna:
+- Menulis *custom shader material* pada Three.js atau Babylon.js.
+- Merefaktor shader GLSL lama menjadi Three Shading Language (TSL) atau WebGPU WGSL.
+- Mengimplementasikan WebGPU Compute Shader (`@compute` workgroups, storage buffers).
+- Membuat efek visual prosedural (simulasi air, awan volumetrik, medan prosedural, perisai hologram).
+- Merancang *post-processing passes* (bloom, chromatic aberration, SSAO, depth of field).
+- Mengatasi bottleneck GPU, *thread divergence*, atau instruksi ALU berlebih.
+
+---
+
+### Prinsip Utama Shader Modern
+
+1. **Adopsi TSL (Three Shading Language)**:
+   - Hindari menulis shader dalam bentuk *string concatenation* GLSL mentah pada proyek modern. Gunakan TSL (`Fn`, `color`, `uv`, `positionLocal`). TSL menjaga keamanan tipe (type-safety) dan otomatis menghasilkan WGSL atau GLSL sesuai runtime.
+
+2. **GPGPU dengan Compute Shader**:
+   - Manfaatkan WebGPU Compute Shader untuk kalkulasi ribuan partikel atau simulasi matematika tanpa melalui tahap rasterisasi atau vertex buffer tradisional.
+
+3. **Aturan Anti-Branching (Branchless Shader)**:
+   - GPU mengeksekusi instruksi dalam kelompok thread (*warp/wavefront*). Percabangan `if/else` yang tidak seragam akan memaksa GPU mengeksekusi kedua cabang secara berurutan (*branch penalty*).
+   - Gunakan fungsi matematika seperti `step()`, `smoothstep()`, dan `mix()` alih-alih percabangan logika kondisional.
+
+4. **Manajemen Presisi**:
+   - Gunakan `mediump` (16-bit float) untuk warna, koordinat UV, dan vektor normal untuk melipatgandakan kecepatan komputasi pada GPU smartphone.
+   - Gunakan `highp` (32-bit float) hanya untuk posisi ruang dunia (*world space*) dan perhitungan kedalaman (*depth*).

package/skills/go-programming-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: go-programming-expert
 description: "Expert-level skill for Go programming (Go 1.25+). Covers high-performance microservices, concurrency patterns, sqlc, net/http, Gin/Echo/Fiber, gRPC, and testing in English and Indonesian."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Go Programming Expert (Go 1.25 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Expert-level Go development for building high-performance microservices, APIs, and CLI tools. Covers **Go 1.25** features (range-over-func iterators, generic type aliases, weak pointers), structured logging with `slog`, `net/http` with the new ServeMux patterns, Gin/Echo/Fiber frameworks, sqlc for type-safe SQL, gRPC, and production testing patterns.
@@ -254,7 +255,7 @@ func TestGetUser(t *testing.T) {
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan Go tingkat ahli untuk membangun microservices, API, dan CLI tool berkinerja tinggi. Mencakup fitur **Go 1.25** (range-over-func, generic type alias, weak pointer), structured logging dengan `slog`, ServeMux `net/http` dengan pola baru (Go 1.22+), framework Gin/Echo/Fiber, sqlc untuk SQL type-safe, gRPC, dan pola pengujian produksi.
@@ -298,4 +299,4 @@ Gunakan pola worker pool dengan channel untuk memproses pekerjaan secara paralel
 ### Best Practices Pengujian
 - Gunakan `t.Parallel()` untuk semua test independen.
 - Gunakan table-driven tests untuk menguji banyak skenario dengan kode minimal.
-- Gunakan `testify/assert` dan `testify/require` untuk assertion yang ekspresif.
+- Gunakan `testify/assert` dan `testify/require` untuk assertion yang ekspresif.