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,167 +1,168 @@
1
- ---
2
- name: local-slm-edge-ai-expert
3
- description: "Expert guide for Local Small Language Models (SLMs) and Edge AI execution — WebLLM, Transformers.js v3, ONNX Runtime Web, WebGPU, and zero-latency local embeddings / Panduan ahli SLM lokal dan AI edge di browser."
4
- author: "Roedy Rustam"
5
- ---
6
-
7
- # Local SLM & Edge AI Expert (WebGPU & In-Browser Intelligence)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Purpose & Overview
17
- Production-grade architectural guide for running **Small Language Models (SLMs)** and embedding models directly inside client browsers and edge runtimes. Eliminates cloud API costs, guarantees 100% data privacy (zero cloud data leakage), and enables instant, offline-capable AI features using **WebGPU**, **Transformers.js v3**, **WebLLM**, and **ONNX Runtime Web**.
18
-
19
- ### Key Capabilities
20
- 1. **Client-Side Model Execution**: Running quantized 1B–4B SLMs (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5 1.5B/3B) entirely inside the user's browser via WebGPU.
21
- 2. **In-Browser Embeddings**: Fast client-side vector embeddings with models like `all-MiniLM-L6-v2` or `bge-small-en-v1.5` using Transformers.js v3.
22
- 3. **Hybrid Edge-Cloud Fallback**: Gracefully falling back to server-side LLMs when client hardware lacks WebGPU or sufficient VRAM.
23
- 4. **Zero-Latency PII Masking**: Anonymizing sensitive user data locally on the client before sending queries to external LLMs.
24
-
25
- ---
26
-
27
- ### Production Implementation Recipes
28
-
29
- #### Recipe 1: In-Browser Semantic Embedding Generation with Transformers.js v3
30
- ```typescript
31
- import { pipeline, env } from '@huggingface/transformers';
32
-
33
- // Configure cache and worker settings
34
- env.allowLocalModels = false;
35
- env.useBrowserCache = true;
36
-
37
- let embedder: any = null;
38
-
39
- export async function getLocalEmbedding(text: string): Promise<number[]> {
40
- if (!embedder) {
41
- embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
42
- dtype: 'fp32',
43
- device: 'webgpu', // Accelerate via WebGPU if supported
44
- });
45
- }
46
-
47
- const output = await embedder(text, { pooling: 'mean', normalize: true });
48
- return Array.from(output.data);
49
- }
50
- ```
51
-
52
- #### Recipe 2: WebLLM In-Browser Chat Assistant with WebGPU
53
- ```typescript
54
- import * as webllm from '@mlc-ai/web-llm';
55
-
56
- export async function createLocalChatEngine(onProgress?: (report: webllm.InitProgressReport) => void) {
57
- // Check WebGPU compatibility
58
- if (!('gpu' in navigator)) {
59
- throw new Error('WebGPU is not supported in this browser. Fallback to cloud API.');
60
- }
61
-
62
- const selectedModel = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
63
-
64
- const engine = await webllm.CreateMLCEngine(selectedModel, {
65
- initProgressCallback: onProgress,
66
- });
67
-
68
- return {
69
- generateResponse: async (prompt: string): Promise<string> => {
70
- const reply = await engine.chat.completions.create({
71
- messages: [{ role: 'user', content: prompt }],
72
- temperature: 0.2,
73
- });
74
- return reply.choices[0]?.message.content || '';
75
- },
76
- };
77
- }
78
- ```
79
-
80
- ---
81
-
82
- ### Implementation Checklist
83
- - [ ] Implement browser feature detection (`'gpu' in navigator`) before initiating WebGPU model loads.
84
- - [ ] Provide a transparent download progress bar when fetching model weights on initial visit.
85
- - [ ] Cache model shards in IndexedDB or Cache API to ensure instant subsequent launches.
86
- - [ ] Provide automatic fallback to lightweight serverless APIs when client device VRAM is constrained.
87
-
88
- ## Orchestration & Integration
89
- - Integrates with: `ai-cost-token-optimizer`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
90
-
91
- ---
92
-
93
- <a name="bahasa-indonesia"></a>
94
- ## Bahasa Indonesia
95
-
96
- ### Tujuan & Gambaran Umum
97
- Panduan arsitektur tingkat produksi untuk menjalankan **Small Language Models (SLM)** dan model *embedding* langsung di dalam browser pengguna dan runtime edge. Menghilangkan biaya API cloud, menjamin privasi data 100% (tidak ada data yang keluar ke server pihak ketiga), dan mengaktifkan fitur AI instan yang dapat bekerja secara *offline* menggunakan **WebGPU**, **Transformers.js v3**, **WebLLM**, dan **ONNX Runtime Web**.
98
-
99
- ### Kemampuan Utama
100
- 1. **Eksekusi Model di Sisi Klien**: Menjalankan SLM terkuantisasi 1B–4B (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5) sepenuhnya di dalam browser pengguna dengan akselerasi WebGPU.
101
- 2. **Embedding Vektor di Browser**: Pembuatan vektor semantik secepat kilat menggunakan Transformers.js v3 (`all-MiniLM-L6-v2` atau `bge-small`).
102
- 3. **Fallback Hibrida Klien-Cloud**: Mengalihkan tugas ke server secara otomatis jika perangkat klien tidak mendukung WebGPU atau memiliki VRAM terbatas.
103
- 4. **Penyensoran PII Tanpa Latensi**: Mengaburkan data pribadi sensitif secara lokal di perangkat klien sebelum diteruskan ke cloud.
104
-
105
- ---
106
-
107
- ### Resep Implementasi Produksi
108
-
109
- #### Resep 1: Pembuatan Embedding Vektor di Browser dengan Transformers.js v3
110
- ```typescript
111
- import { pipeline, env } from '@huggingface/transformers';
112
-
113
- env.allowLocalModels = false;
114
- env.useBrowserCache = true;
115
-
116
- let modelEmbedding: any = null;
117
-
118
- export async function buatEmbeddingLokal(teks: string): Promise<number[]> {
119
- if (!modelEmbedding) {
120
- modelEmbedding = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
121
- dtype: 'fp32',
122
- device: 'webgpu',
123
- });
124
- }
125
-
126
- const hasil = await modelEmbedding(teks, { pooling: 'mean', normalize: true });
127
- return Array.from(hasil.data);
128
- }
129
- ```
130
-
131
- #### Resep 2: Asisten AI di Browser dengan WebLLM & WebGPU
132
- ```typescript
133
- import * as webllm from '@mlc-ai/web-llm';
134
-
135
- export async function inisialisasiMesinLokal(laporanProgres?: (laporan: webllm.InitProgressReport) => void) {
136
- if (!('gpu' in navigator)) {
137
- throw new Error('WebGPU tidak didukung pada browser ini. Alihkan ke API cloud.');
138
- }
139
-
140
- const modelTerpilih = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
141
-
142
- const mesin = await webllm.CreateMLCEngine(modelTerpilih, {
143
- initProgressCallback: laporanProgres,
144
- });
145
-
146
- return {
147
- kirimPesan: async (pertanyaan: string): Promise<string> => {
148
- const balasan = await mesin.chat.completions.create({
149
- messages: [{ role: 'user', content: pertanyaan }],
150
- temperature: 0.2,
151
- });
152
- return balasan.choices[0]?.message.content || '';
153
- },
154
- };
155
- }
156
- ```
157
-
158
- ---
159
-
160
- ### Checklist Implementasi
161
- - [ ] Deteksi ketersediaan WebGPU (`'gpu' in navigator`) sebelum memuat model.
162
- - [ ] Tampilkan indikator progres unduhan bobot model saat pertama kali diakses.
163
- - [ ] Simpan bobot model di Cache API atau IndexedDB agar kunjungan berikutnya instan tanpa unduh ulang.
164
- - [ ] Siapkan jalur fallback ke API cloud jika memori klien tidak mencukupi.
165
-
166
- ## Integrasi Orkestrasi
167
- - Terintegrasi dengan: `ai-cost-token-optimizer`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
1
+ ---
2
+ name: local-slm-edge-ai-expert
3
+ description: "Expert guide for Local Small Language Models (SLMs) and Edge AI execution — WebLLM, Transformers.js v3, ONNX Runtime Web, WebGPU, and zero-latency local embeddings / Panduan ahli SLM lokal dan AI edge di browser."
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # Local SLM & Edge AI Expert (WebGPU & In-Browser Intelligence)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Purpose & Overview
18
+ Production-grade architectural guide for running **Small Language Models (SLMs)** and embedding models directly inside client browsers and edge runtimes. Eliminates cloud API costs, guarantees 100% data privacy (zero cloud data leakage), and enables instant, offline-capable AI features using **WebGPU**, **Transformers.js v3**, **WebLLM**, and **ONNX Runtime Web**.
19
+
20
+ ### Key Capabilities
21
+ 1. **Client-Side Model Execution**: Running quantized 1B–4B SLMs (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5 1.5B/3B) entirely inside the user's browser via WebGPU.
22
+ 2. **In-Browser Embeddings**: Fast client-side vector embeddings with models like `all-MiniLM-L6-v2` or `bge-small-en-v1.5` using Transformers.js v3.
23
+ 3. **Hybrid Edge-Cloud Fallback**: Gracefully falling back to server-side LLMs when client hardware lacks WebGPU or sufficient VRAM.
24
+ 4. **Zero-Latency PII Masking**: Anonymizing sensitive user data locally on the client before sending queries to external LLMs.
25
+
26
+ ---
27
+
28
+ ### Production Implementation Recipes
29
+
30
+ #### Recipe 1: In-Browser Semantic Embedding Generation with Transformers.js v3
31
+ ```typescript
32
+ import { pipeline, env } from '@huggingface/transformers';
33
+
34
+ // Configure cache and worker settings
35
+ env.allowLocalModels = false;
36
+ env.useBrowserCache = true;
37
+
38
+ let embedder: any = null;
39
+
40
+ export async function getLocalEmbedding(text: string): Promise<number[]> {
41
+ if (!embedder) {
42
+ embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
43
+ dtype: 'fp32',
44
+ device: 'webgpu', // Accelerate via WebGPU if supported
45
+ });
46
+ }
47
+
48
+ const output = await embedder(text, { pooling: 'mean', normalize: true });
49
+ return Array.from(output.data);
50
+ }
51
+ ```
52
+
53
+ #### Recipe 2: WebLLM In-Browser Chat Assistant with WebGPU
54
+ ```typescript
55
+ import * as webllm from '@mlc-ai/web-llm';
56
+
57
+ export async function createLocalChatEngine(onProgress?: (report: webllm.InitProgressReport) => void) {
58
+ // Check WebGPU compatibility
59
+ if (!('gpu' in navigator)) {
60
+ throw new Error('WebGPU is not supported in this browser. Fallback to cloud API.');
61
+ }
62
+
63
+ const selectedModel = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
64
+
65
+ const engine = await webllm.CreateMLCEngine(selectedModel, {
66
+ initProgressCallback: onProgress,
67
+ });
68
+
69
+ return {
70
+ generateResponse: async (prompt: string): Promise<string> => {
71
+ const reply = await engine.chat.completions.create({
72
+ messages: [{ role: 'user', content: prompt }],
73
+ temperature: 0.2,
74
+ });
75
+ return reply.choices[0]?.message.content || '';
76
+ },
77
+ };
78
+ }
79
+ ```
80
+
81
+ ---
82
+
83
+ ### Implementation Checklist
84
+ - [ ] Implement browser feature detection (`'gpu' in navigator`) before initiating WebGPU model loads.
85
+ - [ ] Provide a transparent download progress bar when fetching model weights on initial visit.
86
+ - [ ] Cache model shards in IndexedDB or Cache API to ensure instant subsequent launches.
87
+ - [ ] Provide automatic fallback to lightweight serverless APIs when client device VRAM is constrained.
88
+
89
+ ## Orchestration & Integration
90
+ - Integrates with: `ai-cost-token-optimizer`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
91
+
92
+ ---
93
+
94
+ <a name="bahasa-indonesia"></a>
95
+ ## Bahasa Indonesia
96
+
97
+ ### Tujuan & Gambaran Umum
98
+ Panduan arsitektur tingkat produksi untuk menjalankan **Small Language Models (SLM)** dan model *embedding* langsung di dalam browser pengguna dan runtime edge. Menghilangkan biaya API cloud, menjamin privasi data 100% (tidak ada data yang keluar ke server pihak ketiga), dan mengaktifkan fitur AI instan yang dapat bekerja secara *offline* menggunakan **WebGPU**, **Transformers.js v3**, **WebLLM**, dan **ONNX Runtime Web**.
99
+
100
+ ### Kemampuan Utama
101
+ 1. **Eksekusi Model di Sisi Klien**: Menjalankan SLM terkuantisasi 1B–4B (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5) sepenuhnya di dalam browser pengguna dengan akselerasi WebGPU.
102
+ 2. **Embedding Vektor di Browser**: Pembuatan vektor semantik secepat kilat menggunakan Transformers.js v3 (`all-MiniLM-L6-v2` atau `bge-small`).
103
+ 3. **Fallback Hibrida Klien-Cloud**: Mengalihkan tugas ke server secara otomatis jika perangkat klien tidak mendukung WebGPU atau memiliki VRAM terbatas.
104
+ 4. **Penyensoran PII Tanpa Latensi**: Mengaburkan data pribadi sensitif secara lokal di perangkat klien sebelum diteruskan ke cloud.
105
+
106
+ ---
107
+
108
+ ### Resep Implementasi Produksi
109
+
110
+ #### Resep 1: Pembuatan Embedding Vektor di Browser dengan Transformers.js v3
111
+ ```typescript
112
+ import { pipeline, env } from '@huggingface/transformers';
113
+
114
+ env.allowLocalModels = false;
115
+ env.useBrowserCache = true;
116
+
117
+ let modelEmbedding: any = null;
118
+
119
+ export async function buatEmbeddingLokal(teks: string): Promise<number[]> {
120
+ if (!modelEmbedding) {
121
+ modelEmbedding = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
122
+ dtype: 'fp32',
123
+ device: 'webgpu',
124
+ });
125
+ }
126
+
127
+ const hasil = await modelEmbedding(teks, { pooling: 'mean', normalize: true });
128
+ return Array.from(hasil.data);
129
+ }
130
+ ```
131
+
132
+ #### Resep 2: Asisten AI di Browser dengan WebLLM & WebGPU
133
+ ```typescript
134
+ import * as webllm from '@mlc-ai/web-llm';
135
+
136
+ export async function inisialisasiMesinLokal(laporanProgres?: (laporan: webllm.InitProgressReport) => void) {
137
+ if (!('gpu' in navigator)) {
138
+ throw new Error('WebGPU tidak didukung pada browser ini. Alihkan ke API cloud.');
139
+ }
140
+
141
+ const modelTerpilih = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
142
+
143
+ const mesin = await webllm.CreateMLCEngine(modelTerpilih, {
144
+ initProgressCallback: laporanProgres,
145
+ });
146
+
147
+ return {
148
+ kirimPesan: async (pertanyaan: string): Promise<string> => {
149
+ const balasan = await mesin.chat.completions.create({
150
+ messages: [{ role: 'user', content: pertanyaan }],
151
+ temperature: 0.2,
152
+ });
153
+ return balasan.choices[0]?.message.content || '';
154
+ },
155
+ };
156
+ }
157
+ ```
158
+
159
+ ---
160
+
161
+ ### Checklist Implementasi
162
+ - [ ] Deteksi ketersediaan WebGPU (`'gpu' in navigator`) sebelum memuat model.
163
+ - [ ] Tampilkan indikator progres unduhan bobot model saat pertama kali diakses.
164
+ - [ ] Simpan bobot model di Cache API atau IndexedDB agar kunjungan berikutnya instan tanpa unduh ulang.
165
+ - [ ] Siapkan jalur fallback ke API cloud jika memori klien tidak mencukupi.
166
+
167
+ ## Integrasi Orkestrasi
168
+ - Terintegrasi dengan: `ai-cost-token-optimizer`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: logging-error-tracking-expert
3
3
  description: "Expert guide for structured logging (Pino, Winston), error tracking (Sentry), log aggregation (Axiom, Datadog), request correlation, and GDPR-compliant log management / Panduan ahli untuk logging terstruktur (Pino, Winston), pelacakan error (Sentry), agregasi log, korelasi request, dan manajemen log sesuai GDPR."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Logging & Error Tracking Expert (2026 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
  Production-grade guide for implementing structured logging, error tracking, and application monitoring. Covers **Pino** (high-performance JSON logging), **Sentry** SDK integration (React, Node.js, Next.js), **source map upload** for production errors, **request ID correlation** across microservices, **log aggregation** (Axiom, Datadog, Logflare), **alert rules**, **GDPR-compliant log redaction** (PII masking), and **OpenTelemetry integration**.
@@ -321,7 +322,7 @@ const LOG_RETENTION = {
321
322
  ## Bahasa Indonesia
322
323
 
323
324
  ### Integrasi Orkestrasi
324
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
325
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
325
326
 
326
327
  ### Deskripsi
327
328
  Panduan tingkat produksi untuk mengimplementasikan logging terstruktur, pelacakan error, dan pemantauan aplikasi. Mencakup **Pino** (logging JSON berkinerja tinggi), integrasi SDK **Sentry** (React, Node.js, Next.js), **upload source map** untuk error produksi, **korelasi request ID** lintas microservice, **agregasi log** (Axiom, Datadog, Logflare), **aturan alerting**, **redaksi log sesuai GDPR** (masking PII), dan integrasi **OpenTelemetry**.
@@ -341,4 +342,4 @@ Aktifkan skill ini ketika:
341
342
  - `error-resilience-expert` — Setup pelacakan error dan monitoring
342
343
  - `js-backend-expert` — Middleware logging sisi server (Fastify/Hono/Express)
343
344
  - `ci-cd-devops-architect` — Upload source map dalam pipeline CI/CD
344
- - `production-ready-hardener` — Audit logging dan monitoring pra-peluncuran
345
+ - `production-ready-hardener` — Audit logging dan monitoring pra-peluncuran