vibes-plug 1.0.0 → 2.11.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 (183) hide show
  1. package/.claude/rules/vibes-plug-core.md +32 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +51 -0
  3. package/.cursorrules +42 -0
  4. package/AGENTS.md +96 -0
  5. package/BLUEPRINT.md +309 -125
  6. package/CHANGELOG.md +183 -1
  7. package/CLAUDE.md +70 -0
  8. package/LICENSE +1 -1
  9. package/README.md +641 -263
  10. package/index.js +19 -0
  11. package/package.json +61 -25
  12. package/plugin.json +24 -7
  13. package/scripts/generate_swarm_gif.py +295 -0
  14. package/scripts/install.js +201 -0
  15. package/skills/accessibility-testing-expert/SKILL.md +116 -0
  16. package/skills/ai-cost-token-optimizer/SKILL.md +82 -0
  17. package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
  18. package/skills/ai-llm-integration-expert/SKILL.md +147 -122
  19. package/skills/ai-media-generation-expert/SKILL.md +172 -0
  20. package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
  21. package/skills/angular-expert/SKILL.md +148 -0
  22. package/skills/api-design-expert/SKILL.md +316 -309
  23. package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
  24. package/skills/app-analyzer-optimizer/SKILL.md +195 -188
  25. package/skills/apple-ecosystem-expert/SKILL.md +145 -0
  26. package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
  27. package/skills/astro-framework-expert/SKILL.md +200 -0
  28. package/skills/async-queue-temporal-expert/SKILL.md +240 -0
  29. package/skills/authentication-identity-expert/SKILL.md +279 -45
  30. package/skills/auto-doc-updater/SKILL.md +219 -203
  31. package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
  32. package/skills/autonomous-red-teamer/SKILL.md +203 -0
  33. package/skills/autonomous-tdd-debugger/SKILL.md +71 -0
  34. package/skills/background-jobs-queue-expert/SKILL.md +235 -0
  35. package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
  36. package/skills/blockchain-web3-expert/SKILL.md +115 -0
  37. package/skills/bootstrap-to-modern/SKILL.md +93 -86
  38. package/skills/brainstorming/SKILL.md +381 -353
  39. package/skills/browser-automation-expert/SKILL.md +222 -0
  40. package/skills/bun-runtime-expert/SKILL.md +7 -1
  41. package/skills/chatbot-messaging-expert/SKILL.md +114 -0
  42. package/skills/ci-cd-devops-architect/SKILL.md +81 -45
  43. package/skills/cloud-hosting-expert/SKILL.md +249 -243
  44. package/skills/coderabbit/SKILL.md +197 -191
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
  46. package/skills/cron-scheduler-expert/SKILL.md +304 -0
  47. package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
  48. package/skills/data-telemetry-expert/SKILL.md +218 -212
  49. package/skills/data-visualization-expert/SKILL.md +154 -0
  50. package/skills/database-migration-versioning-expert/SKILL.md +90 -0
  51. package/skills/database-orm-expert/SKILL.md +303 -293
  52. package/skills/dependency-upgrade-migrator/SKILL.md +301 -0
  53. package/skills/design-system-architect/SKILL.md +278 -242
  54. package/skills/desktop-electron-expert/SKILL.md +128 -0
  55. package/skills/documentation-site-expert/SKILL.md +59 -0
  56. package/skills/doku-mcp-server/SKILL.md +257 -0
  57. package/skills/doku-payment-gateway/SKILL.md +233 -0
  58. package/skills/domain-driven-design-expert/SKILL.md +82 -0
  59. package/skills/e2e-testing-expert/SKILL.md +320 -314
  60. package/skills/ecommerce-expert/SKILL.md +87 -0
  61. package/skills/edge-serverless-db-expert/SKILL.md +99 -0
  62. package/skills/email-notification-expert/SKILL.md +368 -0
  63. package/skills/error-resilience-expert/SKILL.md +486 -0
  64. package/skills/event-driven-architect/SKILL.md +86 -80
  65. package/skills/feature-flag-analytics-expert/SKILL.md +66 -0
  66. package/skills/file-upload-media-expert/SKILL.md +437 -0
  67. package/skills/firebase-security-expert/SKILL.md +7 -1
  68. package/skills/form-validation-expert/SKILL.md +407 -0
  69. package/skills/fullstack-expert/SKILL.md +260 -201
  70. package/skills/fullstack-expert/references/api_design_guide.md +466 -466
  71. package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
  72. package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
  73. package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
  74. package/skills/gemini-agent-booster/SKILL.md +142 -104
  75. package/skills/geospatial-maps-expert/SKILL.md +80 -0
  76. package/skills/global-a11y-i18n-expert/SKILL.md +86 -80
  77. package/skills/glsl-shader-expert/SKILL.md +107 -0
  78. package/skills/go-programming-expert/SKILL.md +300 -294
  79. package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
  80. package/skills/graphql-apollo-expert/SKILL.md +114 -0
  81. package/skills/headless-cms-expert/SKILL.md +181 -0
  82. package/skills/hig/SKILL.md +193 -187
  83. package/skills/js-backend-expert/SKILL.md +218 -191
  84. package/skills/legacy-code-translator/SKILL.md +71 -0
  85. package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
  86. package/skills/logging-error-tracking-expert/SKILL.md +344 -0
  87. package/skills/mcp-client-orchestrator/SKILL.md +76 -0
  88. package/skills/mcp-server-architect/SKILL.md +226 -126
  89. package/skills/micro-frontend-architect/SKILL.md +112 -0
  90. package/skills/mobile-expo-expert/SKILL.md +191 -185
  91. package/skills/mobile-push-notification-expert/SKILL.md +71 -0
  92. package/skills/modern-css-native-expert/SKILL.md +189 -0
  93. package/skills/monday-design-aesthetic/SKILL.md +72 -66
  94. package/skills/monorepo-architect/SKILL.md +232 -226
  95. package/skills/mpa-orchestrator/SKILL.md +120 -101
  96. package/skills/multi-agent-orchestration/SKILL.md +173 -153
  97. package/skills/multiple-entry-points/SKILL.md +91 -55
  98. package/skills/mvc-expert/SKILL.md +237 -231
  99. package/skills/n8n-automation-expert/SKILL.md +89 -0
  100. package/skills/nextjs-app-router-expert/SKILL.md +148 -0
  101. package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
  102. package/skills/payment-gateway-expert/SKILL.md +129 -45
  103. package/skills/pdf-document-generation-expert/SKILL.md +91 -0
  104. package/skills/performance-web-vitals/SKILL.md +337 -331
  105. package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
  106. package/skills/prd-architect/SKILL.md +206 -190
  107. package/skills/proactive-background-watcher/SKILL.md +68 -0
  108. package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
  109. package/skills/production-ready-hardener/SKILL.md +461 -468
  110. package/skills/production-ready-hardener/references/production_checklist.md +161 -161
  111. package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
  112. package/skills/project-context-mapper/SKILL.md +85 -0
  113. package/skills/pwa-offline-first-expert/SKILL.md +185 -0
  114. package/skills/python-programming-expert/SKILL.md +407 -270
  115. package/skills/rate-limit-abuse-prevention/SKILL.md +377 -0
  116. package/skills/realtime-collaboration-expert/SKILL.md +99 -45
  117. package/skills/rich-text-editor-expert/SKILL.md +177 -0
  118. package/skills/rust-programming-expert/SKILL.md +240 -234
  119. package/skills/saas-billing/SKILL.md +382 -376
  120. package/skills/saas-multi-tenant/SKILL.md +256 -236
  121. package/skills/saas-mvp-launcher/SKILL.md +30 -1
  122. package/skills/saas-transformer/SKILL.md +499 -445
  123. package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
  124. package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
  125. package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
  126. package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
  127. package/skills/scalability-clean-code/SKILL.md +234 -228
  128. package/skills/search-engine-expert/SKILL.md +89 -0
  129. package/skills/secure-fuzz-testing/SKILL.md +7 -1
  130. package/skills/self-evolving-memory-graph/SKILL.md +91 -0
  131. package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
  132. package/skills/senior-frontend/SKILL.md +85 -105
  133. package/skills/seo/SKILL.md +258 -224
  134. package/skills/session-context-loader/SKILL.md +83 -0
  135. package/skills/session-handoff-resume/SKILL.md +163 -157
  136. package/skills/{skill_baru → skill-baru}/SKILL.md +177 -146
  137. package/skills/solidjs-expert/SKILL.md +80 -0
  138. package/skills/spa-orchestrator/SKILL.md +306 -287
  139. package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
  140. package/skills/state-management-expert/SKILL.md +277 -271
  141. package/skills/supabase-migration/SKILL.md +47 -1
  142. package/skills/supabase-security-expert/SKILL.md +248 -242
  143. package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
  144. package/skills/svg-animation-motion-expert/SKILL.md +115 -0
  145. package/skills/tailwind-expert/SKILL.md +139 -187
  146. package/skills/tanstack-query-expert/SKILL.md +204 -198
  147. package/skills/tauri-expert/SKILL.md +7 -1
  148. package/skills/token-saver/SKILL.md +118 -110
  149. package/skills/typescript-expert/SKILL.md +329 -278
  150. package/skills/ui-components-expert/SKILL.md +166 -63
  151. package/skills/ui-ux-pro-max/SKILL.md +221 -200
  152. package/skills/vector-db-rag-expert/SKILL.md +208 -0
  153. package/skills/vibe-code-gardener/SKILL.md +180 -172
  154. package/skills/visual-qa-vision-agent/SKILL.md +71 -0
  155. package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
  156. package/skills/vue-frontend-expert/SKILL.md +132 -0
  157. package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
  158. package/skills/web-3d-graphics-expert/SKILL.md +137 -0
  159. package/skills/web-game-engine-expert/SKILL.md +102 -0
  160. package/skills/web-scraper/SKILL.md +98 -146
  161. package/skills/website-design-cloner/SKILL.md +180 -0
  162. package/skills/webxr-ar-vr-expert/SKILL.md +123 -0
  163. package/skills/wordpress-headless-expert/SKILL.md +144 -0
  164. package/skills/zero-to-prod-orchestrator/SKILL.md +231 -180
  165. package/skills/zero-trust-secret-vault/SKILL.md +88 -0
  166. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  167. package/CONTRIBUTING.md +0 -199
  168. package/SECURITY.md +0 -21
  169. package/banner.png +0 -0
  170. package/skills/senior-fullstack/SKILL.md +0 -167
  171. package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
  172. package/skills/senior-fullstack/references/development_workflows.md +0 -222
  173. package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
  174. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
  175. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
  176. package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
  177. package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
  178. package/skills/seo-geo/SKILL.md +0 -188
  179. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  180. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  181. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  182. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  183. package/skills/ui_ux_expert/SKILL.md +0 -114
