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.
Files changed (181) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +8 -3
  3. package/.cursorrules +9 -3
  4. package/AGENTS.md +25 -4
  5. package/CHANGELOG.md +151 -0
  6. package/CLAUDE.md +15 -8
  7. package/README.md +216 -641
  8. package/bin/vibes.mjs +1104 -0
  9. package/index.js +1 -1
  10. package/package.json +11 -3
  11. package/plugin.json +4 -3
  12. package/scripts/check-anti-slop.js +53 -0
  13. package/scripts/check-anti-slop.mjs +53 -0
  14. package/scripts/generate_swarm_gif.py +2 -2
  15. package/scripts/install.js +3 -1
  16. package/scripts/update_skills.js +1 -1
  17. package/scripts/update_skills.mjs +86 -0
  18. package/scripts/validate-skills.mjs +111 -0
  19. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  20. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  21. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  22. package/skills/agentic-memory-architect/SKILL.md +52 -0
  23. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  24. package/skills/ai-llm-integration-expert/SKILL.md +330 -187
  25. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  26. package/skills/ai-prompt-engineering-expert/SKILL.md +170 -50
  27. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  28. package/skills/angular-expert/SKILL.md +149 -148
  29. package/skills/anti-slop/SKILL.md +134 -0
  30. package/skills/api-design-expert/SKILL.md +4 -3
  31. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  32. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  33. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  34. package/skills/astro-framework-expert/SKILL.md +201 -200
  35. package/skills/async-queue-temporal-expert/SKILL.md +218 -240
  36. package/skills/authentication-identity-expert/SKILL.md +79 -184
  37. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  38. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  39. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  40. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  41. package/skills/brainstorming/SKILL.md +392 -377
  42. package/skills/browser-automation-expert/SKILL.md +260 -222
  43. package/skills/bun-runtime-expert/SKILL.md +5 -4
  44. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  45. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  46. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  47. package/skills/coderabbit/SKILL.md +5 -4
  48. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  49. package/skills/composable-mach-architect/SKILL.md +338 -0
  50. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  51. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  52. package/skills/data-telemetry-expert/SKILL.md +5 -4
  53. package/skills/data-visualization-expert/SKILL.md +155 -154
  54. package/skills/database-orm-expert/SKILL.md +102 -240
  55. package/skills/deep-research-analyst/SKILL.md +182 -0
  56. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  57. package/skills/design-system-architect/SKILL.md +34 -3
  58. package/skills/desktop-electron-expert/SKILL.md +129 -128
  59. package/skills/documentation-site-expert/SKILL.md +60 -59
  60. package/skills/doku-mcp-server/SKILL.md +5 -4
  61. package/skills/doku-payment-gateway/SKILL.md +250 -232
  62. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  63. package/skills/e2e-testing-expert/SKILL.md +5 -4
  64. package/skills/ecommerce-expert/SKILL.md +88 -87
  65. package/skills/email-notification-expert/SKILL.md +35 -7
  66. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  67. package/skills/error-resilience-expert/SKILL.md +26 -4
  68. package/skills/event-driven-architect/SKILL.md +5 -4
  69. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  70. package/skills/file-upload-media-expert/SKILL.md +5 -4
  71. package/skills/firebase-security-expert/SKILL.md +5 -4
  72. package/skills/form-validation-expert/SKILL.md +7 -6
  73. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  74. package/skills/fullstack-expert/SKILL.md +68 -144
  75. package/skills/gemini-agent-booster/SKILL.md +248 -172
  76. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  77. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  78. package/skills/glsl-shader-expert/SKILL.md +155 -71
  79. package/skills/go-programming-expert/SKILL.md +5 -4
  80. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -159
  81. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  82. package/skills/headless-cms-expert/SKILL.md +182 -181
  83. package/skills/hig/SKILL.md +5 -4
  84. package/skills/js-backend-expert/SKILL.md +219 -218
  85. package/skills/legacy-code-translator/SKILL.md +6 -5
  86. package/skills/llm-finops-router/SKILL.md +52 -0
  87. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  88. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  89. package/skills/mcp-server-architect/SKILL.md +316 -294
  90. package/skills/micro-frontend-architect/SKILL.md +5 -4
  91. package/skills/mobile-expo-expert/SKILL.md +5 -4
  92. package/skills/modern-css-native-expert/SKILL.md +190 -189
  93. package/skills/monorepo-architect/SKILL.md +5 -4
  94. package/skills/mpa-orchestrator/SKILL.md +41 -4
  95. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  96. package/skills/mvc-expert/SKILL.md +5 -4
  97. package/skills/n8n-automation-expert/SKILL.md +90 -89
  98. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  99. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  100. package/skills/payment-gateway-expert/SKILL.md +131 -128
  101. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  102. package/skills/performance-web-vitals/SKILL.md +5 -4
  103. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  104. package/skills/prd-architect/SKILL.md +85 -109
  105. package/skills/proactive-background-watcher/SKILL.md +5 -4
  106. package/skills/production-ready-hardener/SKILL.md +25 -27
  107. package/skills/pwa-offline-first-expert/SKILL.md +227 -185
  108. package/skills/pydantic-ai-expert/SKILL.md +162 -0
  109. package/skills/python-programming-expert/SKILL.md +5 -4
  110. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  111. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  112. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  113. package/skills/rust-programming-expert/SKILL.md +5 -4
  114. package/skills/saas-architect/SKILL.md +155 -0
  115. package/skills/saas-billing/SKILL.md +394 -382
  116. package/skills/saas-multi-tenant/SKILL.md +7 -6
  117. package/skills/scalability-clean-code/SKILL.md +5 -4
  118. package/skills/search-engine-expert/SKILL.md +90 -89
  119. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  120. package/skills/senior-frontend/SKILL.md +21 -18
  121. package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
  122. package/skills/seo/SKILL.md +4 -4
  123. package/skills/session-memory-manager/SKILL.md +129 -0
  124. package/skills/solidjs-expert/SKILL.md +81 -80
  125. package/skills/spa-orchestrator/SKILL.md +5 -4
  126. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  127. package/skills/state-management-expert/SKILL.md +5 -4
  128. package/skills/supabase-security-expert/SKILL.md +5 -4
  129. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  130. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  131. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -0
  132. package/skills/tailwind-expert/SKILL.md +62 -5
  133. package/skills/tanstack-query-expert/SKILL.md +5 -4
  134. package/skills/tauri-expert/SKILL.md +5 -4
  135. package/skills/typescript-expert/SKILL.md +5 -4
  136. package/skills/ui-ux-pro-max/SKILL.md +7 -4
  137. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  138. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -0
  139. package/skills/voice-ai-realtime-agent/SKILL.md +243 -202
  140. package/skills/vue-frontend-expert/SKILL.md +5 -4
  141. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  142. package/skills/web-3d-graphics-expert/SKILL.md +259 -82
  143. package/skills/web-game-engine-expert/SKILL.md +278 -50
  144. package/skills/web-scraper/SKILL.md +158 -157
  145. package/skills/website-design-cloner/SKILL.md +5 -4
  146. package/skills/webxr-ar-vr-expert/SKILL.md +105 -65
  147. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  148. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  149. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -227
  150. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  151. package/BLUEPRINT.md +0 -309
  152. package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
  153. package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
  154. package/skills/asisten-ramah/SKILL.md +0 -47
  155. package/skills/auto-doc-updater/SKILL.md +0 -220
  156. package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
  157. package/skills/background-jobs-queue-expert/SKILL.md +0 -235
  158. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  159. package/skills/database-migration-versioning-expert/SKILL.md +0 -90
  160. package/skills/edge-serverless-db-expert/SKILL.md +0 -99
  161. package/skills/mcp-client-orchestrator/SKILL.md +0 -76
  162. package/skills/mobile-push-notification-expert/SKILL.md +0 -71
  163. package/skills/monday-design-aesthetic/SKILL.md +0 -73
  164. package/skills/multiple-entry-points/SKILL.md +0 -91
  165. package/skills/project-context-mapper/SKILL.md +0 -85
  166. package/skills/saas-mvp-launcher/SKILL.md +0 -260
  167. package/skills/saas-transformer/SKILL.md +0 -500
  168. package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
  169. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  170. package/skills/self-evolving-memory-graph/SKILL.md +0 -91
  171. package/skills/session-context-loader/SKILL.md +0 -83
  172. package/skills/session-handoff-resume/SKILL.md +0 -164
  173. package/skills/skill-baru/SKILL.md +0 -178
  174. package/skills/supabase-migration/SKILL.md +0 -91
  175. package/skills/token-saver/SKILL.md +0 -119
  176. package/skills/ui-components-expert/SKILL.md +0 -166
  177. package/skills/vibe-code-gardener/SKILL.md +0 -181
  178. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
  179. /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
  180. /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
  181. /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`.