vibes-plug 2.14.1 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +7 -2
  3. package/.cursorrules +8 -2
  4. package/AGENTS.md +23 -2
  5. package/CHANGELOG.md +114 -0
  6. package/CLAUDE.md +10 -3
  7. package/README.md +216 -611
  8. package/bin/vibes.mjs +1104 -0
  9. package/package.json +11 -3
  10. package/plugin.json +4 -3
  11. package/scripts/check-anti-slop.mjs +53 -0
  12. package/scripts/install.js +3 -1
  13. package/scripts/update_skills.js +1 -1
  14. package/scripts/update_skills.mjs +86 -0
  15. package/scripts/validate-skills.mjs +111 -0
  16. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  17. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  18. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  19. package/skills/agentic-memory-architect/SKILL.md +52 -0
  20. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  21. package/skills/ai-llm-integration-expert/SKILL.md +330 -194
  22. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  23. package/skills/ai-prompt-engineering-expert/SKILL.md +204 -134
  24. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  25. package/skills/angular-expert/SKILL.md +149 -148
  26. package/skills/anti-slop/SKILL.md +134 -133
  27. package/skills/api-design-expert/SKILL.md +4 -3
  28. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  29. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  30. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  31. package/skills/astro-framework-expert/SKILL.md +201 -200
  32. package/skills/async-queue-temporal-expert/SKILL.md +218 -217
  33. package/skills/authentication-identity-expert/SKILL.md +174 -173
  34. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  35. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  36. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  37. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  38. package/skills/brainstorming/SKILL.md +392 -377
  39. package/skills/browser-automation-expert/SKILL.md +260 -222
  40. package/skills/bun-runtime-expert/SKILL.md +5 -4
  41. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  42. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  43. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  44. package/skills/coderabbit/SKILL.md +5 -4
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  46. package/skills/composable-mach-architect/SKILL.md +338 -0
  47. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  48. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  49. package/skills/data-telemetry-expert/SKILL.md +5 -4
  50. package/skills/data-visualization-expert/SKILL.md +155 -154
  51. package/skills/database-orm-expert/SKILL.md +166 -165
  52. package/skills/deep-research-analyst/SKILL.md +182 -136
  53. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  54. package/skills/design-system-architect/SKILL.md +4 -3
  55. package/skills/desktop-electron-expert/SKILL.md +129 -128
  56. package/skills/documentation-site-expert/SKILL.md +60 -59
  57. package/skills/doku-mcp-server/SKILL.md +5 -4
  58. package/skills/doku-payment-gateway/SKILL.md +250 -232
  59. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  60. package/skills/e2e-testing-expert/SKILL.md +5 -4
  61. package/skills/ecommerce-expert/SKILL.md +88 -87
  62. package/skills/email-notification-expert/SKILL.md +5 -4
  63. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  64. package/skills/error-resilience-expert/SKILL.md +14 -13
  65. package/skills/event-driven-architect/SKILL.md +5 -4
  66. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  67. package/skills/file-upload-media-expert/SKILL.md +5 -4
  68. package/skills/firebase-security-expert/SKILL.md +5 -4
  69. package/skills/form-validation-expert/SKILL.md +7 -6
  70. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  71. package/skills/fullstack-expert/SKILL.md +185 -184
  72. package/skills/gemini-agent-booster/SKILL.md +248 -172
  73. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  74. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  75. package/skills/glsl-shader-expert/SKILL.md +191 -190
  76. package/skills/go-programming-expert/SKILL.md +5 -4
  77. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -200
  78. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  79. package/skills/headless-cms-expert/SKILL.md +182 -181
  80. package/skills/hig/SKILL.md +5 -4
  81. package/skills/js-backend-expert/SKILL.md +219 -218
  82. package/skills/legacy-code-translator/SKILL.md +6 -5
  83. package/skills/llm-finops-router/SKILL.md +52 -0
  84. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  85. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  86. package/skills/mcp-server-architect/SKILL.md +315 -307
  87. package/skills/micro-frontend-architect/SKILL.md +5 -4
  88. package/skills/mobile-expo-expert/SKILL.md +5 -4
  89. package/skills/modern-css-native-expert/SKILL.md +190 -189
  90. package/skills/monorepo-architect/SKILL.md +5 -4
  91. package/skills/mpa-orchestrator/SKILL.md +41 -4
  92. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  93. package/skills/mvc-expert/SKILL.md +5 -4
  94. package/skills/n8n-automation-expert/SKILL.md +90 -89
  95. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  96. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  97. package/skills/payment-gateway-expert/SKILL.md +131 -128
  98. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  99. package/skills/performance-web-vitals/SKILL.md +5 -4
  100. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  101. package/skills/prd-architect/SKILL.md +183 -182
  102. package/skills/proactive-background-watcher/SKILL.md +5 -4
  103. package/skills/production-ready-hardener/SKILL.md +10 -9
  104. package/skills/pwa-offline-first-expert/SKILL.md +227 -226
  105. package/skills/pydantic-ai-expert/SKILL.md +162 -161
  106. package/skills/python-programming-expert/SKILL.md +5 -4
  107. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  108. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  109. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  110. package/skills/rust-programming-expert/SKILL.md +5 -4
  111. package/skills/saas-architect/SKILL.md +155 -154
  112. package/skills/saas-billing/SKILL.md +394 -382
  113. package/skills/saas-multi-tenant/SKILL.md +7 -6
  114. package/skills/scalability-clean-code/SKILL.md +5 -4
  115. package/skills/search-engine-expert/SKILL.md +90 -89
  116. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  117. package/skills/senior-frontend/SKILL.md +14 -9
  118. package/skills/seo/SKILL.md +4 -4
  119. package/skills/session-memory-manager/SKILL.md +129 -128
  120. package/skills/solidjs-expert/SKILL.md +81 -80
  121. package/skills/spa-orchestrator/SKILL.md +5 -4
  122. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  123. package/skills/state-management-expert/SKILL.md +5 -4
  124. package/skills/supabase-security-expert/SKILL.md +5 -4
  125. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  126. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  127. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -155
  128. package/skills/tailwind-expert/SKILL.md +62 -5
  129. package/skills/tanstack-query-expert/SKILL.md +5 -4
  130. package/skills/tauri-expert/SKILL.md +5 -4
  131. package/skills/typescript-expert/SKILL.md +5 -4
  132. package/skills/ui-ux-pro-max/SKILL.md +7 -6
  133. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  134. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -181
  135. package/skills/voice-ai-realtime-agent/SKILL.md +243 -242
  136. package/skills/vue-frontend-expert/SKILL.md +5 -4
  137. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  138. package/skills/web-3d-graphics-expert/SKILL.md +314 -313
  139. package/skills/web-game-engine-expert/SKILL.md +330 -329
  140. package/skills/web-scraper/SKILL.md +158 -157
  141. package/skills/website-design-cloner/SKILL.md +5 -4
  142. package/skills/webxr-ar-vr-expert/SKILL.md +163 -162
  143. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  144. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  145. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -229
  146. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  147. package/BLUEPRINT.md +0 -319
  148. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  149. package/skills/multiple-entry-points/SKILL.md +0 -91
  150. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  151. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: global-a11y-i18n-expert
