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.
- package/.claude/rules/vibes-plug-core.md +32 -0
- package/.cursor/rules/vibes-plug-core.mdc +51 -0
- package/.cursorrules +42 -0
- package/AGENTS.md +96 -0
- package/BLUEPRINT.md +309 -125
- package/CHANGELOG.md +183 -1
- package/CLAUDE.md +70 -0
- package/LICENSE +1 -1
- package/README.md +641 -263
- package/index.js +19 -0
- package/package.json +61 -25
- package/plugin.json +24 -7
- package/scripts/generate_swarm_gif.py +295 -0
- package/scripts/install.js +201 -0
- package/skills/accessibility-testing-expert/SKILL.md +116 -0
- package/skills/ai-cost-token-optimizer/SKILL.md +82 -0
- package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
- package/skills/ai-llm-integration-expert/SKILL.md +147 -122
- package/skills/ai-media-generation-expert/SKILL.md +172 -0
- package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
- package/skills/angular-expert/SKILL.md +148 -0
- package/skills/api-design-expert/SKILL.md +316 -309
- package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
- package/skills/app-analyzer-optimizer/SKILL.md +195 -188
- package/skills/apple-ecosystem-expert/SKILL.md +145 -0
- package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
- package/skills/astro-framework-expert/SKILL.md +200 -0
- package/skills/async-queue-temporal-expert/SKILL.md +240 -0
- package/skills/authentication-identity-expert/SKILL.md +279 -45
- package/skills/auto-doc-updater/SKILL.md +219 -203
- package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
- package/skills/autonomous-red-teamer/SKILL.md +203 -0
- package/skills/autonomous-tdd-debugger/SKILL.md +71 -0
- package/skills/background-jobs-queue-expert/SKILL.md +235 -0
- package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
- package/skills/blockchain-web3-expert/SKILL.md +115 -0
- package/skills/bootstrap-to-modern/SKILL.md +93 -86
- package/skills/brainstorming/SKILL.md +381 -353
- package/skills/browser-automation-expert/SKILL.md +222 -0
- package/skills/bun-runtime-expert/SKILL.md +7 -1
- package/skills/chatbot-messaging-expert/SKILL.md +114 -0
- package/skills/ci-cd-devops-architect/SKILL.md +81 -45
- package/skills/cloud-hosting-expert/SKILL.md +249 -243
- package/skills/coderabbit/SKILL.md +197 -191
- package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
- package/skills/cron-scheduler-expert/SKILL.md +304 -0
- package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
- package/skills/data-telemetry-expert/SKILL.md +218 -212
- package/skills/data-visualization-expert/SKILL.md +154 -0
- package/skills/database-migration-versioning-expert/SKILL.md +90 -0
- package/skills/database-orm-expert/SKILL.md +303 -293
- package/skills/dependency-upgrade-migrator/SKILL.md +301 -0
- package/skills/design-system-architect/SKILL.md +278 -242
- package/skills/desktop-electron-expert/SKILL.md +128 -0
- package/skills/documentation-site-expert/SKILL.md +59 -0
- package/skills/doku-mcp-server/SKILL.md +257 -0
- package/skills/doku-payment-gateway/SKILL.md +233 -0
- package/skills/domain-driven-design-expert/SKILL.md +82 -0
- package/skills/e2e-testing-expert/SKILL.md +320 -314
- package/skills/ecommerce-expert/SKILL.md +87 -0
- package/skills/edge-serverless-db-expert/SKILL.md +99 -0
- package/skills/email-notification-expert/SKILL.md +368 -0
- package/skills/error-resilience-expert/SKILL.md +486 -0
- package/skills/event-driven-architect/SKILL.md +86 -80
- package/skills/feature-flag-analytics-expert/SKILL.md +66 -0
- package/skills/file-upload-media-expert/SKILL.md +437 -0
- package/skills/firebase-security-expert/SKILL.md +7 -1
- package/skills/form-validation-expert/SKILL.md +407 -0
- package/skills/fullstack-expert/SKILL.md +260 -201
- package/skills/fullstack-expert/references/api_design_guide.md +466 -466
- package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
- package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
- package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
- package/skills/gemini-agent-booster/SKILL.md +142 -104
- package/skills/geospatial-maps-expert/SKILL.md +80 -0
- package/skills/global-a11y-i18n-expert/SKILL.md +86 -80
- package/skills/glsl-shader-expert/SKILL.md +107 -0
- package/skills/go-programming-expert/SKILL.md +300 -294
- package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
- package/skills/graphql-apollo-expert/SKILL.md +114 -0
- package/skills/headless-cms-expert/SKILL.md +181 -0
- package/skills/hig/SKILL.md +193 -187
- package/skills/js-backend-expert/SKILL.md +218 -191
- package/skills/legacy-code-translator/SKILL.md +71 -0
- package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
- package/skills/logging-error-tracking-expert/SKILL.md +344 -0
- package/skills/mcp-client-orchestrator/SKILL.md +76 -0
- package/skills/mcp-server-architect/SKILL.md +226 -126
- package/skills/micro-frontend-architect/SKILL.md +112 -0
- package/skills/mobile-expo-expert/SKILL.md +191 -185
- package/skills/mobile-push-notification-expert/SKILL.md +71 -0
- package/skills/modern-css-native-expert/SKILL.md +189 -0
- package/skills/monday-design-aesthetic/SKILL.md +72 -66
- package/skills/monorepo-architect/SKILL.md +232 -226
- package/skills/mpa-orchestrator/SKILL.md +120 -101
- package/skills/multi-agent-orchestration/SKILL.md +173 -153
- package/skills/multiple-entry-points/SKILL.md +91 -55
- package/skills/mvc-expert/SKILL.md +237 -231
- package/skills/n8n-automation-expert/SKILL.md +89 -0
- package/skills/nextjs-app-router-expert/SKILL.md +148 -0
- package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
- package/skills/payment-gateway-expert/SKILL.md +129 -45
- package/skills/pdf-document-generation-expert/SKILL.md +91 -0
- package/skills/performance-web-vitals/SKILL.md +337 -331
- package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
- package/skills/prd-architect/SKILL.md +206 -190
- package/skills/proactive-background-watcher/SKILL.md +68 -0
- package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
- package/skills/production-ready-hardener/SKILL.md +461 -468
- package/skills/production-ready-hardener/references/production_checklist.md +161 -161
- package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
- package/skills/project-context-mapper/SKILL.md +85 -0
- package/skills/pwa-offline-first-expert/SKILL.md +185 -0
- package/skills/python-programming-expert/SKILL.md +407 -270
- package/skills/rate-limit-abuse-prevention/SKILL.md +377 -0
- package/skills/realtime-collaboration-expert/SKILL.md +99 -45
- package/skills/rich-text-editor-expert/SKILL.md +177 -0
- package/skills/rust-programming-expert/SKILL.md +240 -234
- package/skills/saas-billing/SKILL.md +382 -376
- package/skills/saas-multi-tenant/SKILL.md +256 -236
- package/skills/saas-mvp-launcher/SKILL.md +30 -1
- package/skills/saas-transformer/SKILL.md +499 -445
- package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
- package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
- package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
- package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
- package/skills/scalability-clean-code/SKILL.md +234 -228
- package/skills/search-engine-expert/SKILL.md +89 -0
- package/skills/secure-fuzz-testing/SKILL.md +7 -1
- package/skills/self-evolving-memory-graph/SKILL.md +91 -0
- package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
- package/skills/senior-frontend/SKILL.md +85 -105
- package/skills/seo/SKILL.md +258 -224
- package/skills/session-context-loader/SKILL.md +83 -0
- package/skills/session-handoff-resume/SKILL.md +163 -157
- package/skills/{skill_baru → skill-baru}/SKILL.md +177 -146
- package/skills/solidjs-expert/SKILL.md +80 -0
- package/skills/spa-orchestrator/SKILL.md +306 -287
- package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
- package/skills/state-management-expert/SKILL.md +277 -271
- package/skills/supabase-migration/SKILL.md +47 -1
- package/skills/supabase-security-expert/SKILL.md +248 -242
- package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
- package/skills/svg-animation-motion-expert/SKILL.md +115 -0
- package/skills/tailwind-expert/SKILL.md +139 -187
- package/skills/tanstack-query-expert/SKILL.md +204 -198
- package/skills/tauri-expert/SKILL.md +7 -1
- package/skills/token-saver/SKILL.md +118 -110
- package/skills/typescript-expert/SKILL.md +329 -278
- package/skills/ui-components-expert/SKILL.md +166 -63
- package/skills/ui-ux-pro-max/SKILL.md +221 -200
- package/skills/vector-db-rag-expert/SKILL.md +208 -0
- package/skills/vibe-code-gardener/SKILL.md +180 -172
- package/skills/visual-qa-vision-agent/SKILL.md +71 -0
- package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
- package/skills/vue-frontend-expert/SKILL.md +132 -0
- package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
- package/skills/web-3d-graphics-expert/SKILL.md +137 -0
- package/skills/web-game-engine-expert/SKILL.md +102 -0
- package/skills/web-scraper/SKILL.md +98 -146
- package/skills/website-design-cloner/SKILL.md +180 -0
- package/skills/webxr-ar-vr-expert/SKILL.md +123 -0
- package/skills/wordpress-headless-expert/SKILL.md +144 -0
- package/skills/zero-to-prod-orchestrator/SKILL.md +231 -180
- package/skills/zero-trust-secret-vault/SKILL.md +88 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
- package/CONTRIBUTING.md +0 -199
- package/SECURITY.md +0 -21
- package/banner.png +0 -0
- package/skills/senior-fullstack/SKILL.md +0 -167
- package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
- package/skills/senior-fullstack/references/development_workflows.md +0 -222
- package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
- package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
- package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
- package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
- package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
- package/skills/seo-geo/SKILL.md +0 -188
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
- 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`.
|