vibes-plug 1.0.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/.claude/rules/vibes-plug-core.md +32 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +51 -0
  3. package/.cursorrules +42 -0
  4. package/AGENTS.md +96 -0
  5. package/BLUEPRINT.md +309 -125
  6. package/CHANGELOG.md +183 -1
  7. package/CLAUDE.md +70 -0
  8. package/LICENSE +1 -1
  9. package/README.md +641 -263
  10. package/index.js +19 -0
  11. package/package.json +61 -25
  12. package/plugin.json +24 -7
  13. package/scripts/generate_swarm_gif.py +295 -0
  14. package/scripts/install.js +201 -0
  15. package/skills/accessibility-testing-expert/SKILL.md +116 -0
  16. package/skills/ai-cost-token-optimizer/SKILL.md +82 -0
  17. package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
  18. package/skills/ai-llm-integration-expert/SKILL.md +147 -122
  19. package/skills/ai-media-generation-expert/SKILL.md +172 -0
  20. package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
  21. package/skills/angular-expert/SKILL.md +148 -0
  22. package/skills/api-design-expert/SKILL.md +316 -309
  23. package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
  24. package/skills/app-analyzer-optimizer/SKILL.md +195 -188
  25. package/skills/apple-ecosystem-expert/SKILL.md +145 -0
  26. package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
  27. package/skills/astro-framework-expert/SKILL.md +200 -0
  28. package/skills/async-queue-temporal-expert/SKILL.md +240 -0
  29. package/skills/authentication-identity-expert/SKILL.md +279 -45
  30. package/skills/auto-doc-updater/SKILL.md +219 -203
  31. package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
  32. package/skills/autonomous-red-teamer/SKILL.md +203 -0
  33. package/skills/autonomous-tdd-debugger/SKILL.md +71 -0
  34. package/skills/background-jobs-queue-expert/SKILL.md +235 -0
  35. package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
  36. package/skills/blockchain-web3-expert/SKILL.md +115 -0
  37. package/skills/bootstrap-to-modern/SKILL.md +93 -86
  38. package/skills/brainstorming/SKILL.md +381 -353
  39. package/skills/browser-automation-expert/SKILL.md +222 -0
  40. package/skills/bun-runtime-expert/SKILL.md +7 -1
  41. package/skills/chatbot-messaging-expert/SKILL.md +114 -0
  42. package/skills/ci-cd-devops-architect/SKILL.md +81 -45
  43. package/skills/cloud-hosting-expert/SKILL.md +249 -243
  44. package/skills/coderabbit/SKILL.md +197 -191
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
  46. package/skills/cron-scheduler-expert/SKILL.md +304 -0
  47. package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
  48. package/skills/data-telemetry-expert/SKILL.md +218 -212
  49. package/skills/data-visualization-expert/SKILL.md +154 -0
  50. package/skills/database-migration-versioning-expert/SKILL.md +90 -0
  51. package/skills/database-orm-expert/SKILL.md +303 -293
  52. package/skills/dependency-upgrade-migrator/SKILL.md +301 -0
  53. package/skills/design-system-architect/SKILL.md +278 -242
  54. package/skills/desktop-electron-expert/SKILL.md +128 -0
  55. package/skills/documentation-site-expert/SKILL.md +59 -0
  56. package/skills/doku-mcp-server/SKILL.md +257 -0
  57. package/skills/doku-payment-gateway/SKILL.md +233 -0
  58. package/skills/domain-driven-design-expert/SKILL.md +82 -0
  59. package/skills/e2e-testing-expert/SKILL.md +320 -314
  60. package/skills/ecommerce-expert/SKILL.md +87 -0
  61. package/skills/edge-serverless-db-expert/SKILL.md +99 -0
  62. package/skills/email-notification-expert/SKILL.md +368 -0
  63. package/skills/error-resilience-expert/SKILL.md +486 -0
  64. package/skills/event-driven-architect/SKILL.md +86 -80
  65. package/skills/feature-flag-analytics-expert/SKILL.md +66 -0
  66. package/skills/file-upload-media-expert/SKILL.md +437 -0
  67. package/skills/firebase-security-expert/SKILL.md +7 -1
  68. package/skills/form-validation-expert/SKILL.md +407 -0
  69. package/skills/fullstack-expert/SKILL.md +260 -201
  70. package/skills/fullstack-expert/references/api_design_guide.md +466 -466
  71. package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
  72. package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
  73. package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
  74. package/skills/gemini-agent-booster/SKILL.md +142 -104
  75. package/skills/geospatial-maps-expert/SKILL.md +80 -0
  76. package/skills/global-a11y-i18n-expert/SKILL.md +86 -80
  77. package/skills/glsl-shader-expert/SKILL.md +107 -0
  78. package/skills/go-programming-expert/SKILL.md +300 -294
  79. package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
  80. package/skills/graphql-apollo-expert/SKILL.md +114 -0
  81. package/skills/headless-cms-expert/SKILL.md +181 -0
  82. package/skills/hig/SKILL.md +193 -187
  83. package/skills/js-backend-expert/SKILL.md +218 -191
  84. package/skills/legacy-code-translator/SKILL.md +71 -0
  85. package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
  86. package/skills/logging-error-tracking-expert/SKILL.md +344 -0
  87. package/skills/mcp-client-orchestrator/SKILL.md +76 -0
  88. package/skills/mcp-server-architect/SKILL.md +226 -126
  89. package/skills/micro-frontend-architect/SKILL.md +112 -0
  90. package/skills/mobile-expo-expert/SKILL.md +191 -185
  91. package/skills/mobile-push-notification-expert/SKILL.md +71 -0
  92. package/skills/modern-css-native-expert/SKILL.md +189 -0
  93. package/skills/monday-design-aesthetic/SKILL.md +72 -66
  94. package/skills/monorepo-architect/SKILL.md +232 -226
  95. package/skills/mpa-orchestrator/SKILL.md +120 -101
  96. package/skills/multi-agent-orchestration/SKILL.md +173 -153
  97. package/skills/multiple-entry-points/SKILL.md +91 -55
  98. package/skills/mvc-expert/SKILL.md +237 -231
  99. package/skills/n8n-automation-expert/SKILL.md +89 -0
  100. package/skills/nextjs-app-router-expert/SKILL.md +148 -0
  101. package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
  102. package/skills/payment-gateway-expert/SKILL.md +129 -45
  103. package/skills/pdf-document-generation-expert/SKILL.md +91 -0
  104. package/skills/performance-web-vitals/SKILL.md +337 -331
  105. package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
  106. package/skills/prd-architect/SKILL.md +206 -190
  107. package/skills/proactive-background-watcher/SKILL.md +68 -0
  108. package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
  109. package/skills/production-ready-hardener/SKILL.md +461 -468
  110. package/skills/production-ready-hardener/references/production_checklist.md +161 -161
  111. package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
  112. package/skills/project-context-mapper/SKILL.md +85 -0
  113. package/skills/pwa-offline-first-expert/SKILL.md +185 -0
  114. package/skills/python-programming-expert/SKILL.md +407 -270
  115. package/skills/rate-limit-abuse-prevention/SKILL.md +377 -0
  116. package/skills/realtime-collaboration-expert/SKILL.md +99 -45
  117. package/skills/rich-text-editor-expert/SKILL.md +177 -0
  118. package/skills/rust-programming-expert/SKILL.md +240 -234
  119. package/skills/saas-billing/SKILL.md +382 -376
  120. package/skills/saas-multi-tenant/SKILL.md +256 -236
  121. package/skills/saas-mvp-launcher/SKILL.md +30 -1
  122. package/skills/saas-transformer/SKILL.md +499 -445
  123. package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
  124. package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
  125. package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
  126. package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
  127. package/skills/scalability-clean-code/SKILL.md +234 -228
  128. package/skills/search-engine-expert/SKILL.md +89 -0
  129. package/skills/secure-fuzz-testing/SKILL.md +7 -1
  130. package/skills/self-evolving-memory-graph/SKILL.md +91 -0
  131. package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
  132. package/skills/senior-frontend/SKILL.md +85 -105
  133. package/skills/seo/SKILL.md +258 -224
  134. package/skills/session-context-loader/SKILL.md +83 -0
  135. package/skills/session-handoff-resume/SKILL.md +163 -157
  136. package/skills/{skill_baru → skill-baru}/SKILL.md +177 -146
  137. package/skills/solidjs-expert/SKILL.md +80 -0
  138. package/skills/spa-orchestrator/SKILL.md +306 -287
  139. package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
  140. package/skills/state-management-expert/SKILL.md +277 -271
  141. package/skills/supabase-migration/SKILL.md +47 -1
  142. package/skills/supabase-security-expert/SKILL.md +248 -242
  143. package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
  144. package/skills/svg-animation-motion-expert/SKILL.md +115 -0
  145. package/skills/tailwind-expert/SKILL.md +139 -187
  146. package/skills/tanstack-query-expert/SKILL.md +204 -198
  147. package/skills/tauri-expert/SKILL.md +7 -1
  148. package/skills/token-saver/SKILL.md +118 -110
  149. package/skills/typescript-expert/SKILL.md +329 -278
  150. package/skills/ui-components-expert/SKILL.md +166 -63
  151. package/skills/ui-ux-pro-max/SKILL.md +221 -200
  152. package/skills/vector-db-rag-expert/SKILL.md +208 -0
  153. package/skills/vibe-code-gardener/SKILL.md +180 -172
  154. package/skills/visual-qa-vision-agent/SKILL.md +71 -0
  155. package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
  156. package/skills/vue-frontend-expert/SKILL.md +132 -0
  157. package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
  158. package/skills/web-3d-graphics-expert/SKILL.md +137 -0
  159. package/skills/web-game-engine-expert/SKILL.md +102 -0
  160. package/skills/web-scraper/SKILL.md +98 -146
  161. package/skills/website-design-cloner/SKILL.md +180 -0
  162. package/skills/webxr-ar-vr-expert/SKILL.md +123 -0
  163. package/skills/wordpress-headless-expert/SKILL.md +144 -0
  164. package/skills/zero-to-prod-orchestrator/SKILL.md +231 -180
  165. package/skills/zero-trust-secret-vault/SKILL.md +88 -0
  166. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  167. package/CONTRIBUTING.md +0 -199
  168. package/SECURITY.md +0 -21
  169. package/banner.png +0 -0
  170. package/skills/senior-fullstack/SKILL.md +0 -167
  171. package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
  172. package/skills/senior-fullstack/references/development_workflows.md +0 -222
  173. package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
  174. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
  175. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
  176. package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
  177. package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
  178. package/skills/seo-geo/SKILL.md +0 -188
  179. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  180. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  181. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  182. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  183. package/skills/ui_ux_expert/SKILL.md +0 -114