@@ -0,0 +1,167 @@
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`.
@@ -0,0 +1,344 @@
1
+ ---
2
+ name: logging-error-tracking-expert
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"
5
+ ---
6
+
7
+ # Logging & Error Tracking Expert (2026 Edition)
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 like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
19
+ ### Description
20
+ 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**.
21
+
22
+ ### Trigger Conditions
23
+ Activate this skill when:
24
+ - Setting up structured logging for Node.js/Bun backend services.
25
+ - Integrating Sentry for error tracking in React/Next.js apps.
26
+ - Implementing request ID correlation across microservices.
27
+ - Setting up log aggregation and search (Axiom, Datadog, Grafana Loki).
28
+ - Configuring alerting rules for production errors.
29
+ - Implementing GDPR-compliant log management (PII redaction).
30
+ - Setting up source map uploads for production debugging.
31
+
32
+ ---
33
+
34
+ ### Logging Library Selection Guide
35
+
36
+ | Library | Best For | Performance | Output Format |
37
+ |---|---|---|---|
38
+ | **Pino** | High-throughput Node.js services | ⭐⭐⭐⭐⭐ (fastest) | JSON (structured) |
39
+ | **Winston** | Enterprise, multiple transports | ⭐⭐⭐ | Configurable |
40
+ | **Bunyan** | Legacy projects | ⭐⭐⭐⭐ | JSON |
41
+ | **console.log** | Never in production | ❌ | Unstructured |
42
+
43
+ **Recommendation**: Use **Pino** for all production services (10x faster than Winston, native JSON).
44
+
45
+ ---
46
+
47
+ ### 1. Structured Logging with Pino
48
+
49
+ ```typescript
50
+ // lib/logger.ts
51
+ import pino from 'pino';
52
+
53
+ export const logger = pino({
54
+ level: process.env.LOG_LEVEL ?? 'info',
55
+ // Redact sensitive fields (GDPR/PII)
56
+ redact: {
57
+ paths: ['req.headers.authorization', 'req.headers.cookie', '*.password', '*.token', '*.ssn', '*.creditCard'],
58
+ censor: '[REDACTED]',
59
+ },
60
+ // Standardized format
61
+ formatters: {
62
+ level: (label) => ({ level: label }),
63
+ bindings: (bindings) => ({
64
+ service: process.env.SERVICE_NAME ?? 'app',
65
+ environment: process.env.NODE_ENV,
66
+ version: process.env.APP_VERSION,
67
+ pid: bindings.pid,
68
+ hostname: bindings.hostname,
69
+ }),
70
+ },
71
+ timestamp: pino.stdTimeFunctions.isoTime,
72
+ });
73
+
74
+ // Child logger for specific domain
75
+ export const dbLogger = logger.child({ module: 'database' });
76
+ export const authLogger = logger.child({ module: 'auth' });
77
+ export const paymentLogger = logger.child({ module: 'payment' });
78
+ ```
79
+
80
+ #### Log Level Strategy
81
+ ```typescript
82
+ // When to use each level:
83
+ logger.fatal('Application cannot start — exiting'); // Process crash
84
+ logger.error({ err }, 'Payment processing failed'); // Failed operations (needs attention)
85
+ logger.warn('Rate limit threshold at 80%'); // Degraded state, approaching limits
86
+ logger.info({ userId, action: 'login' }, 'User logged in'); // Business events, audit trail
87
+ logger.debug({ query, params }, 'Database query executed'); // Development troubleshooting
88
+ logger.trace({ request }, 'Incoming request'); // Extreme detail (rarely enabled)
89
+ ```
90
+
91
+ ---
92
+
93
+ ### 2. Request ID Correlation
94
+
95
+ ```typescript
96
+ // middleware/request-id.ts
97
+ import { randomUUID } from 'crypto';
98
+ import { AsyncLocalStorage } from 'async_hooks';
99
+
100
+ // Async context for request correlation
101
+ export const requestContext = new AsyncLocalStorage<{ requestId: string }>();
102
+
103
+ export function requestIdMiddleware(req: Request): string {
104
+ // Use incoming header or generate new ID
105
+ const requestId = req.headers.get('x-request-id') ?? randomUUID();
106
+
107
+ // Propagate to downstream services
108
+ return requestId;
109
+ }
110
+
111
+ // Usage with Pino child logger
112
+ export function getRequestLogger() {
113
+ const ctx = requestContext.getStore();
114
+ return ctx ? logger.child({ requestId: ctx.requestId }) : logger;
115
+ }
116
+
117
+ // In API route
118
+ export async function GET(request: Request) {
119
+ const requestId = requestIdMiddleware(request);
120
+
121
+ return requestContext.run({ requestId }, async () => {
122
+ const log = getRequestLogger();
123
+ log.info('Processing request');
124
+
125
+ // All downstream log calls include requestId automatically
126
+ const result = await fetchData(log);
127
+ return Response.json(result);
128
+ });
129
+ }
130
+ ```
131
+
132
+ ---
133
+
134
+ ### 3. Sentry Integration (Next.js)
135
+
136
+ ```typescript
137
+ // sentry.client.config.ts
138
+ import * as Sentry from '@sentry/nextjs';
139
+
140
+ Sentry.init({
141
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
142
+ environment: process.env.NODE_ENV,
143
+ release: process.env.SENTRY_RELEASE,
144
+
145
+ // Performance monitoring
146
+ tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
147
+
148
+ // Session replay for debugging
149
+ replaysSessionSampleRate: 0.01, // 1% of sessions
150
+ replaysOnErrorSampleRate: 1.0, // 100% of error sessions
151
+
152
+ integrations: [
153
+ Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }),
154
+ ],
155
+
156
+ // Filter noise
157
+ ignoreErrors: [
158
+ 'ResizeObserver loop',
159
+ 'Non-Error promise rejection',
160
+ /Loading chunk \d+ failed/,
161
+ ],
162
+
163
+ // Scrub PII before sending
164
+ beforeSend(event) {
165
+ if (event.user) {
166
+ delete event.user.ip_address;
167
+ delete event.user.email; // Or hash it
168
+ }
169
+ return event;
170
+ },
171
+ });
172
+ ```
173
+
174
+ ```typescript
175
+ // sentry.server.config.ts
176
+ import * as Sentry from '@sentry/nextjs';
177
+
178
+ Sentry.init({
179
+ dsn: process.env.SENTRY_DSN,
180
+ tracesSampleRate: 0.1,
181
+
182
+ // Capture unhandled promise rejections
183
+ integrations: [
184
+ Sentry.prismaIntegration(), // Auto-track Prisma queries
185
+ ],
186
+ });
187
+ ```
188
+
189
+ #### Source Map Upload (CI/CD)
190
+ ```yaml
191
+ # .github/workflows/deploy.yml
192
+ - name: Upload Source Maps to Sentry
193
+ env:
194
+ SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
195
+ SENTRY_ORG: your-org
196
+ SENTRY_PROJECT: your-project
197
+ run: |
198
+ npx @sentry/cli sourcemaps upload \
199
+ --release=${{ github.sha }} \
200
+ .next/static
201
+ ```
202
+
203
+ ---
204
+
205
+ ### 4. Log Aggregation Setup (Axiom)
206
+
207
+ ```typescript
208
+ // lib/axiom-transport.ts
209
+ import { pino } from 'pino';
210
+
211
+ // Pino transport for Axiom (or any HTTP log service)
212
+ const transport = pino.transport({
213
+ targets: [
214
+ // Console output (development)
215
+ { target: 'pino-pretty', level: 'debug' },
216
+ // Axiom (production)
217
+ {
218
+ target: '@axiomhq/pino',
219
+ level: 'info',
220
+ options: {
221
+ dataset: process.env.AXIOM_DATASET,
222
+ token: process.env.AXIOM_TOKEN,
223
+ },
224
+ },
225
+ ],
226
+ });
227
+
228
+ export const logger = pino(transport);
229
+ ```
230
+
231
+ ---
232
+
233
+ ### 5. Alert Rules Configuration
234
+
235
+ ```typescript
236
+ // Example alert conditions to configure in your monitoring tool
237
+ const ALERT_RULES = {
238
+ criticalErrors: {
239
+ condition: 'error count > 50 in 5 minutes',
240
+ severity: 'critical',
241
+ notification: ['pagerduty', 'slack'],
242
+ },
243
+ highErrorRate: {
244
+ condition: 'error rate > 5% of total requests',
245
+ severity: 'high',
246
+ notification: ['slack'],
247
+ },
248
+ slowResponses: {
249
+ condition: 'p99 response time > 3000ms for 10 minutes',
250
+ severity: 'medium',
251
+ notification: ['slack'],
252
+ },
253
+ diskSpace: {
254
+ condition: 'disk usage > 85%',
255
+ severity: 'warning',
256
+ notification: ['email'],
257
+ },
258
+ };
259
+ ```
260
+
261
+ ---
262
+
263
+ ### 6. GDPR-Compliant Log Management
264
+
265
+ ```typescript
266
+ // lib/pii-redactor.ts
267
+
268
+ /** Fields that must be redacted in logs */
269
+ const PII_PATTERNS = [
270
+ /\b\d{3}-\d{2}-\d{4}\b/g, // SSN
271
+ /\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, // Credit card
272
+ /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, // Email
273
+ ];
274
+
275
+ export function redactPII(text: string): string {
276
+ let result = text;
277
+ for (const pattern of PII_PATTERNS) {
278
+ result = result.replace(pattern, '[REDACTED]');
279
+ }
280
+ return result;
281
+ }
282
+
283
+ // Log retention policy
284
+ const LOG_RETENTION = {
285
+ debug: '7 days',
286
+ info: '30 days',
287
+ warn: '90 days',
288
+ error: '365 days',
289
+ audit: '7 years', // Compliance requirement
290
+ };
291
+ ```
292
+
293
+ ---
294
+
295
+ ### Common Pitfalls to Avoid
296
+
297
+ | Anti-Pattern | Problem | Correct Approach |
298
+ |---|---|---|
299
+ | `console.log` in production | Unstructured, no levels, no rotation | Use Pino with JSON output |
300
+ | Logging PII (emails, passwords) | GDPR violation, security risk | Use Pino `redact` option |
301
+ | No request correlation ID | Can't trace requests across services | Propagate `x-request-id` header |
302
+ | Logging everything at `info` level | Log noise, storage waste | Use appropriate levels (debug/info/warn/error) |
303
+ | No source maps in production errors | "Minified React error #xxx" | Upload source maps to Sentry |
304
+ | No log rotation/retention policy | Disk fills up, storage costs grow | Set TTL per level, archive old logs |
305
+ | Alerting on every error | Alert fatigue | Set meaningful thresholds and severity levels |
306
+
307
+ ---
308
+
309
+ ### Integration with Other Skills
310
+
311
+ - `data-telemetry-expert` — OpenTelemetry spans + log correlation
312
+ - `error-resilience-expert` — Error tracking and monitoring setup
313
+ - `js-backend-expert` — Server-side logging middleware (Fastify/Hono/Express)
314
+ - `ci-cd-devops-architect` — Source map upload in CI/CD pipeline
315
+ - `production-ready-hardener` — Pre-launch logging and monitoring audit
316
+ - `zero-trust-secret-vault` — Secure logging of secret access patterns
317
+
318
+ ---
319
+
320
+ <a name="bahasa-indonesia"></a>
321
+ ## Bahasa Indonesia
322
+
323
+ ### 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
+
326
+ ### Deskripsi
327
+ 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**.
328
+
329
+ ### Kondisi Pemicu
330
+ Aktifkan skill ini ketika:
331
+ - Menyiapkan logging terstruktur untuk layanan backend Node.js/Bun.
332
+ - Mengintegrasikan Sentry untuk pelacakan error di aplikasi React/Next.js.
333
+ - Mengimplementasikan korelasi request ID lintas microservice.
334
+ - Menyiapkan agregasi dan pencarian log (Axiom, Datadog, Grafana Loki).
335
+ - Mengonfigurasi aturan alerting untuk error produksi.
336
+ - Mengimplementasikan manajemen log sesuai GDPR (redaksi PII).
337
+
338
+ ### Integrasi dengan Skill Lain
339
+
340
+ - `data-telemetry-expert` — Span OpenTelemetry + korelasi log
341
+ - `error-resilience-expert` — Setup pelacakan error dan monitoring
342
+ - `js-backend-expert` — Middleware logging sisi server (Fastify/Hono/Express)
343
+ - `ci-cd-devops-architect` — Upload source map dalam pipeline CI/CD
344
+ - `production-ready-hardener` — Audit logging dan monitoring pra-peluncuran
@@ -0,0 +1,76 @@
1
+ ---
2
+ name: mcp-client-orchestrator
3
+ description: "Expert guide for the AI Agent to dynamically orchestrate and consume external MCP (Model Context Protocol) servers, giving it real-time superpowers over databases, GitHub, Slack, and local files."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # MCP Client Orchestrator
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 like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
19
+ ### Description
20
+ While `mcp-server-architect` teaches the agent how to *build* servers, this skill teaches the agent how to **consume** them as an MCP Client. This grants the agent "superpowers" by securely interacting with local PostgreSQL databases, GitHub repos, Figma APIs, and Slack channels in real-time, autonomously, using available MCP tool sets.
21
+
22
+ ### Trigger Conditions
23
+ Activate this skill when:
24
+ - The user asks the agent to query the database, but the agent doesn't have a direct SQL tool.
25
+ - The user needs real-time context from an external system (e.g., "Read the latest Slack messages about this bug").
26
+ - The user wants the agent to orchestrate multiple tools across different domains simultaneously.
27
+
28
+ ### Core Concepts
29
+
30
+ #### 1. MCP Resource & Tool Discovery
31
+ Before assuming a capability doesn't exist, the agent should dynamically inspect available tools.
32
+ - Use `list_resources` or check `mcp_config.json` to see what servers are running.
33
+ - Understand that MCP tools proxy capabilities securely. If there's a `postgres_mcp`, the agent can execute `execute_sql` through it.
34
+
35
+ #### 2. Workflow Orchestration
36
+ Example: "Find the bug reported on GitHub and fix it."
37
+ 1. Use the GitHub MCP to `search_issues`.
38
+ 2. Extract the stack trace from the issue comment.
39
+ 3. Use `grep_search` to find the failing code.
40
+ 4. Use `autonomous-tdd-debugger` to fix and test it.
41
+ 5. Use the GitHub MCP to `create_pull_request`.
42
+
43
+ ### Best Practices
44
+ - **Never guess schema:** Always use MCP tools like `list_tables` or `get_schema` before writing a query.
45
+ - **Respect Rate Limits:** If calling external APIs via MCP, avoid looping rapidly without timeouts.
46
+
47
+ ---
48
+
49
+ ### Integration with Other Skills (MANDATORY)
50
+ - `doku-mcp-server` — An example of a specific MCP server the agent can orchestrate.
51
+ - `ai-llm-integration-expert` — Provides context on how MCP fits into the broader LangGraph/AI landscape.
52
+ - `multi-agent-orchestration` — Used when delegating different MCP tool calls to specialized subagents.
53
+
54
+ ### Referenced By Orchestrators (MANDATORY)
55
+ - `brainstorming` — Add to "AI & LLM Integration".
56
+ - `zero-to-prod-orchestrator` — Phase 4 (AI Agents).
57
+
58
+ ---
59
+
60
+ <a name="bahasa-indonesia"></a>
61
+ ## Bahasa Indonesia
62
+
63
+ ### Integrasi Orkestrasi
64
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
65
+
66
+ ### Deskripsi
67
+ Skill yang memandu Agen AI tentang cara menggunakan (consume) server Model Context Protocol (MCP) eksternal, memberikan kekuatan *real-time* untuk berinteraksi dengan Database, GitHub, Slack, dan sistem lainnya secara otonom.
68
+
69
+ ### Kondisi Pemicu
70
+ - Saat Anda (sebagai agen) perlu mengeksekusi SQL ke database lokal/remote namun tidak memiliki akses terminal langsung.
71
+ - Saat Anda perlu membaca data *live* dari platform eksternal (Figma, GitHub, dll).
72
+
73
+ ### Panduan Singkat
74
+ - **Eksplorasi Tool:** Selalu periksa tool MCP yang tersedia di sistem (misal `list_tables` atau `read_issue`). Jangan berasumsi Anda buta terhadap dunia luar jika server MCP-nya aktif.
75
+ - **Orkestrasi Lintas Platform:** Anda dapat membaca pesan error di Slack via MCP, mencari kode yang relevan di *file system*, memperbaikinya, dan membuat Pull Request di GitHub via MCP secara otomatis. Ini adalah definisi sebenarnya dari Agen Otonom.
76
+ - **Validasi Skema:** Jangan pernah menebak nama tabel. Selalu gunakan tool MCP untuk mengambil skema database terlebih dahulu sebelum menjalankan kueri `execute_sql`.