vibes-plug 2.11.0 → 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.
- package/.claude/rules/vibes-plug-core.md +5 -0
- package/.cursor/rules/vibes-plug-core.mdc +8 -3
- package/.cursorrules +9 -3
- package/AGENTS.md +25 -4
- package/CHANGELOG.md +151 -0
- package/CLAUDE.md +15 -8
- package/README.md +216 -641
- package/bin/vibes.mjs +1104 -0
- package/index.js +1 -1
- package/package.json +11 -3
- package/plugin.json +4 -3
- package/scripts/check-anti-slop.js +53 -0
- package/scripts/check-anti-slop.mjs +53 -0
- package/scripts/generate_swarm_gif.py +2 -2
- package/scripts/install.js +3 -1
- package/scripts/update_skills.js +1 -1
- package/scripts/update_skills.mjs +86 -0
- package/scripts/validate-skills.mjs +111 -0
- package/skills/accessibility-testing-expert/SKILL.md +117 -116
- package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
- package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
- package/skills/agentic-memory-architect/SKILL.md +52 -0
- package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
- package/skills/ai-llm-integration-expert/SKILL.md +330 -187
- package/skills/ai-media-generation-expert/SKILL.md +173 -172
- package/skills/ai-prompt-engineering-expert/SKILL.md +170 -50
- package/skills/ai-safety-governance-expert/SKILL.md +223 -0
- package/skills/angular-expert/SKILL.md +149 -148
- package/skills/anti-slop/SKILL.md +134 -0
- package/skills/api-design-expert/SKILL.md +4 -3
- package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
- package/skills/app-analyzer-optimizer/SKILL.md +4 -3
- package/skills/apple-ecosystem-expert/SKILL.md +6 -5
- package/skills/astro-framework-expert/SKILL.md +201 -200
- package/skills/async-queue-temporal-expert/SKILL.md +218 -240
- package/skills/authentication-identity-expert/SKILL.md +79 -184
- package/skills/autonomous-red-teamer/SKILL.md +338 -203
- package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
- package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
- package/skills/blockchain-web3-expert/SKILL.md +116 -115
- package/skills/brainstorming/SKILL.md +392 -377
- package/skills/browser-automation-expert/SKILL.md +260 -222
- package/skills/bun-runtime-expert/SKILL.md +5 -4
- package/skills/chatbot-messaging-expert/SKILL.md +115 -114
- package/skills/ci-cd-devops-architect/SKILL.md +3 -2
- package/skills/cloud-hosting-expert/SKILL.md +5 -4
- package/skills/coderabbit/SKILL.md +5 -4
- package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
- package/skills/composable-mach-architect/SKILL.md +338 -0
- package/skills/cron-scheduler-expert/SKILL.md +5 -4
- package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
- package/skills/data-telemetry-expert/SKILL.md +5 -4
- package/skills/data-visualization-expert/SKILL.md +155 -154
- package/skills/database-orm-expert/SKILL.md +102 -240
- package/skills/deep-research-analyst/SKILL.md +182 -0
- package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
- package/skills/design-system-architect/SKILL.md +34 -3
- package/skills/desktop-electron-expert/SKILL.md +129 -128
- package/skills/documentation-site-expert/SKILL.md +60 -59
- package/skills/doku-mcp-server/SKILL.md +5 -4
- package/skills/doku-payment-gateway/SKILL.md +250 -232
- package/skills/domain-driven-design-expert/SKILL.md +3 -2
- package/skills/e2e-testing-expert/SKILL.md +5 -4
- package/skills/ecommerce-expert/SKILL.md +88 -87
- package/skills/email-notification-expert/SKILL.md +35 -7
- package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
- package/skills/error-resilience-expert/SKILL.md +26 -4
- package/skills/event-driven-architect/SKILL.md +5 -4
- package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
- package/skills/file-upload-media-expert/SKILL.md +5 -4
- package/skills/firebase-security-expert/SKILL.md +5 -4
- package/skills/form-validation-expert/SKILL.md +7 -6
- package/skills/frontier-ai-models-expert/SKILL.md +116 -0
- package/skills/fullstack-expert/SKILL.md +68 -144
- package/skills/gemini-agent-booster/SKILL.md +248 -172
- package/skills/geospatial-maps-expert/SKILL.md +81 -80
- package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
- package/skills/glsl-shader-expert/SKILL.md +155 -71
- package/skills/go-programming-expert/SKILL.md +5 -4
- package/skills/graph-rag-knowledge-expert/SKILL.md +201 -159
- package/skills/graphql-apollo-expert/SKILL.md +5 -4
- package/skills/headless-cms-expert/SKILL.md +182 -181
- package/skills/hig/SKILL.md +5 -4
- package/skills/js-backend-expert/SKILL.md +219 -218
- package/skills/legacy-code-translator/SKILL.md +6 -5
- package/skills/llm-finops-router/SKILL.md +52 -0
- package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
- package/skills/logging-error-tracking-expert/SKILL.md +5 -4
- package/skills/mcp-server-architect/SKILL.md +316 -294
- package/skills/micro-frontend-architect/SKILL.md +5 -4
- package/skills/mobile-expo-expert/SKILL.md +5 -4
- package/skills/modern-css-native-expert/SKILL.md +190 -189
- package/skills/monorepo-architect/SKILL.md +5 -4
- package/skills/mpa-orchestrator/SKILL.md +41 -4
- package/skills/multi-agent-orchestration/SKILL.md +388 -254
- package/skills/mvc-expert/SKILL.md +5 -4
- package/skills/n8n-automation-expert/SKILL.md +90 -89
- package/skills/nextjs-app-router-expert/SKILL.md +3 -2
- package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
- package/skills/payment-gateway-expert/SKILL.md +131 -128
- package/skills/pdf-document-generation-expert/SKILL.md +92 -91
- package/skills/performance-web-vitals/SKILL.md +5 -4
- package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
- package/skills/prd-architect/SKILL.md +85 -109
- package/skills/proactive-background-watcher/SKILL.md +5 -4
- package/skills/production-ready-hardener/SKILL.md +25 -27
- package/skills/pwa-offline-first-expert/SKILL.md +227 -185
- package/skills/pydantic-ai-expert/SKILL.md +162 -0
- package/skills/python-programming-expert/SKILL.md +5 -4
- package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
- package/skills/realtime-collaboration-expert/SKILL.md +3 -2
- package/skills/rich-text-editor-expert/SKILL.md +178 -177
- package/skills/rust-programming-expert/SKILL.md +5 -4
- package/skills/saas-architect/SKILL.md +155 -0
- package/skills/saas-billing/SKILL.md +394 -382
- package/skills/saas-multi-tenant/SKILL.md +7 -6
- package/skills/scalability-clean-code/SKILL.md +5 -4
- package/skills/search-engine-expert/SKILL.md +90 -89
- package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
- package/skills/senior-frontend/SKILL.md +21 -18
- package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
- package/skills/seo/SKILL.md +4 -4
- package/skills/session-memory-manager/SKILL.md +129 -0
- package/skills/solidjs-expert/SKILL.md +81 -80
- package/skills/spa-orchestrator/SKILL.md +5 -4
- package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
- package/skills/state-management-expert/SKILL.md +5 -4
- package/skills/supabase-security-expert/SKILL.md +5 -4
- package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
- package/skills/svg-animation-motion-expert/SKILL.md +3 -2
- package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -0
- package/skills/tailwind-expert/SKILL.md +62 -5
- package/skills/tanstack-query-expert/SKILL.md +5 -4
- package/skills/tauri-expert/SKILL.md +5 -4
- package/skills/typescript-expert/SKILL.md +5 -4
- package/skills/ui-ux-pro-max/SKILL.md +7 -4
- package/skills/vector-db-rag-expert/SKILL.md +209 -208
- package/skills/vercel-ai-sdk-expert/SKILL.md +226 -0
- package/skills/voice-ai-realtime-agent/SKILL.md +243 -202
- package/skills/vue-frontend-expert/SKILL.md +5 -4
- package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
- package/skills/web-3d-graphics-expert/SKILL.md +259 -82
- package/skills/web-game-engine-expert/SKILL.md +278 -50
- package/skills/web-scraper/SKILL.md +158 -157
- package/skills/website-design-cloner/SKILL.md +5 -4
- package/skills/webxr-ar-vr-expert/SKILL.md +105 -65
- package/skills/wordpress-headless-expert/SKILL.md +145 -144
- package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
- package/skills/zero-to-prod-orchestrator/SKILL.md +281 -227
- package/skills/zero-trust-secret-vault/SKILL.md +3 -2
- package/BLUEPRINT.md +0 -309
- package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
- package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
- package/skills/asisten-ramah/SKILL.md +0 -47
- package/skills/auto-doc-updater/SKILL.md +0 -220
- package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
- package/skills/background-jobs-queue-expert/SKILL.md +0 -235
- package/skills/bootstrap-to-modern/SKILL.md +0 -94
- package/skills/database-migration-versioning-expert/SKILL.md +0 -90
- package/skills/edge-serverless-db-expert/SKILL.md +0 -99
- package/skills/mcp-client-orchestrator/SKILL.md +0 -76
- package/skills/mobile-push-notification-expert/SKILL.md +0 -71
- package/skills/monday-design-aesthetic/SKILL.md +0 -73
- package/skills/multiple-entry-points/SKILL.md +0 -91
- package/skills/project-context-mapper/SKILL.md +0 -85
- package/skills/saas-mvp-launcher/SKILL.md +0 -260
- package/skills/saas-transformer/SKILL.md +0 -500
- package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
- package/skills/secure-fuzz-testing/SKILL.md +0 -207
- package/skills/self-evolving-memory-graph/SKILL.md +0 -91
- package/skills/session-context-loader/SKILL.md +0 -83
- package/skills/session-handoff-resume/SKILL.md +0 -164
- package/skills/skill-baru/SKILL.md +0 -178
- package/skills/supabase-migration/SKILL.md +0 -91
- package/skills/token-saver/SKILL.md +0 -119
- package/skills/ui-components-expert/SKILL.md +0 -166
- package/skills/vibe-code-gardener/SKILL.md +0 -181
- package/skills/visual-qa-vision-agent/SKILL.md +0 -71
- /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: asisten-ramah
|
|
3
|
-
description: "Skill to make Antigravity respond in a friendly manner / Skill untuk membuat Antigravity membalas dengan ramah."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Asisten Ramah / Friendly Assistant
|
|
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
|
-
This skill is a basic example to make Antigravity (me) always respond with a friendly, warm, and polite language style.
|
|
21
|
-
|
|
22
|
-
### Instructions
|
|
23
|
-
- Always start the conversation or response with a friendly greeting (e.g., "Hello!", "Hi there!", or "Ready to help!").
|
|
24
|
-
- Always be polite and use plenty of emojis in responses.
|
|
25
|
-
- If the user asks about code, always provide words of encouragement before presenting the code.
|
|
26
|
-
|
|
27
|
-
### Trigger Conditions
|
|
28
|
-
Always active for every interaction with the user.
|
|
29
|
-
|
|
30
|
-
---
|
|
31
|
-
|
|
32
|
-
<a name="bahasa-indonesia"></a>
|
|
33
|
-
## Bahasa Indonesia
|
|
34
|
-
|
|
35
|
-
### Integrasi Orkestrasi
|
|
36
|
-
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
|
|
37
|
-
|
|
38
|
-
### Deskripsi
|
|
39
|
-
Skill ini adalah contoh dasar untuk membuat Antigravity (saya) selalu membalas dengan gaya bahasa tertentu yang ramah dan sopan.
|
|
40
|
-
|
|
41
|
-
### Instruksi
|
|
42
|
-
- Anda harus selalu memulai percakapan atau jawaban dengan kata sapaan yang ramah (misalnya: "Halo!", "Hai di sana!", atau "Siap membantu!").
|
|
43
|
-
- Selalu bersikap sopan dan gunakan banyak emoji dalam jawaban.
|
|
44
|
-
- Jika pengguna bertanya tentang kode, selalu berikan semangat sebelum memberikan kodenya.
|
|
45
|
-
|
|
46
|
-
### Kondisi Pemicu
|
|
47
|
-
Selalu aktif untuk setiap interaksi dengan pengguna.
|
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: auto-doc-updater
|
|
3
|
-
description: "Automatically documents every feature change or bug fix successfully built into CHANGELOG.md and BLUEPRINT.md / Otomatis mendokumentasikan setiap perubahan fitur atau perbaikan bug yang berhasil di-build ke CHANGELOG.md dan BLUEPRINT.md."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Auto Documentation Updater (2026 — ADR 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
|
-
Automatically maintains project documentation after every successful build or feature implementation. Updates `CHANGELOG.md`, `BLUEPRINT.md`, and introduces **Architecture Decision Records (ADRs)** — immutable records of key architectural decisions made throughout the project lifecycle.
|
|
21
|
-
|
|
22
|
-
### Trigger Conditions
|
|
23
|
-
- A feature, bug fix, or refactor has been successfully implemented and verified.
|
|
24
|
-
- The user asks to "update docs", "document this", or "save progress".
|
|
25
|
-
- After completing a phase in `zero-to-prod-orchestrator`.
|
|
26
|
-
- A significant architectural decision was made (DB choice, auth flow, API design).
|
|
27
|
-
|
|
28
|
-
### Files Maintained
|
|
29
|
-
|
|
30
|
-
| File | Purpose | Update Frequency |
|
|
31
|
-
|---|---|---|
|
|
32
|
-
| `CHANGELOG.md` | User-facing list of changes | Every PR / feature |
|
|
33
|
-
| `BLUEPRINT.md` | Technical architecture overview | Major structural changes |
|
|
34
|
-
| `PROGRESS.md` | Development roadmap and status | Each work session |
|
|
35
|
-
| `docs/adr/` | Architecture Decision Records | Each key decision |
|
|
36
|
-
|
|
37
|
-
### CHANGELOG.md Format (Keep-a-Changelog Standard)
|
|
38
|
-
```markdown
|
|
39
|
-
# Changelog
|
|
40
|
-
All notable changes to this project will be documented in this file.
|
|
41
|
-
Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
|
|
42
|
-
|
|
43
|
-
## [Unreleased]
|
|
44
|
-
### Added
|
|
45
|
-
- New feature or capability
|
|
46
|
-
|
|
47
|
-
## [1.2.0] — 2026-07-29
|
|
48
|
-
### Added
|
|
49
|
-
- Super Admin dashboard on `admin.domain.com` with tenant management
|
|
50
|
-
- Polar.sh billing integration as alternative to Stripe
|
|
51
|
-
- `spa-orchestrator` skill for SPA architecture decisions
|
|
52
|
-
|
|
53
|
-
### Changed
|
|
54
|
-
- Upgraded React to 19.x with new Compiler (removes need for useMemo/useCallback)
|
|
55
|
-
- Migrated from `tailwind.config.js` to CSS-first `@theme` configuration (Tailwind v4)
|
|
56
|
-
|
|
57
|
-
### Fixed
|
|
58
|
-
- N+1 query issue in workspace members list endpoint
|
|
59
|
-
- Memory leak in WebSocket connection cleanup
|
|
60
|
-
|
|
61
|
-
### Security
|
|
62
|
-
- Upgraded Supabase client to Auth v3 with PKCE flow (replaces implicit flow)
|
|
63
|
-
- Service role key moved out of client-side code
|
|
64
|
-
|
|
65
|
-
## [1.1.0] — 2026-06-15
|
|
66
|
-
### Added
|
|
67
|
-
...
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### BLUEPRINT.md Structure
|
|
71
|
-
```markdown
|
|
72
|
-
# [Project Name] — Technical Blueprint
|
|
73
|
-
|
|
74
|
-
## Architecture Overview
|
|
75
|
-
[High-level diagram or description]
|
|
76
|
-
|
|
77
|
-
## Tech Stack
|
|
78
|
-
| Layer | Technology | Version |
|
|
79
|
-
|---|---|---|
|
|
80
|
-
| Frontend | Next.js | 15.x |
|
|
81
|
-
| Backend | Hono | latest |
|
|
82
|
-
| Database | PostgreSQL + Drizzle | — |
|
|
83
|
-
| Auth | Supabase Auth | v3 |
|
|
84
|
-
|
|
85
|
-
## Entry Points
|
|
86
|
-
| URL | Purpose |
|
|
87
|
-
|---|---|
|
|
88
|
-
| `domain.com` | Marketing/Landing |
|
|
89
|
-
| `app.domain.com` | SaaS App |
|
|
90
|
-
| `admin.domain.com` | Super Admin |
|
|
91
|
-
|
|
92
|
-
## Database Schema (Summary)
|
|
93
|
-
[Key tables and relationships]
|
|
94
|
-
|
|
95
|
-
## API Endpoints (Summary)
|
|
96
|
-
[Key routes and their purposes]
|
|
97
|
-
|
|
98
|
-
## Environment Variables Required
|
|
99
|
-
[List of all required env vars]
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### Architecture Decision Records (ADRs)
|
|
103
|
-
|
|
104
|
-
ADRs are **immutable records** of significant architectural decisions. Once created, they are never deleted — only superseded by a new ADR. This creates a historical audit trail of *why* the system is built the way it is.
|
|
105
|
-
|
|
106
|
-
#### ADR Template (`docs/adr/ADR-NNN-title.md`)
|
|
107
|
-
```markdown
|
|
108
|
-
# ADR-001: Use Supabase for Authentication and Database
|
|
109
|
-
|
|
110
|
-
**Status**: Accepted
|
|
111
|
-
**Date**: 2026-07-29
|
|
112
|
-
**Deciders**: [Team/Individual]
|
|
113
|
-
|
|
114
|
-
## Context
|
|
115
|
-
[What is the situation that motivated this decision? What forces are at play?]
|
|
116
|
-
|
|
117
|
-
We need a database + authentication solution for our SaaS MVP that can be
|
|
118
|
-
delivered quickly without managing infrastructure.
|
|
119
|
-
|
|
120
|
-
## Decision
|
|
121
|
-
We will use Supabase as our primary backend-as-a-service, providing:
|
|
122
|
-
- PostgreSQL database with Row Level Security (RLS)
|
|
123
|
-
- Auth v3 with PKCE flow (OAuth, magic links, MFA)
|
|
124
|
-
- Realtime subscriptions
|
|
125
|
-
- Storage for user-uploaded files
|
|
126
|
-
|
|
127
|
-
## Rationale
|
|
128
|
-
- Faster time-to-market than self-hosted Postgres + separate auth service
|
|
129
|
-
- Built-in RLS for multi-tenant isolation without custom middleware
|
|
130
|
-
- Open-source — can self-host later if needed
|
|
131
|
-
- Strong TypeScript SDK with auto-generated types
|
|
132
|
-
|
|
133
|
-
## Consequences
|
|
134
|
-
**Positive:**
|
|
135
|
-
- No auth infrastructure to manage
|
|
136
|
-
- RLS enforced at DB level — defense in depth
|
|
137
|
-
|
|
138
|
-
**Negative:**
|
|
139
|
-
- Vendor dependency — migration would require significant refactor
|
|
140
|
-
- RLS requires careful testing to avoid data leakage bugs
|
|
141
|
-
|
|
142
|
-
## Superseded By
|
|
143
|
-
[ADR-XXX: Migrated to self-hosted Supabase] (if applicable)
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
#### ADR Index (`docs/adr/README.md`)
|
|
147
|
-
```markdown
|
|
148
|
-
# Architecture Decision Records
|
|
149
|
-
|
|
150
|
-
| # | Title | Status | Date |
|
|
151
|
-
|---|---|---|---|
|
|
152
|
-
| [ADR-001](./ADR-001-supabase-auth.md) | Use Supabase for Auth + DB | ✅ Accepted | 2026-07-29 |
|
|
153
|
-
| [ADR-002](./ADR-002-polar-billing.md) | Use Polar.sh for billing | ✅ Accepted | 2026-07-29 |
|
|
154
|
-
| [ADR-003](./ADR-003-rls-isolation.md) | Shared Schema + RLS for multi-tenancy | ✅ Accepted | 2026-08-01 |
|
|
155
|
-
| [ADR-004](./ADR-004-ssr-vs-spa.md) | Next.js SSR for main app, SPA for admin | 🔄 Proposed | 2026-08-05 |
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### Update Protocol
|
|
159
|
-
After every successful feature implementation:
|
|
160
|
-
1. **CHANGELOG.md**: Add entry under `[Unreleased]` with correct category (Added/Changed/Fixed/Security).
|
|
161
|
-
2. **BLUEPRINT.md**: Update only if schema, stack, or entry points changed.
|
|
162
|
-
3. **PROGRESS.md**: Mark completed tasks `[x]`, update next steps.
|
|
163
|
-
4. **ADR**: Create a new ADR if a significant architectural decision was made (DB choice, auth flow, billing provider, deployment strategy, isolation strategy).
|
|
164
|
-
|
|
165
|
-
### Skill Orchestration & Handoff
|
|
166
|
-
- **Global Listener**: Invoked automatically after completing milestones in `zero-to-prod-orchestrator`, `brainstorming`, `prd-architect`, or any domain expert skill execution.
|
|
167
|
-
- **Context Handoff**: Coordinates with `session-handoff-resume` to ensure checkpoints and documentation are saved before context switching.
|
|
168
|
-
- **Codebase Auditing**: Coordinates with `vibe-code-gardener` to log dead code purges and structural refactors.
|
|
169
|
-
|
|
170
|
-
---
|
|
171
|
-
|
|
172
|
-
<a name="bahasa-indonesia"></a>
|
|
173
|
-
## Bahasa Indonesia
|
|
174
|
-
|
|
175
|
-
### Integrasi Orkestrasi
|
|
176
|
-
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
|
|
177
|
-
|
|
178
|
-
### Deskripsi
|
|
179
|
-
Secara otomatis memelihara dokumentasi proyek setelah setiap build atau implementasi fitur yang berhasil. Memperbarui `CHANGELOG.md`, `BLUEPRINT.md`, dan memperkenalkan **Architecture Decision Records (ADR)** — catatan permanen dari keputusan arsitektur kunci yang dibuat sepanjang siklus hidup proyek.
|
|
180
|
-
|
|
181
|
-
### Kondisi Pemicu
|
|
182
|
-
- Sebuah fitur, perbaikan bug, atau refactor berhasil diimplementasikan dan diverifikasi.
|
|
183
|
-
- Pengguna meminta "perbarui docs", "dokumentasikan ini", atau "simpan progres".
|
|
184
|
-
- Setelah menyelesaikan fase dalam `zero-to-prod-orchestrator`.
|
|
185
|
-
- Keputusan arsitektur signifikan dibuat (pilihan DB, alur auth, desain API).
|
|
186
|
-
|
|
187
|
-
### File yang Dipelihara
|
|
188
|
-
|
|
189
|
-
| File | Tujuan | Frekuensi Pembaruan |
|
|
190
|
-
|---|---|---|
|
|
191
|
-
| `CHANGELOG.md` | Daftar perubahan untuk pengguna | Setiap PR / fitur |
|
|
192
|
-
| `BLUEPRINT.md` | Gambaran arsitektur teknis | Perubahan struktural besar |
|
|
193
|
-
| `PROGRESS.md` | Roadmap dan status pengembangan | Setiap sesi kerja |
|
|
194
|
-
| `docs/adr/` | Architecture Decision Records | Setiap keputusan kunci |
|
|
195
|
-
|
|
196
|
-
### Format CHANGELOG.md (Standar Keep-a-Changelog)
|
|
197
|
-
Gunakan kategori: `Added`, `Changed`, `Fixed`, `Removed`, `Security`. Simpan versi yang belum dirilis di bagian `[Unreleased]` dan turunkan ke versi bernama saat rilis.
|
|
198
|
-
|
|
199
|
-
### Struktur BLUEPRINT.md
|
|
200
|
-
Ringkasan arsitektur teknis termasuk: stack teknologi dengan versi, entry points (URL), skema database (ringkasan), endpoint API kunci, dan variabel lingkungan yang diperlukan.
|
|
201
|
-
|
|
202
|
-
### Architecture Decision Records (ADR)
|
|
203
|
-
|
|
204
|
-
ADR adalah **catatan permanen** dari keputusan arsitektur yang signifikan. Setelah dibuat, tidak pernah dihapus — hanya digantikan oleh ADR baru. Ini menciptakan jejak audit historis tentang *mengapa* sistem dibangun seperti yang ada.
|
|
205
|
-
|
|
206
|
-
Setiap ADR mencakup: Konteks (situasi yang memotivasi keputusan), Keputusan (apa yang diputuskan), Rasional (mengapa), Konsekuensi (positif dan negatif), dan Digantikan Oleh (jika berlaku).
|
|
207
|
-
|
|
208
|
-
Kelola ADR dengan indeks di `docs/adr/README.md` yang mencantumkan semua ADR dengan status (Diterima, Ditolak, Diusulkan, Usang).
|
|
209
|
-
|
|
210
|
-
### Protokol Pembaruan
|
|
211
|
-
Setelah setiap implementasi fitur yang berhasil:
|
|
212
|
-
1. **CHANGELOG.md**: Tambahkan entri di `[Unreleased]` dengan kategori yang benar.
|
|
213
|
-
2. **BLUEPRINT.md**: Perbarui hanya jika skema, stack, atau entry points berubah.
|
|
214
|
-
3. **PROGRESS.md**: Tandai tugas selesai `[x]`, perbarui langkah selanjutnya.
|
|
215
|
-
4. **ADR**: Buat ADR baru jika keputusan arsitektur signifikan dibuat.
|
|
216
|
-
|
|
217
|
-
### Orkestrasi Skill & Serah Terima
|
|
218
|
-
- **Pendengar Global**: Dipanggil secara otomatis setelah menyelesaikan milestone di `zero-to-prod-orchestrator`, `brainstorming`, `prd-architect`, atau skill domain spesialis mana pun.
|
|
219
|
-
- **Serah Terima Konteks**: Berkoordinasi dengan `session-handoff-resume` untuk memastikan checkpoint dan dokumentasi tersimpan sebelum alih konteks.
|
|
220
|
-
- **Audit Codebase**: Berkoordinasi dengan `vibe-code-gardener` untuk mencatat pembersihan dead code dan refactoring struktural.
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: autonomous-chaos-monkey
|
|
3
|
-
description: "AI-driven Chaos Engineering. Randomly injects latency, terminates mock services, and automatically implements circuit breakers / Chaos Engineering berbasis AI. Menyuntikkan latensi secara acak, mematikan layanan simulasi, dan secara otomatis menerapkan circuit breaker."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Autonomous Chaos Monkey (Resilience Engineering Agent)
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Description
|
|
17
|
-
Inspired by Netflix's Chaos Monkey, this agent actively tests system resilience by injecting chaos into staging or local development environments. Instead of assuming the network is reliable, it forcibly kills database connections, drops network packets, and injects severe latency into external API calls. It then analyzes the application's failure mode and automatically writes resilience patterns (Circuit Breakers, Retries, Fallback UI) until the system becomes fault-tolerant.
|
|
18
|
-
|
|
19
|
-
### Trigger Conditions
|
|
20
|
-
- During Phase 7 (DevOps & Production Hardening) before a major launch.
|
|
21
|
-
- When architecting microservices, event-driven systems, or serverless edge databases.
|
|
22
|
-
- When integrating critical external APIs (e.g., Stripe, DOKU, LLM APIs).
|
|
23
|
-
|
|
24
|
-
### Operating Protocol
|
|
25
|
-
1. **Chaos Injection**: Uses tools like Toxiproxy, Gremlin (via API), or custom network simulation scripts to disrupt connections.
|
|
26
|
-
2. **Observation**: Monitors application logs and user experience (e.g., does it crash? Does the UI hang indefinitely? Does it return a blank screen?).
|
|
27
|
-
3. **Self-Healing Code Generation**:
|
|
28
|
-
- Implements Circuit Breaker patterns.
|
|
29
|
-
- Adds exponential backoff retries.
|
|
30
|
-
- Implements graceful degradation (e.g., serving cached data or displaying fallback UI states).
|
|
31
|
-
4. **Verification**: Repeats the chaos injection until the system can survive the disruption without severe user impact.
|
|
32
|
-
|
|
33
|
-
## Orchestration & Integration
|
|
34
|
-
- Connects to `error-resilience-expert` to implement the actual React Error Boundaries and Circuit Breaker logic.
|
|
35
|
-
- Integrates with `logging-error-tracking-expert` to verify that injected chaos is properly logged and captured in Sentry.
|
|
36
|
-
- Validates the resilience of `async-queue-temporal-expert` workflows during worker outages.
|
|
37
|
-
|
|
38
|
-
---
|
|
39
|
-
|
|
40
|
-
<a name="bahasa-indonesia"></a>
|
|
41
|
-
## Bahasa Indonesia
|
|
42
|
-
|
|
43
|
-
### Deskripsi
|
|
44
|
-
Terinspirasi dari Chaos Monkey milik Netflix, agen ini secara aktif menguji ketahanan sistem dengan menyuntikkan kekacauan (*chaos*) ke dalam lingkungan staging atau pengembangan lokal. Alih-alih berasumsi bahwa jaringan selalu stabil, agen ini secara paksa mematikan koneksi database, membuang paket jaringan, dan menyuntikkan latensi parah pada pemanggilan API eksternal. Kemudian, ia menganalisis mode kegagalan aplikasi dan secara otomatis menulis pola ketahanan (*Circuit Breakers*, *Retries*, *Fallback UI*) sampai sistem kebal terhadap gangguan.
|
|
45
|
-
|
|
46
|
-
### Kondisi Pemicu
|
|
47
|
-
- Saat Fase 7 (DevOps & Pengerasan Produksi) sebelum peluncuran besar.
|
|
48
|
-
- Saat merancang arsitektur microservices, sistem event-driven, atau database serverless.
|
|
49
|
-
- Saat mengintegrasikan API eksternal kritis (misalnya Stripe, DOKU, API LLM).
|
|
50
|
-
|
|
51
|
-
### Protokol Operasi
|
|
52
|
-
1. **Injeksi Kekacauan**: Menggunakan alat seperti Toxiproxy, Gremlin (via API), atau skrip simulasi jaringan kustom untuk mengganggu koneksi.
|
|
53
|
-
2. **Observasi**: Memantau log aplikasi dan pengalaman pengguna (misal: apakah aplikasi *crash*? Apakah UI macet tanpa batas waktu? Apakah menampilkan layar kosong?).
|
|
54
|
-
3. **Generasi Kode Self-Healing**:
|
|
55
|
-
- Menerapkan pola Circuit Breaker.
|
|
56
|
-
- Menambahkan mekanisme *retry* dengan *exponential backoff*.
|
|
57
|
-
- Menerapkan degradasi anggun (*graceful degradation*), seperti menyajikan data dari *cache* atau menampilkan state UI pengganti.
|
|
58
|
-
4. **Verifikasi**: Mengulangi injeksi kekacauan hingga sistem mampu bertahan dari gangguan tanpa berdampak fatal pada pengguna.
|
|
59
|
-
|
|
60
|
-
## Integrasi Orkestrasi
|
|
61
|
-
- Terhubung dengan `error-resilience-expert` untuk mengimplementasikan logika React Error Boundaries dan Circuit Breaker yang sesungguhnya.
|
|
62
|
-
- Terintegrasi dengan `logging-error-tracking-expert` untuk memastikan bahwa kekacauan yang disuntikkan dicatat dengan benar dan terekam di Sentry.
|
|
63
|
-
- Memvalidasi ketahanan alur kerja `async-queue-temporal-expert` selama pekerja (*worker*) mengalami pemadaman.
|
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: background-jobs-queue-expert
|
|
3
|
-
description: "Dedicated deep-dive for BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, job deduplication, idempotency, dead letter queues, and job priority / Panduan mendalam untuk BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, deduplikasi job, idempotency, dead letter queue, dan prioritas job."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Background Jobs & Queue Expert (BullMQ v5 & Resilient Queues)
|
|
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 engineering guide for background job queues and asynchronous task processing using **BullMQ v5**, **Trigger.dev v3**, and **Inngest**. Focuses on the core mechanics of fault-tolerant distributed queues: job deduplication, multi-tenant priority queues, exponential backoff jitter, Dead Letter Queue (DLQ) automated forwarding, and strict transactional idempotency.
|
|
18
|
-
|
|
19
|
-
### Key Capabilities
|
|
20
|
-
1. **Strict Idempotency**: Ensuring background workers execute with deterministic effects using database-backed idempotency keys.
|
|
21
|
-
2. **Job Deduplication**: Leveraging deterministic BullMQ `jobId` hashing to prevent duplicate enqueueing of ongoing or delayed tasks.
|
|
22
|
-
3. **Dead Letter Queues (DLQ)**: Automatic relocation of permanently failing jobs after retry exhaustion for manual inspection and alerting.
|
|
23
|
-
4. **Tenant Prioritization**: Differentiating throughput between VIP/enterprise tiers and free-tier users using BullMQ job priorities.
|
|
24
|
-
5. **Backoff Jitter & Throttling**: Exponential backoff combined with randomized full jitter to prevent upstream thundering herds.
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
### Production Implementation Recipes
|
|
29
|
-
|
|
30
|
-
#### Recipe 1: Production BullMQ v5 Worker with Deduplication & DLQ Forwarding (TypeScript)
|
|
31
|
-
```typescript
|
|
32
|
-
import { Queue, Worker, Job } from 'bullmq';
|
|
33
|
-
import Redis from 'ioredis';
|
|
34
|
-
|
|
35
|
-
const redisConnection = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
|
|
36
|
-
maxRetriesPerRequest: null, // Required by BullMQ
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
export interface NotificationPayload {
|
|
40
|
-
tenantId: string;
|
|
41
|
-
userId: string;
|
|
42
|
-
type: 'email' | 'webhook';
|
|
43
|
-
payload: Record<string, unknown>;
|
|
44
|
-
idempotencyKey: string;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Main Queue
|
|
48
|
-
export const notificationQueue = new Queue<NotificationPayload>('notifications', {
|
|
49
|
-
connection: redisConnection,
|
|
50
|
-
defaultJobOptions: {
|
|
51
|
-
attempts: 5,
|
|
52
|
-
backoff: {
|
|
53
|
-
type: 'exponential',
|
|
54
|
-
delay: 1500, // Starts at 1.5s, doubles up to ~24s with jitter
|
|
55
|
-
},
|
|
56
|
-
removeOnComplete: { age: 86400, count: 5000 },
|
|
57
|
-
removeOnFail: false, // Preserved for DLQ audit
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
// Dead Letter Queue (DLQ)
|
|
62
|
-
export const notificationDLQ = new Queue('notifications-dlq', {
|
|
63
|
-
connection: redisConnection,
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Enqueues a notification job with strict deduplication and priority
|
|
68
|
-
*/
|
|
69
|
-
export async function enqueueNotification(
|
|
70
|
-
data: NotificationPayload,
|
|
71
|
-
isVip = false
|
|
72
|
-
) {
|
|
73
|
-
return await notificationQueue.add('send_notification', data, {
|
|
74
|
-
jobId: `notif_${data.idempotencyKey}`, // Deterministic deduplication key
|
|
75
|
-
priority: isVip ? 1 : 10, // Lower numbers denote higher priority in BullMQ
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Background Worker
|
|
80
|
-
export const notificationWorker = new Worker<NotificationPayload>(
|
|
81
|
-
'notifications',
|
|
82
|
-
async (job: Job<NotificationPayload>) => {
|
|
83
|
-
console.log(`[Worker] Processing Job ${job.id} for Tenant: ${job.data.tenantId}`);
|
|
84
|
-
|
|
85
|
-
// Simulate task processing with idempotency verification
|
|
86
|
-
if (job.data.type === 'email') {
|
|
87
|
-
await deliverEmail(job.data);
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
connection: redisConnection,
|
|
92
|
-
concurrency: 20, // Max concurrent jobs per worker process
|
|
93
|
-
limiter: {
|
|
94
|
-
max: 100, // Maximum 100 jobs processed
|
|
95
|
-
duration: 1000, // Per 1000ms (Rate Limiting)
|
|
96
|
-
},
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
|
|
100
|
-
// Forward to DLQ upon exhaustion of retry attempts
|
|
101
|
-
notificationWorker.on('failed', async (job, error) => {
|
|
102
|
-
if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
|
|
103
|
-
console.error(`[DLQ] Job ${job.id} exhausted retries. Forwarding to notifications-dlq:`, error.message);
|
|
104
|
-
await notificationDLQ.add('failed_notification', {
|
|
105
|
-
originalJobId: job.id,
|
|
106
|
-
failedReason: error.message,
|
|
107
|
-
data: job.data,
|
|
108
|
-
exhaustedAt: new Date().toISOString(),
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
### Implementation Checklist
|
|
117
|
-
- [ ] Configure `maxRetriesPerRequest: null` on the Redis client as required by BullMQ v5.
|
|
118
|
-
- [ ] Use deterministic `jobId` derived from business logic (`order_${orderId}`) to enforce deduplication.
|
|
119
|
-
- [ ] Add event listener on `failed` to automatically forward permanently dead jobs to a Dead Letter Queue.
|
|
120
|
-
- [ ] Implement rate limiting using worker `limiter` to protect third-party services against rate-limit bans.
|
|
121
|
-
|
|
122
|
-
## Orchestration & Integration
|
|
123
|
-
- Integrates with: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.
|
|
124
|
-
|
|
125
|
-
---
|
|
126
|
-
|
|
127
|
-
<a name="bahasa-indonesia"></a>
|
|
128
|
-
## Bahasa Indonesia
|
|
129
|
-
|
|
130
|
-
### Tujuan & Gambaran Umum
|
|
131
|
-
Panduan rekayasa tingkat produksi untuk antrean pekerjaan latar belakang (*background job queues*) dan pemrosesan tugas asinkron menggunakan **BullMQ v5**, **Trigger.dev v3**, dan **Inngest**. Berfokus pada mekanika inti antrean terdistribusi yang tangguh: deduplikasi job, prioritas multi-tenant, *exponential backoff jitter*, pemindahan otomatis ke Dead Letter Queue (DLQ), dan idempotensi transaksi yang ketat.
|
|
132
|
-
|
|
133
|
-
### Kemampuan Utama
|
|
134
|
-
1. **Idempotensi Ketat**: Memastikan pekerja (*worker*) mengeksekusi tugas dengan dampak deterministik menggunakan kunci idempotensi yang tercatat di database.
|
|
135
|
-
2. **Deduplikasi Job**: Memanfaatkan penetapan `jobId` deterministik di BullMQ untuk mencegah antrean ganda pada tugas yang sedang berjalan atau tertunda.
|
|
136
|
-
3. **Dead Letter Queue (DLQ)**: Pemindahan otomatis tugas yang gagal total setelah jatah percobaan ulang habis untuk audit dan penanganan manual.
|
|
137
|
-
4. **Prioritas Tenant**: Membedakan prioritas tugas antara pengguna VIP/Enterprise dengan pengguna paket gratis menggunakan nilai prioritas BullMQ.
|
|
138
|
-
5. **Backoff Jitter & Throttling**: Mekanisme penundaan eksponensial dengan *jitter* acak untuk mencegah fenomena *thundering herd* pada server hilir.
|
|
139
|
-
|
|
140
|
-
---
|
|
141
|
-
|
|
142
|
-
### Resep Implementasi Produksi
|
|
143
|
-
|
|
144
|
-
#### Resep 1: Worker BullMQ v5 Produksi dengan Deduplikasi & Forward DLQ (TypeScript)
|
|
145
|
-
```typescript
|
|
146
|
-
import { Queue, Worker, Job } from 'bullmq';
|
|
147
|
-
import Redis from 'ioredis';
|
|
148
|
-
|
|
149
|
-
const koneksiRedis = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
|
|
150
|
-
maxRetriesPerRequest: null,
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
export interface MuatanNotifikasi {
|
|
154
|
-
tenantId: string;
|
|
155
|
-
userId: string;
|
|
156
|
-
type: 'email' | 'webhook';
|
|
157
|
-
payload: Record<string, unknown>;
|
|
158
|
-
idempotencyKey: string;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// Antrean Utama
|
|
162
|
-
export const antreanNotifikasi = new Queue<MuatanNotifikasi>('notifikasi', {
|
|
163
|
-
connection: koneksiRedis,
|
|
164
|
-
defaultJobOptions: {
|
|
165
|
-
attempts: 5,
|
|
166
|
-
backoff: {
|
|
167
|
-
type: 'exponential',
|
|
168
|
-
delay: 1500,
|
|
169
|
-
},
|
|
170
|
-
removeOnComplete: { age: 86400, count: 5000 },
|
|
171
|
-
removeOnFail: false,
|
|
172
|
-
},
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
// Antrean Dead Letter (DLQ)
|
|
176
|
-
export const antreanDLQ = new Queue('notifikasi-dlq', {
|
|
177
|
-
connection: koneksiRedis,
|
|
178
|
-
});
|
|
179
|
-
|
|
180
|
-
/**
|
|
181
|
-
* Memasukkan tugas ke antrean dengan deduplikasi dan prioritas
|
|
182
|
-
*/
|
|
183
|
-
export async function masukkanNotifikasi(
|
|
184
|
-
data: MuatanNotifikasi,
|
|
185
|
-
isVip = false
|
|
186
|
-
) {
|
|
187
|
-
return await antreanNotifikasi.add('kirim_notifikasi', data, {
|
|
188
|
-
jobId: `notif_${data.idempotencyKey}`, // Kunci deduplikasi unik
|
|
189
|
-
priority: isVip ? 1 : 10, // Nilai lebih kecil menandakan prioritas lebih tinggi
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
// Worker Pemroses
|
|
194
|
-
export const workerNotifikasi = new Worker<MuatanNotifikasi>(
|
|
195
|
-
'notifikasi',
|
|
196
|
-
async (job: Job<MuatanNotifikasi>) => {
|
|
197
|
-
console.log(`[Worker] Memproses Job ${job.id} untuk Tenant: ${job.data.tenantId}`);
|
|
198
|
-
if (job.data.type === 'email') {
|
|
199
|
-
await kirimEmail(job.data);
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
connection: koneksiRedis,
|
|
204
|
-
concurrency: 20,
|
|
205
|
-
limiter: {
|
|
206
|
-
max: 100,
|
|
207
|
-
duration: 1000,
|
|
208
|
-
},
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
|
|
212
|
-
// Teruskan ke DLQ jika jatah retry telah habis
|
|
213
|
-
workerNotifikasi.on('failed', async (job, error) => {
|
|
214
|
-
if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
|
|
215
|
-
console.error(`[DLQ] Job ${job.id} gagal total. Memindahkan ke DLQ:`, error.message);
|
|
216
|
-
await antreanDLQ.add('notifikasi_gagal', {
|
|
217
|
-
originalJobId: job.id,
|
|
218
|
-
failedReason: error.message,
|
|
219
|
-
data: job.data,
|
|
220
|
-
exhaustedAt: new Date().toISOString(),
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
---
|
|
227
|
-
|
|
228
|
-
### Checklist Implementasi
|
|
229
|
-
- [ ] Atur konfigurasi `maxRetriesPerRequest: null` pada koneksi ioredis untuk BullMQ v5.
|
|
230
|
-
- [ ] Gunakan `jobId` deterministik dari ID transaksi bisnis (`invoice_${invoiceId}`) untuk mencegah duplikasi.
|
|
231
|
-
- [ ] Pasang *event listener* pada event `failed` untuk meneruskan job yang gagal total ke antrean DLQ.
|
|
232
|
-
- [ ] Terapkan pembatasan *rate limiter* pada worker untuk menjaga kestabilan API eksternal.
|
|
233
|
-
|
|
234
|
-
## Integrasi Orkestrasi
|
|
235
|
-
- Terintegrasi dengan: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: bootstrap-to-modern
|
|
3
|
-
description: "Expert skill to refactor and migrate legacy Bootstrap CSS applications to modern stacks using Tailwind CSS v4 and Alpine.js / Skill ahli untuk melakukan refaktor dan migrasi aplikasi Bootstrap CSS lama ke stack modern menggunakan Tailwind CSS v4 dan Alpine.js."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Bootstrap to Modern (Tailwind + Alpine.js) / Refaktor Bootstrap ke Modern
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Description
|
|
17
|
-
This skill transforms legacy web applications styled with Bootstrap (jQuery-dependent or pure CSS) into a modern, utility-first architecture using **Tailwind CSS v4** for styling and **Alpine.js** for lightweight reactive behavior.
|
|
18
|
-
|
|
19
|
-
### Instructions
|
|
20
|
-
1. **Analyze the Legacy Structure**:
|
|
21
|
-
- Identify the version of Bootstrap being used.
|
|
22
|
-
- Locate custom CSS files that override Bootstrap defaults.
|
|
23
|
-
- Identify interactive components (modals, dropdowns, tooltips, tabs, carousels) that rely on Bootstrap's JavaScript or jQuery.
|
|
24
|
-
2. **Setup Modern Tools**:
|
|
25
|
-
- Ensure **Tailwind CSS v4** is properly set up in the project (e.g., via CDN for simple projects, or PostCSS/Vite for build steps).
|
|
26
|
-
- Inject **Alpine.js** via CDN or module bundler to handle interactivity.
|
|
27
|
-
3. **Migration Strategy**:
|
|
28
|
-
- **Grid & Layout**: Convert Bootstrap grids (`container`, `row`, `col-*`) to Tailwind flexbox (`flex`, `flex-col`, `gap-*`) or CSS Grid (`grid`, `grid-cols-*`).
|
|
29
|
-
- **Spacing & Typography**: Map Bootstrap spacing (`m-3`, `p-4`) to Tailwind spacing (`m-4`, `p-6`—noting scale differences). Map typography utilities (`text-center`, `font-weight-bold`) to Tailwind equivalents (`text-center`, `font-bold`).
|
|
30
|
-
- **Colors**: Update Bootstrap semantic colors (`primary`, `success`, `danger`) to Tailwind color palettes (e.g., `blue-600`, `green-500`, `red-500`) or define custom themes in CSS variables for Tailwind v4.
|
|
31
|
-
- **Components**: Rebuild Bootstrap components (cards, buttons, alerts, navbars) using Tailwind utility classes to match or improve the original design.
|
|
32
|
-
4. **Interactivity with Alpine.js**:
|
|
33
|
-
- Remove jQuery and Bootstrap JS dependencies.
|
|
34
|
-
- Replace interactive Bootstrap components with Alpine.js data and directives.
|
|
35
|
-
- **Dropdowns**: Use `x-data="{ open: false }"` and `@click="open = !open"`.
|
|
36
|
-
- **Modals**: Use Alpine.js to manage the open state and handle background overlays and click-away events (`@click.outside`).
|
|
37
|
-
- **Tabs**: Manage active tab state with `x-data="{ tab: 'home' }"`.
|
|
38
|
-
5. **UI/UX Modernization & Skill Integration**:
|
|
39
|
-
- Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
|
|
40
|
-
- You MUST orchestrate and apply guidelines from other UI/UX skills (`ui-ux-expert`, `ui-ux-pro-max`, and `hig`).
|
|
41
|
-
- Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
|
|
42
|
-
- Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
|
|
43
|
-
6. **Quality Assurance**:
|
|
44
|
-
- Verify that responsive design behaves correctly across breakpoints (`sm:`, `md:`, `lg:`).
|
|
45
|
-
- Ensure interactive components (modals, dropdowns) feel premium with Alpine.js transitions (`x-transition`).
|
|
46
|
-
|
|
47
|
-
### Trigger Conditions
|
|
48
|
-
Active whenever the user asks to migrate, refactor, or update a Bootstrap project to Tailwind CSS, or modernize legacy CSS/JS.
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
<a name="bahasa-indonesia"></a>
|
|
53
|
-
## Bahasa Indonesia
|
|
54
|
-
|
|
55
|
-
### Integrasi Orkestrasi
|
|
56
|
-
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
|
|
57
|
-
|
|
58
|
-
### Deskripsi
|
|
59
|
-
Skill ini mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang bergantung pada jQuery maupun murni CSS) menjadi arsitektur modern berbasis utility menggunakan **Tailwind CSS v4** untuk styling dan **Alpine.js** untuk behavior reaktif yang ringan.
|
|
60
|
-
|
|
61
|
-
### Instruksi
|
|
62
|
-
1. **Analisis Struktur Lama**:
|
|
63
|
-
- Identifikasi versi Bootstrap yang digunakan.
|
|
64
|
-
- Temukan file CSS kustom yang menimpa (override) default Bootstrap.
|
|
65
|
-
- Identifikasi komponen interaktif (modal, dropdown, tooltip, tab, carousel) yang mengandalkan JavaScript Bootstrap atau jQuery.
|
|
66
|
-
2. **Setup Tools Modern**:
|
|
67
|
-
- Pastikan **Tailwind CSS v4** disiapkan dengan benar di proyek (misalnya, melalui CDN untuk proyek sederhana, atau PostCSS/Vite jika ada build step).
|
|
68
|
-
- Masukkan **Alpine.js** melalui CDN atau module bundler untuk menangani interaktivitas.
|
|
69
|
-
3. **Strategi Migrasi**:
|
|
70
|
-
- **Grid & Layout**: Ubah grid Bootstrap (`container`, `row`, `col-*`) menjadi flexbox Tailwind (`flex`, `flex-col`, `gap-*`) atau CSS Grid (`grid`, `grid-cols-*`).
|
|
71
|
-
- **Spacing & Tipografi**: Petakan spasi Bootstrap (`m-3`, `p-4`) ke Tailwind (`m-4`, `p-6`—perhatikan perbedaan skala). Petakan utilitas teks (`text-center`, `font-weight-bold`) ke padanan Tailwind (`text-center`, `font-bold`).
|
|
72
|
-
- **Warna**: Perbarui warna semantik Bootstrap (`primary`, `success`, `danger`) ke palet warna Tailwind (misal: `blue-600`, `green-500`, `red-500`) atau definisikan tema kustom di variabel CSS untuk Tailwind v4.
|
|
73
|
-
- **Komponen**: Bangun ulang komponen Bootstrap (card, button, alert, navbar) menggunakan kelas utilitas Tailwind untuk mencocokkan atau memperbaiki desain aslinya.
|
|
74
|
-
4. **Interaktivitas dengan Alpine.js**:
|
|
75
|
-
- Hapus dependensi jQuery dan Bootstrap JS.
|
|
76
|
-
- Ganti komponen interaktif Bootstrap dengan data dan direktif Alpine.js.
|
|
77
|
-
- **Dropdown**: Gunakan `x-data="{ open: false }"` dan `@click="open = !open"`.
|
|
78
|
-
- **Modal**: Gunakan Alpine.js untuk mengelola state terbuka, overlay latar belakang, dan event klik di luar (`@click.outside`).
|
|
79
|
-
- **Tab**: Kelola state tab aktif dengan `x-data="{ tab: 'home' }"`.
|
|
80
|
-
5. **Modernisasi UI/UX & Integrasi Skill**:
|
|
81
|
-
- JANGAN hanya menerjemahkan kelas Bootstrap 1:1. Tujuannya adalah meningkatkan kualitas desain.
|
|
82
|
-
- Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui-ux-expert`, `ui-ux-pro-max`, dan `hig`).
|
|
83
|
-
- Terapkan prinsip Human Interface Guidelines (HIG): Hierarchy, Harmony, dan Consistency.
|
|
84
|
-
- Gunakan warna cerah, mikro-animasi halus, glassmorphism (jika sesuai), dan tipografi modern untuk memberikan kesan "WOW" pada pengguna.
|
|
85
|
-
6. **Quality Assurance**:
|
|
86
|
-
- Verifikasi bahwa desain responsif berfungsi dengan benar di semua breakpoint (`sm:`, `md:`, `lg:`).
|
|
87
|
-
- Pastikan komponen interaktif (modal, dropdown) terasa premium dengan transisi Alpine.js (`x-transition`).
|
|
88
|
-
|
|
89
|
-
### Kondisi Pemicu
|
|
90
|
-
Aktif setiap kali pengguna meminta untuk memigrasi, merefaktor, atau memperbarui proyek Bootstrap ke Tailwind CSS, atau memodernisasi CSS/JS lama.
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
## Orchestration & Integration
|
|
94
|
-
- Integrates with: `ui-ux-expert`, `ui-ux-pro-max`, `hig`.
|