@@ -0,0 +1,486 @@
1
+ ---
2
+ name: error-resilience-expert
3
+ description: "Expert guide for error handling patterns, resilience engineering, retry strategies, circuit breakers, and graceful degradation across React, Next.js, and Node.js / Panduan ahli pola penanganan error, rekayasa ketahanan, strategi retry, circuit breaker, dan degradasi anggun di React, Next.js, dan Node.js."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # Error & Resilience Expert (2026 Edition)
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Orchestration & Integration
17
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
19
+ ### Description
20
+ Production-grade guide for building resilient applications that fail gracefully, recover automatically, and provide actionable error feedback to users and developers. Covers **React Error Boundaries**, **Next.js error handling** (`error.tsx`, `global-error.tsx`, `not-found.tsx`), **API error response standards** (RFC 9457 Problem Details), **retry patterns** with exponential backoff, **circuit breaker patterns**, **dead letter queues**, and **Sentry/BugSnag** integration.
21
+
22
+ ### Trigger Conditions
23
+ Activate this skill when:
24
+ - Setting up error handling for React/Next.js applications.
25
+ - Implementing retry logic for unreliable API calls or third-party services.
26
+ - Designing circuit breaker patterns for microservice-to-microservice calls.
27
+ - Building fallback UI for degraded service states.
28
+ - Integrating error tracking tools (Sentry, BugSnag, LogRocket).
29
+ - Handling transaction failures in database operations.
30
+ - Designing dead letter queues for failed async jobs.
31
+
32
+ ---
33
+
34
+ ### Core Concepts
35
+
36
+ #### Error Handling Philosophy
37
+
38
+ | Principle | Description |
39
+ |---|---|
40
+ | **Fail Fast** | Detect and report errors early; don't let invalid state propagate |
41
+ | **Fail Gracefully** | Show useful fallback UI, not blank screens or raw stack traces |
42
+ | **Retry Intelligently** | Use exponential backoff + jitter; never retry non-idempotent operations blindly |
43
+ | **Isolate Failures** | A failing component shouldn't crash the entire page |
44
+ | **Track Everything** | Every unhandled error must reach your monitoring system |
45
+
46
+ ---
47
+
48
+ ### 1. React & Next.js Error Handling
49
+
50
+ #### Error Boundaries (React 19)
51
+ ```tsx
52
+ // components/error-boundary.tsx
53
+ 'use client';
54
+
55
+ import { Component, type ErrorInfo, type ReactNode } from 'react';
56
+
57
+ interface Props {
58
+ children: ReactNode;
59
+ fallback: ReactNode | ((error: Error, reset: () => void) => ReactNode);
60
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
61
+ }
62
+
63
+ interface State {
64
+ hasError: boolean;
65
+ error: Error | null;
66
+ }
67
+
68
+ export class ErrorBoundary extends Component<Props, State> {
69
+ state: State = { hasError: false, error: null };
70
+
71
+ static getDerivedStateFromError(error: Error): State {
72
+ return { hasError: true, error };
73
+ }
74
+
75
+ componentDidCatch(error: Error, errorInfo: ErrorInfo) {
76
+ this.props.onError?.(error, errorInfo);
77
+ // Report to Sentry/BugSnag
78
+ if (typeof window !== 'undefined' && window.Sentry) {
79
+ window.Sentry.captureException(error, { extra: errorInfo });
80
+ }
81
+ }
82
+
83
+ reset = () => this.setState({ hasError: false, error: null });
84
+
85
+ render() {
86
+ if (this.state.hasError && this.state.error) {
87
+ const { fallback } = this.props;
88
+ return typeof fallback === 'function'
89
+ ? fallback(this.state.error, this.reset)
90
+ : fallback;
91
+ }
92
+ return this.props.children;
93
+ }
94
+ }
95
+ ```
96
+
97
+ #### Next.js App Router Error Files
98
+ ```tsx
99
+ // app/error.tsx — Route-level error handler
100
+ 'use client';
101
+
102
+ export default function Error({
103
+ error,
104
+ reset,
105
+ }: {
106
+ error: Error & { digest?: string };
107
+ reset: () => void;
108
+ }) {
109
+ return (
110
+ <div role="alert" className="error-container">
111
+ <h2>Something went wrong</h2>
112
+ <p>{error.message}</p>
113
+ {error.digest && <p className="text-muted">Error ID: {error.digest}</p>}
114
+ <button onClick={reset}>Try again</button>
115
+ </div>
116
+ );
117
+ }
118
+
119
+ // app/not-found.tsx — 404 handler
120
+ export default function NotFound() {
121
+ return (
122
+ <div>
123
+ <h2>Page Not Found</h2>
124
+ <p>The page you are looking for does not exist.</p>
125
+ </div>
126
+ );
127
+ }
128
+
129
+ // app/global-error.tsx — Root layout error handler (catches layout errors)
130
+ 'use client';
131
+
132
+ export default function GlobalError({
133
+ error,
134
+ reset,
135
+ }: {
136
+ error: Error & { digest?: string };
137
+ reset: () => void;
138
+ }) {
139
+ return (
140
+ <html>
141
+ <body>
142
+ <h2>Something went wrong!</h2>
143
+ <button onClick={reset}>Try again</button>
144
+ </body>
145
+ </html>
146
+ );
147
+ }
148
+ ```
149
+
150
+ ---
151
+
152
+ ### 2. API Error Response Standards (RFC 9457)
153
+
154
+ ```typescript
155
+ // lib/api-error.ts
156
+ export class ApiError extends Error {
157
+ constructor(
158
+ public readonly status: number,
159
+ public readonly code: string,
160
+ message: string,
161
+ public readonly details?: Record<string, unknown>,
162
+ ) {
163
+ super(message);
164
+ this.name = 'ApiError';
165
+ }
166
+
167
+ /** RFC 9457 Problem Details JSON response */
168
+ toJSON() {
169
+ return {
170
+ type: `https://api.example.com/errors/${this.code}`,
171
+ title: this.code.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
172
+ status: this.status,
173
+ detail: this.message,
174
+ ...(this.details && { extensions: this.details }),
175
+ };
176
+ }
177
+ }
178
+
179
+ // Usage in API route
180
+ export async function POST(request: Request) {
181
+ try {
182
+ const body = await request.json();
183
+ const parsed = createUserSchema.safeParse(body);
184
+ if (!parsed.success) {
185
+ throw new ApiError(422, 'validation_error', 'Invalid request body', {
186
+ errors: parsed.error.flatten().fieldErrors,
187
+ });
188
+ }
189
+ // ...business logic
190
+ } catch (error) {
191
+ if (error instanceof ApiError) {
192
+ return Response.json(error.toJSON(), { status: error.status });
193
+ }
194
+ // Unexpected error — log and return generic 500
195
+ console.error('Unhandled error:', error);
196
+ return Response.json(
197
+ { type: 'about:blank', title: 'Internal Server Error', status: 500 },
198
+ { status: 500 },
199
+ );
200
+ }
201
+ }
202
+ ```
203
+
204
+ ---
205
+
206
+ ### 3. Retry Patterns with Exponential Backoff
207
+
208
+ ```typescript
209
+ // lib/retry.ts
210
+ interface RetryOptions {
211
+ maxRetries?: number;
212
+ baseDelayMs?: number;
213
+ maxDelayMs?: number;
214
+ /** Only retry if this returns true */
215
+ retryIf?: (error: unknown) => boolean;
216
+ onRetry?: (attempt: number, error: unknown) => void;
217
+ }
218
+
219
+ export async function withRetry<T>(
220
+ fn: () => Promise<T>,
221
+ options: RetryOptions = {},
222
+ ): Promise<T> {
223
+ const {
224
+ maxRetries = 3,
225
+ baseDelayMs = 500,
226
+ maxDelayMs = 30_000,
227
+ retryIf = isRetryable,
228
+ onRetry,
229
+ } = options;
230
+
231
+ let lastError: unknown;
232
+
233
+ for (let attempt = 0; attempt <= maxRetries; attempt++) {
234
+ try {
235
+ return await fn();
236
+ } catch (error) {
237
+ lastError = error;
238
+
239
+ if (attempt === maxRetries || !retryIf(error)) {
240
+ throw error;
241
+ }
242
+
243
+ // Exponential backoff with jitter
244
+ const delay = Math.min(
245
+ baseDelayMs * 2 ** attempt + Math.random() * baseDelayMs,
246
+ maxDelayMs,
247
+ );
248
+
249
+ onRetry?.(attempt + 1, error);
250
+ await sleep(delay);
251
+ }
252
+ }
253
+
254
+ throw lastError;
255
+ }
256
+
257
+ function isRetryable(error: unknown): boolean {
258
+ if (error instanceof ApiError) {
259
+ // Retry 429 (rate limit), 502/503/504 (server errors)
260
+ return [429, 502, 503, 504].includes(error.status);
261
+ }
262
+ // Retry network errors
263
+ if (error instanceof TypeError && error.message.includes('fetch')) return true;
264
+ return false;
265
+ }
266
+
267
+ const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
268
+ ```
269
+
270
+ ---
271
+
272
+ ### 4. Circuit Breaker Pattern
273
+
274
+ ```typescript
275
+ // lib/circuit-breaker.ts
276
+ type CircuitState = 'CLOSED' | 'OPEN' | 'HALF_OPEN';
277
+
278
+ interface CircuitBreakerOptions {
279
+ failureThreshold?: number;
280
+ resetTimeoutMs?: number;
281
+ halfOpenMaxAttempts?: number;
282
+ }
283
+
284
+ export class CircuitBreaker {
285
+ private state: CircuitState = 'CLOSED';
286
+ private failureCount = 0;
287
+ private lastFailureTime = 0;
288
+ private halfOpenAttempts = 0;
289
+
290
+ constructor(
291
+ private readonly name: string,
292
+ private readonly options: CircuitBreakerOptions = {},
293
+ ) {}
294
+
295
+ private get failureThreshold() { return this.options.failureThreshold ?? 5; }
296
+ private get resetTimeoutMs() { return this.options.resetTimeoutMs ?? 60_000; }
297
+
298
+ async execute<T>(fn: () => Promise<T>): Promise<T> {
299
+ if (this.state === 'OPEN') {
300
+ if (Date.now() - this.lastFailureTime >= this.resetTimeoutMs) {
301
+ this.state = 'HALF_OPEN';
302
+ this.halfOpenAttempts = 0;
303
+ } else {
304
+ throw new Error(`Circuit breaker "${this.name}" is OPEN`);
305
+ }
306
+ }
307
+
308
+ try {
309
+ const result = await fn();
310
+ this.onSuccess();
311
+ return result;
312
+ } catch (error) {
313
+ this.onFailure();
314
+ throw error;
315
+ }
316
+ }
317
+
318
+ private onSuccess() {
319
+ this.failureCount = 0;
320
+ this.state = 'CLOSED';
321
+ }
322
+
323
+ private onFailure() {
324
+ this.failureCount++;
325
+ this.lastFailureTime = Date.now();
326
+ if (this.failureCount >= this.failureThreshold) {
327
+ this.state = 'OPEN';
328
+ }
329
+ }
330
+
331
+ getState(): CircuitState { return this.state; }
332
+ }
333
+
334
+ // Usage
335
+ const paymentCircuit = new CircuitBreaker('stripe-api', {
336
+ failureThreshold: 3,
337
+ resetTimeoutMs: 30_000,
338
+ });
339
+
340
+ const charge = await paymentCircuit.execute(() =>
341
+ stripe.paymentIntents.create({ amount: 1000, currency: 'usd' })
342
+ );
343
+ ```
344
+
345
+ ---
346
+
347
+ ### 5. Graceful Degradation & Fallback UI
348
+
349
+ ```tsx
350
+ // components/resilient-data.tsx
351
+ 'use client';
352
+
353
+ import { useSuspenseQuery } from '@tanstack/react-query';
354
+ import { Suspense } from 'react';
355
+ import { ErrorBoundary } from './error-boundary';
356
+
357
+ // Pattern: Wrap data-dependent UI with ErrorBoundary + Suspense
358
+ export function ResilientDataSection() {
359
+ return (
360
+ <ErrorBoundary
361
+ fallback={(error, reset) => (
362
+ <div className="degraded-state">
363
+ <p>Unable to load latest data. Showing cached version.</p>
364
+ <button onClick={reset}>Retry</button>
365
+ </div>
366
+ )}
367
+ >
368
+ <Suspense fallback={<DataSkeleton />}>
369
+ <LiveDataSection />
370
+ </Suspense>
371
+ </ErrorBoundary>
372
+ );
373
+ }
374
+ ```
375
+
376
+ ---
377
+
378
+ ### 6. Dead Letter Queue for Failed Jobs
379
+
380
+ ```typescript
381
+ // queues/dead-letter.ts
382
+ import { Queue, Worker } from 'bullmq';
383
+
384
+ const mainQueue = new Queue('email-send', { connection: redis });
385
+ const deadLetterQueue = new Queue('email-send-dlq', { connection: redis });
386
+
387
+ const worker = new Worker('email-send', async (job) => {
388
+ await sendEmail(job.data);
389
+ }, {
390
+ connection: redis,
391
+ settings: {
392
+ backoffStrategy: (attemptsMade) => {
393
+ // Exponential backoff: 1s, 4s, 16s, 64s
394
+ return Math.min(1000 * 4 ** attemptsMade, 120_000);
395
+ },
396
+ },
397
+ });
398
+
399
+ worker.on('failed', async (job, err) => {
400
+ if (job && job.attemptsMade >= (job.opts.attempts ?? 3)) {
401
+ // Move to dead letter queue for manual investigation
402
+ await deadLetterQueue.add('failed-email', {
403
+ originalJobId: job.id,
404
+ data: job.data,
405
+ error: err.message,
406
+ failedAt: new Date().toISOString(),
407
+ });
408
+ }
409
+ });
410
+ ```
411
+
412
+ ---
413
+
414
+ ### Common Pitfalls to Avoid
415
+
416
+ | Anti-Pattern | Problem | Correct Approach |
417
+ |---|---|---|
418
+ | Catching errors silently (`catch (e) {}`) | Errors disappear, bugs hide | Always log or re-throw with context |
419
+ | Retrying non-idempotent operations | Duplicate charges, double inserts | Only retry reads and idempotent writes |
420
+ | No timeout on external calls | Thread/connection pool exhaustion | Set `AbortSignal.timeout()` on all fetch calls |
421
+ | Generic "Something went wrong" for all errors | Users can't self-resolve | Show actionable messages (retry, contact support, check input) |
422
+ | Using `try/catch` around every single line | Code becomes unreadable | Use error boundaries and middleware for batch handling |
423
+
424
+ ---
425
+
426
+ ### Integration with Other Skills
427
+
428
+ - `js-backend-expert` — API middleware error handling and response formatting
429
+ - `senior-frontend` — React Error Boundaries and Suspense patterns
430
+ - `database-orm-expert` — Transaction error handling and rollback patterns
431
+ - `logging-error-tracking-expert` — Sentry/BugSnag integration and structured error logging
432
+ - `async-queue-temporal-expert` — Dead letter queues and retry strategies for background jobs
433
+ - `production-ready-hardener` — Pre-launch error handling audit checklist
434
+ - `api-design-expert` — RFC 9457 error response specification
435
+
436
+ ---
437
+
438
+ <a name="bahasa-indonesia"></a>
439
+ ## Bahasa Indonesia
440
+
441
+ ### Integrasi Orkestrasi
442
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
443
+
444
+ ### Deskripsi
445
+ Panduan tingkat produksi untuk membangun aplikasi yang tahan banting — gagal secara anggun, pulih otomatis, dan memberikan umpan balik error yang dapat ditindaklanjuti kepada pengguna maupun developer. Mencakup **React Error Boundaries**, **penanganan error Next.js** (`error.tsx`, `global-error.tsx`, `not-found.tsx`), **standar respons error API** (RFC 9457 Problem Details), **pola retry** dengan exponential backoff, **pola circuit breaker**, **dead letter queues**, dan integrasi **Sentry/BugSnag**.
446
+
447
+ ### Kondisi Pemicu
448
+ Aktifkan skill ini ketika:
449
+ - Menyiapkan penanganan error untuk aplikasi React/Next.js.
450
+ - Mengimplementasikan logika retry untuk panggilan API yang tidak stabil atau layanan pihak ketiga.
451
+ - Merancang pola circuit breaker untuk panggilan antar-microservice.
452
+ - Membangun UI fallback untuk kondisi layanan terdegradasi.
453
+ - Mengintegrasikan alat pelacak error (Sentry, BugSnag, LogRocket).
454
+ - Menangani kegagalan transaksi pada operasi database.
455
+ - Merancang dead letter queue untuk job asinkron yang gagal.
456
+
457
+ ### Konsep Inti
458
+
459
+ #### Filosofi Penanganan Error
460
+
461
+ | Prinsip | Deskripsi |
462
+ |---|---|
463
+ | **Gagal Cepat** | Deteksi dan laporkan error sedini mungkin; jangan biarkan state invalid menyebar |
464
+ | **Gagal dengan Anggun** | Tampilkan UI fallback yang berguna, bukan layar kosong atau stack trace mentah |
465
+ | **Retry dengan Cerdas** | Gunakan exponential backoff + jitter; jangan retry operasi non-idempoten secara membabi buta |
466
+ | **Isolasi Kegagalan** | Komponen yang gagal tidak boleh menghancurkan seluruh halaman |
467
+ | **Lacak Semuanya** | Setiap error yang tidak tertangani harus sampai ke sistem monitoring |
468
+
469
+ ### Kesalahan Umum yang Harus Dihindari
470
+
471
+ | Anti-Pola | Masalah | Pendekatan yang Benar |
472
+ |---|---|---|
473
+ | Menangkap error diam-diam (`catch (e) {}`) | Error menghilang, bug tersembunyi | Selalu log atau lempar ulang dengan konteks |
474
+ | Retry operasi non-idempoten | Charge ganda, insert duplikat | Hanya retry operasi baca dan write idempoten |
475
+ | Tidak ada timeout pada panggilan eksternal | Thread/pool koneksi habis | Pasang `AbortSignal.timeout()` pada semua panggilan fetch |
476
+ | Pesan generik "Terjadi kesalahan" untuk semua error | Pengguna tidak bisa menyelesaikan sendiri | Tampilkan pesan yang actionable (retry, hubungi support, periksa input) |
477
+
478
+ ### Integrasi dengan Skill Lain
479
+
480
+ - `js-backend-expert` — Middleware penanganan error API dan pemformatan respons
481
+ - `senior-frontend` — React Error Boundaries dan pola Suspense
482
+ - `database-orm-expert` — Penanganan error transaksi dan pola rollback
483
+ - `logging-error-tracking-expert` — Integrasi Sentry/BugSnag dan logging error terstruktur
484
+ - `async-queue-temporal-expert` — Dead letter queue dan strategi retry untuk background job
485
+ - `production-ready-hardener` — Checklist audit penanganan error sebelum peluncuran
486
+ - `api-design-expert` — Spesifikasi respons error RFC 9457
@@ -1,81 +1,87 @@
1
- ---
2
- name: event-driven-architect
3
- description: "Expert guide for microservices, message queues, Event Sourcing, and high-scale backend architectures / Panduan ahli untuk arsitektur microservices, antrean pesan, dan backend skala tinggi."
1
+ ---
2
+ name: event-driven-architect
3
+ description: "Expert guide for microservices, message queues, Event Sourcing, and high-scale backend architectures / Panduan ahli untuk arsitektur microservices, antrean pesan, dan backend skala tinggi."
4
4
  author: "Roedy Rustam"
5
- ---
6
-
7
- # Event-Driven Architecture Expert
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Description
17
- This skill provides architectural guidance for breaking down large monolithic applications into scalable, decoupled services. It focuses on Event-Driven Architecture (EDA), message brokers, and advanced patterns like Event Sourcing and CQRS (Command Query Responsibility Segregation).
18
-
19
- ### Trigger Conditions
20
- - Scaling a system that handles extremely high throughput or traffic spikes.
21
- - Implementing background jobs, asynchronous workers, or heavy data processing.
22
- - Transitioning from a monolith to microservices.
23
- - Integrating message brokers like RabbitMQ, Apache Kafka, AWS SQS, or Redis Pub/Sub.
24
- - Resolving distributed transaction issues (e.g., handling the Saga pattern).
25
-
26
- ### Core Architecture Guidelines
27
-
28
- #### 1. Decoupling via Events
29
- Do not use synchronous HTTP calls between microservices for state mutations. It creates tightly coupled systems that fail in cascades.
30
- - **Publisher/Subscriber**: When Service A does something, it publishes an event (e.g., `UserCreated`). Service B and Service C listen to this event and react asynchronously.
31
- - Use **RabbitMQ** or **AWS SQS** for standard task queues (where order and exact-once delivery might be managed).
32
- - Use **Apache Kafka** or **Redpanda** for high-throughput event streaming where logs need to be replayed.
33
-
34
- #### 2. The Saga Pattern (Distributed Transactions)
35
- In microservices, you cannot use simple database transactions (ACID) across different databases.
36
- - Use the **Saga Pattern** to coordinate multiple operations. If Step 3 in a 4-step process fails, the system must publish "compensating events" to undo Steps 1 and 2 in the other services.
37
-
38
- #### 3. CQRS (Command Query Responsibility Segregation)
39
- For high-read applications (like social media or analytics dashboards), split the read operations from the write operations.
40
- - **Commands**: Mutate state (write database).
41
- - **Queries**: Read state (read replica or materialized views/Elasticsearch).
42
- - Events synchronize the Write DB with the Read DB.
43
-
44
- #### 4. Event Sourcing
45
- Instead of storing just the current state of an entity (e.g., `AccountBalance = $100`), store the *history of events* that led to that state (`Deposited $150`, `Withdrew $50`). The current state is derived by replaying the events. This is mandatory for financial and highly auditable systems.
46
-
47
- ---
48
-
49
- <a name="bahasa-indonesia"></a>
50
- ## Bahasa Indonesia
51
-
52
- ### Deskripsi
53
- Skill ini memberikan panduan arsitektural untuk memecah aplikasi monolit yang besar menjadi layanan yang terdesentralisasi (*decoupled*) dan dapat diskalakan. Fokus utamanya adalah pada *Event-Driven Architecture* (Arsitektur Berbasis Peristiwa), *message brokers* (pialang pesan), serta pola lanjutan seperti *Event Sourcing* dan CQRS (*Command Query Responsibility Segregation*).
54
-
55
- ### Kondisi Pemicu
56
- - Menskalakan sistem untuk menangani lonjakan *traffic* atau volume data yang sangat tinggi.
57
- - Mengimplementasikan pekerjaan latar belakang (*background jobs*), *worker asinkron*, atau pemrosesan data berat.
58
- - Bertransisi dari arsitektur monolit ke layanan mikro (*microservices*).
59
- - Mengintegrasikan *message brokers* seperti RabbitMQ, Apache Kafka, AWS SQS, atau Redis Pub/Sub.
60
- - Menyelesaikan masalah transaksi terdistribusi (misalnya menerapkan pola Saga).
61
-
62
- ### Panduan Arsitektur Inti
63
-
64
- #### 1. Desentralisasi melalui Event
65
- Jangan gunakan panggilan HTTP yang sinkron antar *microservices* untuk memutasi data. Hal ini menciptakan sistem yang saling bergantung ketat (*tightly coupled*) dan bisa menyebabkan kegagalan beruntun (*cascading failures*).
66
- - **Publisher/Subscriber**: Saat Layanan A melakukan sesuatu, ia menerbitkan sebuah event (misalnya `UserCreated`). Layanan B dan C akan mendengarkan event ini dan bereaksi secara asinkron.
67
- - Gunakan **RabbitMQ** atau **AWS SQS** untuk antrean tugas standar.
68
- - Gunakan **Apache Kafka** atau **Redpanda** untuk *streaming event* throughput tinggi yang memerlukan *replay* log.
69
-
70
- #### 2. Pola Saga (Transaksi Terdistribusi)
71
- Dalam arsitektur *microservices*, Anda tidak dapat menggunakan transaksi database ACID standar lintas database yang berbeda.
72
- - Gunakan **Saga Pattern** untuk mengoordinasikan beberapa operasi. Jika Langkah 3 dalam proses 4-langkah gagal, sistem harus menerbitkan "event kompensasi" (pembatalan) untuk membatalkan Langkah 1 dan 2 pada layanan sebelumnya.
73
-
74
- #### 3. CQRS (Command Query Responsibility Segregation)
75
- Untuk aplikasi dengan tingkat pembacaan yang sangat tinggi (seperti dasbor analitik), pisahkan operasi baca dari operasi tulis.
76
- - **Command**: Memutasi state/data (Database Tulis).
77
- - **Query**: Membaca state (Read Replica, Materialized Views, atau Elasticsearch).
78
- - Event bertugas menyinkronkan Database Tulis ke Database Baca di latar belakang.
79
-
80
- #### 4. Event Sourcing
81
- Daripada hanya menyimpan kondisi terbaru sebuah data (mis. `SaldoAkun = Rp1.000.000`), simpan *sejarah lengkap peristiwa* yang mengarah ke saldo tersebut (`Setor Rp1.500.000`, `Tarik Rp500.000`). Kondisi saat ini diturunkan (dikalkulasi) dengan memutar ulang (*replaying*) event tersebut. Pola ini wajib untuk sistem finansial dan sistem yang membutuhkan jejak audit tingkat tinggi.
5
+ ---
6
+
7
+ # Event-Driven Architecture Expert
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 provides architectural guidance for breaking down large monolithic applications into scalable, decoupled services. It focuses on Event-Driven Architecture (EDA), message brokers, and advanced patterns like Event Sourcing and CQRS (Command Query Responsibility Segregation).
21
+
22
+ ### Trigger Conditions
23
+ - Scaling a system that handles extremely high throughput or traffic spikes.
24
+ - Implementing background jobs, asynchronous workers, or heavy data processing.
25
+ - Transitioning from a monolith to microservices.
26
+ - Integrating message brokers like RabbitMQ, Apache Kafka, AWS SQS, or Redis Pub/Sub.
27
+ - Resolving distributed transaction issues (e.g., handling the Saga pattern).
28
+
29
+ ### Core Architecture Guidelines
30
+
31
+ #### 1. Decoupling via Events
32
+ Do not use synchronous HTTP calls between microservices for state mutations. It creates tightly coupled systems that fail in cascades.
33
+ - **Publisher/Subscriber**: When Service A does something, it publishes an event (e.g., `UserCreated`). Service B and Service C listen to this event and react asynchronously.
34
+ - Use **RabbitMQ** or **AWS SQS** for standard task queues (where order and exact-once delivery might be managed).
35
+ - Use **Apache Kafka** or **Redpanda** for high-throughput event streaming where logs need to be replayed.
36
+
37
+ #### 2. The Saga Pattern (Distributed Transactions)
38
+ In microservices, you cannot use simple database transactions (ACID) across different databases.
39
+ - Use the **Saga Pattern** to coordinate multiple operations. If Step 3 in a 4-step process fails, the system must publish "compensating events" to undo Steps 1 and 2 in the other services.
40
+
41
+ #### 3. CQRS (Command Query Responsibility Segregation)
42
+ For high-read applications (like social media or analytics dashboards), split the read operations from the write operations.
43
+ - **Commands**: Mutate state (write database).
44
+ - **Queries**: Read state (read replica or materialized views/Elasticsearch).
45
+ - Events synchronize the Write DB with the Read DB.
46
+
47
+ #### 4. Event Sourcing
48
+ Instead of storing just the current state of an entity (e.g., `AccountBalance = $100`), store the *history of events* that led to that state (`Deposited $150`, `Withdrew $50`). The current state is derived by replaying the events. This is mandatory for financial and highly auditable systems.
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 memberikan panduan arsitektural untuk memecah aplikasi monolit yang besar menjadi layanan yang terdesentralisasi (*decoupled*) dan dapat diskalakan. Fokus utamanya adalah pada *Event-Driven Architecture* (Arsitektur Berbasis Peristiwa), *message brokers* (pialang pesan), serta pola lanjutan seperti *Event Sourcing* dan CQRS (*Command Query Responsibility Segregation*).
60
+
61
+ ### Kondisi Pemicu
62
+ - Menskalakan sistem untuk menangani lonjakan *traffic* atau volume data yang sangat tinggi.
63
+ - Mengimplementasikan pekerjaan latar belakang (*background jobs*), *worker asinkron*, atau pemrosesan data berat.
64
+ - Bertransisi dari arsitektur monolit ke layanan mikro (*microservices*).
65
+ - Mengintegrasikan *message brokers* seperti RabbitMQ, Apache Kafka, AWS SQS, atau Redis Pub/Sub.
66
+ - Menyelesaikan masalah transaksi terdistribusi (misalnya menerapkan pola Saga).
67
+
68
+ ### Panduan Arsitektur Inti
69
+
70
+ #### 1. Desentralisasi melalui Event
71
+ Jangan gunakan panggilan HTTP yang sinkron antar *microservices* untuk memutasi data. Hal ini menciptakan sistem yang saling bergantung ketat (*tightly coupled*) dan bisa menyebabkan kegagalan beruntun (*cascading failures*).
72
+ - **Publisher/Subscriber**: Saat Layanan A melakukan sesuatu, ia menerbitkan sebuah event (misalnya `UserCreated`). Layanan B dan C akan mendengarkan event ini dan bereaksi secara asinkron.
73
+ - Gunakan **RabbitMQ** atau **AWS SQS** untuk antrean tugas standar.
74
+ - Gunakan **Apache Kafka** atau **Redpanda** untuk *streaming event* throughput tinggi yang memerlukan *replay* log.
75
+
76
+ #### 2. Pola Saga (Transaksi Terdistribusi)
77
+ Dalam arsitektur *microservices*, Anda tidak dapat menggunakan transaksi database ACID standar lintas database yang berbeda.
78
+ - Gunakan **Saga Pattern** untuk mengoordinasikan beberapa operasi. Jika Langkah 3 dalam proses 4-langkah gagal, sistem harus menerbitkan "event kompensasi" (pembatalan) untuk membatalkan Langkah 1 dan 2 pada layanan sebelumnya.
79
+
80
+ #### 3. CQRS (Command Query Responsibility Segregation)
81
+ Untuk aplikasi dengan tingkat pembacaan yang sangat tinggi (seperti dasbor analitik), pisahkan operasi baca dari operasi tulis.
82
+ - **Command**: Memutasi state/data (Database Tulis).
83
+ - **Query**: Membaca state (Read Replica, Materialized Views, atau Elasticsearch).
84
+ - Event bertugas menyinkronkan Database Tulis ke Database Baca di latar belakang.
85
+
86
+ #### 4. Event Sourcing
87
+ Daripada hanya menyimpan kondisi terbaru sebuah data (mis. `SaldoAkun = Rp1.000.000`), simpan *sejarah lengkap peristiwa* yang mengarah ke saldo tersebut (`Setor Rp1.500.000`, `Tarik Rp500.000`). Kondisi saat ini diturunkan (dikalkulasi) dengan memutar ulang (*replaying*) event tersebut. Pola ini wajib untuk sistem finansial dan sistem yang membutuhkan jejak audit tingkat tinggi.