3
3
  description: "Expert guide for Web Accessibility (WCAG a11y) and Internationalization (i18n) / Panduan ahli untuk Aksesibilitas Web dan Internasionalisasi."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Global Accessibility (a11y) & i18n Expert
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### Orchestration & Integration
17
- Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  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.
53
54
  ## Bahasa Indonesia
54
55
 
55
56
  ### Integrasi Orkestrasi
56
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
57
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
57
58
 
58
59
  ### Deskripsi
59
60
  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.
84
85
  Mengelola waktu secara global sangatlah rumit.
85
86
  - **Penyimpanan**: SELALU simpan tanggal di dalam database dalam format UTC (`TIMESTAMPTZ` pada PostgreSQL). Jangan pernah menyimpan waktu lokal komputer.
86
87
  - **Transportasi**: Kirimkan tanggal melalui API dalam format ISO 8601 (mis., `2024-03-15T12:00:00Z`).
87
- - **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`).
88
+ - **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`).
@@ -1,190 +1,191 @@
1
- ---
2
- name: glsl-shader-expert
3
- 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."
4
- author: "vibes-plug-swarm"
5
- ---
6
-
7
- # Modern Web Shader Expert (TSL, WGSL, Compute Shaders & GLSL)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Orchestration & Integration
17
- Connects and orchestrates with relevant domain skills:
18
- - `web-3d-graphics-expert` — WebGPU/WebGL scene rendering and NodeMaterial binding.
19
- - `web-game-engine-expert` — Physics simulations, particle systems, and VFX materials.
20
- - `ui-ux-pro-max` — Modern visual effects, glassmorphism, and screen-space distortion.
21
- - `performance-web-vitals` — GPU profiling, draw call reduction, and compute shader optimization.
22
-
23
- ### Description
24
- 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.
25
-
26
- ### Trigger Conditions
27
- Activate this skill when the user is:
28
- - Writing custom shader materials in Three.js or Babylon.js.
29
- - Refactoring legacy GLSL shaders to Three Shading Language (TSL) or WebGPU WGSL.
30
- - Implementing WebGPU Compute Shaders (`@compute` workgroups, storage buffers).
31
- - Creating procedural VFX: fluid simulations, volumetric clouds, noise-based terrain, or holographic shields.
32
- - Designing post-processing screen passes (bloom, chromatic aberration, SSAO/GTAO, depth of field).
33
- - Optimizing GPU bottlenecks, thread divergence, or ALU instruction counts.
34
-
35
- ---
36
-
37
- ### Modern Web Shader Paradigms (2026)
38
-
39
- | Paradigm | Target API | Key Advantages | When to Use |
40
- | :--- | :--- | :--- | :--- |
41
- | **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. |
42
- | **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. |
43
- | **Compute Shaders** | WebGPU | General-purpose GPU (GPGPU) computing; runs without rasterization or vertex buffers. | 100,000+ particle systems, cloth physics, fluid simulation, GPU boids. |
44
- | **GLSL (ES 3.0)** | WebGL2 fallback | Universal device compatibility on legacy hardware. | Legacy Three.js/Babylon.js projects and fallback pipelines. |
45
-
46
- ---
47
-
48
- ### 1. Three Shading Language (TSL) Node System
49
-
50
- TSL replaces string-concatenated GLSL with modular, type-safe node expressions that Three.js automatically compiles to WGSL on WebGPU and GLSL on WebGL2.
51
-
52
- ```typescript
53
- import * as THREE from 'three/webgpu';
54
- import { Fn, float, vec3, color, uv, time, positionLocal, sin, uniform } from 'three/tsl';
55
-
56
- // Define custom dynamic uniforms
57
- const uFrequency = uniform(3.0);
58
- const uSpeed = uniform(1.5);
59
-
60
- // Reusable TSL shader function (Node-based)
61
- const waterWave = Fn(([freq, spd]) => {
62
- const coord = uv();
63
- const wave = sin(coord.x.mul(freq).add(time.mul(spd)))
64
- .add(sin(coord.y.mul(freq).add(time.mul(spd))))
65
- .mul(0.5);
66
- return wave;
67
- });
68
-
69
- // Vertex Position displacement in TSL
70
- const displacedPosition = Fn(() => {
71
- const wave = waterWave(uFrequency, uSpeed);
72
- const newPos = positionLocal.add(vec3(0.0, wave.mul(0.2), 0.0));
73
- return newPos;
74
- });
75
-
76
- // Create Node Material
77
- const oceanMaterial = new THREE.MeshStandardNodeMaterial();
78
- oceanMaterial.positionNode = displacedPosition();
79
- oceanMaterial.colorNode = Fn(() => {
80
- const wave = waterWave(uFrequency, uSpeed);
81
- const baseColor = color(0x004488);
82
- const foamColor = color(0x88eeff);
83
- return baseColor.mix(foamColor, wave.add(0.5));
84
- })();
85
- ```
86
-
87
- ---
88
-
89
- ### 2. WebGPU Compute Shaders (GPGPU Parallel Processing)
90
-
91
- Compute shaders run arbitrary mathematical workloads across thousands of GPU threads simultaneously:
92
-
93
- ```typescript
94
- import * as THREE from 'three/webgpu';
95
- import { Fn, float, vec3, uniform, storage, instanceIndex } from 'three/tsl';
96
-
97
- const PARTICLE_COUNT = 65536;
98
-
99
- // Create GPU Storage Buffers
100
- const positionBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
101
- const velocityBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
102
-
103
- const posStorage = storage(positionBuffer, 'vec3', PARTICLE_COUNT);
104
- const velStorage = storage(velocityBuffer, 'vec3', PARTICLE_COUNT);
105
-
106
- // TSL Compute Kernel (executes per particle on GPU)
107
- const computeParticles = Fn(() => {
108
- const index = instanceIndex;
109
- const pos = posStorage.element(index);
110
- const vel = velStorage.element(index);
111
-
112
- // Update position based on velocity
113
- pos.addAssign(vel.mul(0.016));
114
-
115
- // Bounce off boundaries [-5, 5]
116
- vel.y.assign(pos.y.lessThan(-5.0).select(vel.y.abs(), vel.y));
117
- vel.y.assign(pos.y.greaterThan(5.0).select(vel.y.abs().negate(), vel.y));
118
- })().compute(PARTICLE_COUNT);
119
-
120
- // In the render loop:
121
- // renderer.compute(computeParticles);
122
- // renderer.render(scene, camera);
123
- ```
124
-
125
- ---
126
-
127
- ### 3. High-Performance Shader Rules (GPU Architecture)
128
-
129
- 1. **Eliminate Branching Divergence:**
130
- - GPU threads execute in lockstep warps (NVIDIA: 32 threads, AMD/Apple: 32-64 threads).
131
- - If threads inside the same warp take different branches in an `if/else`, both paths are evaluated serially, destroying throughput.
132
- - **Use Math Primitives:** Replace branches with `step()`, `smoothstep()`, `mix()`, `clamp()`, or `select()`.
133
- ```glsl
134
- // BAD: Divergent GPU branch
135
- if (vDepth > 0.5) { color = vec3(1.0); } else { color = vec3(0.0); }
136
-
137
- // GOOD: Branchless step function
138
- color = vec3(step(0.5, vDepth));
139
- ```
140
-
141
- 2. **Precision Management:**
142
- - Always specify precision for mobile GPUs.
143
- - Use `mediump` (16-bit float) for colors, normal vectors, and UVs to gain 2x arithmetic throughput and save bandwidth.
144
- - Reserve `highp` (32-bit float) for world-space coordinates and depth calculations.
145
-
146
- 3. **Precompute on CPU or Vertex Shader:**
147
- - Never compute values in the fragment shader (millions of pixels) that are constant across the mesh or linear across vertices.
148
- - Move matrix inversions, static lighting directions, or uniform transformations to the CPU or Vertex stage.
149
-
150
- ---
151
-
152
- <a name="bahasa-indonesia"></a>
153
- ## Bahasa Indonesia
154
-
155
- ### Integrasi Orkestrasi
156
- Terhubung dan mengorkestrasi skill domain yang relevan:
157
- - `web-3d-graphics-expert` — Rendering scene WebGPU/WebGL dan integrasi NodeMaterial.
158
- - `web-game-engine-expert` — Simulasi fisika, sistem partikel, dan material efek game.
159
- - `ui-ux-pro-max` — Efek visual modern, glassmorphism, dan distorsi screen-space.
160
- - `performance-web-vitals` — Profiling GPU, optimasi draw call, dan compute shader.
161
-
162
- ### Deskripsi
163
- 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**.
164
-
165
- ### Kondisi Pemicu
166
- Aktifkan skill ini ketika pengguna:
167
- - Menulis *custom shader material* pada Three.js atau Babylon.js.
168
- - Merefaktor shader GLSL lama menjadi Three Shading Language (TSL) atau WebGPU WGSL.
169
- - Mengimplementasikan WebGPU Compute Shader (`@compute` workgroups, storage buffers).
170
- - Membuat efek visual prosedural (simulasi air, awan volumetrik, medan prosedural, perisai hologram).
171
- - Merancang *post-processing passes* (bloom, chromatic aberration, SSAO, depth of field).
172
- - Mengatasi bottleneck GPU, *thread divergence*, atau instruksi ALU berlebih.
173
-
174
- ---
175
-
176
- ### Prinsip Utama Shader Modern
177
-
178
- 1. **Adopsi TSL (Three Shading Language)**:
179
- - 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.
180
-
181
- 2. **GPGPU dengan Compute Shader**:
182
- - Manfaatkan WebGPU Compute Shader untuk kalkulasi ribuan partikel atau simulasi matematika tanpa melalui tahap rasterisasi atau vertex buffer tradisional.
183
-
184
- 3. **Aturan Anti-Branching (Branchless Shader)**:
185
- - GPU mengeksekusi instruksi dalam kelompok thread (*warp/wavefront*). Percabangan `if/else` yang tidak seragam akan memaksa GPU mengeksekusi kedua cabang secara berurutan (*branch penalty*).
186
- - Gunakan fungsi matematika seperti `step()`, `smoothstep()`, dan `mix()` alih-alih percabangan logika kondisional.
187
-
188
- 4. **Manajemen Presisi**:
189
- - Gunakan `mediump` (16-bit float) untuk warna, koordinat UV, dan vektor normal untuk melipatgandakan kecepatan komputasi pada GPU smartphone.
190
- - Gunakan `highp` (32-bit float) hanya untuk posisi ruang dunia (*world space*) dan perhitungan kedalaman (*depth*).
1
+ ---
2
+ name: glsl-shader-expert
3
+ 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."
4
+ author: "vibes-plug-swarm"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # Modern Web Shader Expert (TSL, WGSL, Compute Shaders & GLSL)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Orchestration & Integration
18
+ Connects and orchestrates with relevant domain skills:
19
+ - `web-3d-graphics-expert` — WebGPU/WebGL scene rendering and NodeMaterial binding.
20
+ - `web-game-engine-expert` — Physics simulations, particle systems, and VFX materials.
21
+ - `ui-ux-pro-max` — Modern visual effects, glassmorphism, and screen-space distortion.
22
+ - `performance-web-vitals` — GPU profiling, draw call reduction, and compute shader optimization.
23
+
24
+ ### Description
25
+ 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.
26
+
27
+ ### Trigger Conditions
28
+ Activate this skill when the user is:
29
+ - Writing custom shader materials in Three.js or Babylon.js.
30
+ - Refactoring legacy GLSL shaders to Three Shading Language (TSL) or WebGPU WGSL.
31
+ - Implementing WebGPU Compute Shaders (`@compute` workgroups, storage buffers).
32
+ - Creating procedural VFX: fluid simulations, volumetric clouds, noise-based terrain, or holographic shields.
33
+ - Designing post-processing screen passes (bloom, chromatic aberration, SSAO/GTAO, depth of field).
34
+ - Optimizing GPU bottlenecks, thread divergence, or ALU instruction counts.
35
+
36
+ ---
37
+
38
+ ### Modern Web Shader Paradigms (2026)
39
+
40
+ | Paradigm | Target API | Key Advantages | When to Use |
41
+ | :--- | :--- | :--- | :--- |
42
+ | **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. |
43
+ | **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. |
44
+ | **Compute Shaders** | WebGPU | General-purpose GPU (GPGPU) computing; runs without rasterization or vertex buffers. | 100,000+ particle systems, cloth physics, fluid simulation, GPU boids. |
45
+ | **GLSL (ES 3.0)** | WebGL2 fallback | Universal device compatibility on legacy hardware. | Legacy Three.js/Babylon.js projects and fallback pipelines. |
46
+
47
+ ---
48
+
49
+ ### 1. Three Shading Language (TSL) Node System
50
+
51
+ TSL replaces string-concatenated GLSL with modular, type-safe node expressions that Three.js automatically compiles to WGSL on WebGPU and GLSL on WebGL2.
52
+
53
+ ```typescript
54
+ import * as THREE from 'three/webgpu';
55
+ import { Fn, float, vec3, color, uv, time, positionLocal, sin, uniform } from 'three/tsl';
56
+
57
+ // Define custom dynamic uniforms
58
+ const uFrequency = uniform(3.0);
59
+ const uSpeed = uniform(1.5);
60
+
61
+ // Reusable TSL shader function (Node-based)
62
+ const waterWave = Fn(([freq, spd]) => {
63
+ const coord = uv();
64
+ const wave = sin(coord.x.mul(freq).add(time.mul(spd)))
65
+ .add(sin(coord.y.mul(freq).add(time.mul(spd))))
66
+ .mul(0.5);
67
+ return wave;
68
+ });
69
+
70
+ // Vertex Position displacement in TSL
71
+ const displacedPosition = Fn(() => {
72
+ const wave = waterWave(uFrequency, uSpeed);
73
+ const newPos = positionLocal.add(vec3(0.0, wave.mul(0.2), 0.0));
74
+ return newPos;
75
+ });
76
+
77
+ // Create Node Material
78
+ const oceanMaterial = new THREE.MeshStandardNodeMaterial();
79
+ oceanMaterial.positionNode = displacedPosition();
80
+ oceanMaterial.colorNode = Fn(() => {
81
+ const wave = waterWave(uFrequency, uSpeed);
82
+ const baseColor = color(0x004488);
83
+ const foamColor = color(0x88eeff);
84
+ return baseColor.mix(foamColor, wave.add(0.5));
85
+ })();
86
+ ```
87
+
88
+ ---
89
+
90
+ ### 2. WebGPU Compute Shaders (GPGPU Parallel Processing)
91
+
92
+ Compute shaders run arbitrary mathematical workloads across thousands of GPU threads simultaneously:
93
+
94
+ ```typescript
95
+ import * as THREE from 'three/webgpu';
96
+ import { Fn, float, vec3, uniform, storage, instanceIndex } from 'three/tsl';
97
+
98
+ const PARTICLE_COUNT = 65536;
99
+
100
+ // Create GPU Storage Buffers
101
+ const positionBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
102
+ const velocityBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
103
+
104
+ const posStorage = storage(positionBuffer, 'vec3', PARTICLE_COUNT);
105
+ const velStorage = storage(velocityBuffer, 'vec3', PARTICLE_COUNT);
106
+
107
+ // TSL Compute Kernel (executes per particle on GPU)
108
+ const computeParticles = Fn(() => {
109
+ const index = instanceIndex;
110
+ const pos = posStorage.element(index);
111
+ const vel = velStorage.element(index);
112
+
113
+ // Update position based on velocity
114
+ pos.addAssign(vel.mul(0.016));
115
+
116
+ // Bounce off boundaries [-5, 5]
117
+ vel.y.assign(pos.y.lessThan(-5.0).select(vel.y.abs(), vel.y));
118
+ vel.y.assign(pos.y.greaterThan(5.0).select(vel.y.abs().negate(), vel.y));
119
+ })().compute(PARTICLE_COUNT);
120
+
121
+ // In the render loop:
122
+ // renderer.compute(computeParticles);
123
+ // renderer.render(scene, camera);
124
+ ```
125
+
126
+ ---
127
+
128
+ ### 3. High-Performance Shader Rules (GPU Architecture)
129
+
130
+ 1. **Eliminate Branching Divergence:**
131
+ - GPU threads execute in lockstep warps (NVIDIA: 32 threads, AMD/Apple: 32-64 threads).
132
+ - If threads inside the same warp take different branches in an `if/else`, both paths are evaluated serially, destroying throughput.
133
+ - **Use Math Primitives:** Replace branches with `step()`, `smoothstep()`, `mix()`, `clamp()`, or `select()`.
134
+ ```glsl
135
+ // BAD: Divergent GPU branch
136
+ if (vDepth > 0.5) { color = vec3(1.0); } else { color = vec3(0.0); }
137
+
138
+ // GOOD: Branchless step function
139
+ color = vec3(step(0.5, vDepth));
140
+ ```
141
+
142
+ 2. **Precision Management:**
143
+ - Always specify precision for mobile GPUs.
144
+ - Use `mediump` (16-bit float) for colors, normal vectors, and UVs to gain 2x arithmetic throughput and save bandwidth.
145
+ - Reserve `highp` (32-bit float) for world-space coordinates and depth calculations.
146
+
147
+ 3. **Precompute on CPU or Vertex Shader:**
148
+ - Never compute values in the fragment shader (millions of pixels) that are constant across the mesh or linear across vertices.
149
+ - Move matrix inversions, static lighting directions, or uniform transformations to the CPU or Vertex stage.
150
+
151
+ ---
152
+
153
+ <a name="bahasa-indonesia"></a>
154
+ ## Bahasa Indonesia
155
+
156
+ ### Integrasi Orkestrasi
157
+ Terhubung dan mengorkestrasi skill domain yang relevan:
158
+ - `web-3d-graphics-expert` — Rendering scene WebGPU/WebGL dan integrasi NodeMaterial.
159
+ - `web-game-engine-expert` — Simulasi fisika, sistem partikel, dan material efek game.
160
+ - `ui-ux-pro-max` — Efek visual modern, glassmorphism, dan distorsi screen-space.
161
+ - `performance-web-vitals` — Profiling GPU, optimasi draw call, dan compute shader.
162
+
163
+ ### Deskripsi
164
+ 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**.
165
+
166
+ ### Kondisi Pemicu
167
+ Aktifkan skill ini ketika pengguna:
168
+ - Menulis *custom shader material* pada Three.js atau Babylon.js.
169
+ - Merefaktor shader GLSL lama menjadi Three Shading Language (TSL) atau WebGPU WGSL.
170
+ - Mengimplementasikan WebGPU Compute Shader (`@compute` workgroups, storage buffers).
171
+ - Membuat efek visual prosedural (simulasi air, awan volumetrik, medan prosedural, perisai hologram).
172
+ - Merancang *post-processing passes* (bloom, chromatic aberration, SSAO, depth of field).
173
+ - Mengatasi bottleneck GPU, *thread divergence*, atau instruksi ALU berlebih.
174
+
175
+ ---
176
+
177
+ ### Prinsip Utama Shader Modern
178
+
179
+ 1. **Adopsi TSL (Three Shading Language)**:
180
+ - 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.
181
+
182
+ 2. **GPGPU dengan Compute Shader**:
183
+ - Manfaatkan WebGPU Compute Shader untuk kalkulasi ribuan partikel atau simulasi matematika tanpa melalui tahap rasterisasi atau vertex buffer tradisional.
184
+
185
+ 3. **Aturan Anti-Branching (Branchless Shader)**:
186
+ - GPU mengeksekusi instruksi dalam kelompok thread (*warp/wavefront*). Percabangan `if/else` yang tidak seragam akan memaksa GPU mengeksekusi kedua cabang secara berurutan (*branch penalty*).
187
+ - Gunakan fungsi matematika seperti `step()`, `smoothstep()`, dan `mix()` alih-alih percabangan logika kondisional.
188
+
189
+ 4. **Manajemen Presisi**:
190
+ - Gunakan `mediump` (16-bit float) untuk warna, koordinat UV, dan vektor normal untuk melipatgandakan kecepatan komputasi pada GPU smartphone.
191
+ - Gunakan `highp` (32-bit float) hanya untuk posisi ruang dunia (*world space*) dan perhitungan kedalaman (*depth*).
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: go-programming-expert
3
3
  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."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Go Programming Expert (Go 1.25 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### Orchestration & Integration
17
- Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  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) {
254
255
  ## Bahasa Indonesia
255
256
 
256
257
  ### Integrasi Orkestrasi
257
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
258
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
258
259
 
259
260
  ### Deskripsi
260
261
  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
298
299
  ### Best Practices Pengujian
299
300
  - Gunakan `t.Parallel()` untuk semua test independen.
300
301
  - Gunakan table-driven tests untuk menguji banyak skenario dengan kode minimal.
301
- - Gunakan `testify/assert` dan `testify/require` untuk assertion yang ekspresif.
302
+ - Gunakan `testify/assert` dan `testify/require` untuk assertion yang ekspresif.