vibes-plug 2.14.1 → 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 (151) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +7 -2
  3. package/.cursorrules +8 -2
  4. package/AGENTS.md +23 -2
  5. package/CHANGELOG.md +114 -0
  6. package/CLAUDE.md +10 -3
  7. package/README.md +216 -611
  8. package/bin/vibes.mjs +1104 -0
  9. package/package.json +11 -3
  10. package/plugin.json +4 -3
  11. package/scripts/check-anti-slop.mjs +53 -0
  12. package/scripts/install.js +3 -1
  13. package/scripts/update_skills.js +1 -1
  14. package/scripts/update_skills.mjs +86 -0
  15. package/scripts/validate-skills.mjs +111 -0
  16. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  17. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  18. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  19. package/skills/agentic-memory-architect/SKILL.md +52 -0
  20. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  21. package/skills/ai-llm-integration-expert/SKILL.md +330 -194
  22. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  23. package/skills/ai-prompt-engineering-expert/SKILL.md +204 -134
  24. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  25. package/skills/angular-expert/SKILL.md +149 -148
  26. package/skills/anti-slop/SKILL.md +134 -133
  27. package/skills/api-design-expert/SKILL.md +4 -3
  28. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  29. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  30. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  31. package/skills/astro-framework-expert/SKILL.md +201 -200
  32. package/skills/async-queue-temporal-expert/SKILL.md +218 -217
  33. package/skills/authentication-identity-expert/SKILL.md +174 -173
  34. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  35. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  36. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  37. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  38. package/skills/brainstorming/SKILL.md +392 -377
  39. package/skills/browser-automation-expert/SKILL.md +260 -222
  40. package/skills/bun-runtime-expert/SKILL.md +5 -4
  41. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  42. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  43. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  44. package/skills/coderabbit/SKILL.md +5 -4
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  46. package/skills/composable-mach-architect/SKILL.md +338 -0
  47. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  48. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  49. package/skills/data-telemetry-expert/SKILL.md +5 -4
  50. package/skills/data-visualization-expert/SKILL.md +155 -154
  51. package/skills/database-orm-expert/SKILL.md +166 -165
  52. package/skills/deep-research-analyst/SKILL.md +182 -136
  53. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  54. package/skills/design-system-architect/SKILL.md +4 -3
  55. package/skills/desktop-electron-expert/SKILL.md +129 -128
  56. package/skills/documentation-site-expert/SKILL.md +60 -59
  57. package/skills/doku-mcp-server/SKILL.md +5 -4
  58. package/skills/doku-payment-gateway/SKILL.md +250 -232
  59. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  60. package/skills/e2e-testing-expert/SKILL.md +5 -4
  61. package/skills/ecommerce-expert/SKILL.md +88 -87
  62. package/skills/email-notification-expert/SKILL.md +5 -4
  63. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  64. package/skills/error-resilience-expert/SKILL.md +14 -13
  65. package/skills/event-driven-architect/SKILL.md +5 -4
  66. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  67. package/skills/file-upload-media-expert/SKILL.md +5 -4
  68. package/skills/firebase-security-expert/SKILL.md +5 -4
  69. package/skills/form-validation-expert/SKILL.md +7 -6
  70. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  71. package/skills/fullstack-expert/SKILL.md +185 -184
  72. package/skills/gemini-agent-booster/SKILL.md +248 -172
  73. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  74. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  75. package/skills/glsl-shader-expert/SKILL.md +191 -190
  76. package/skills/go-programming-expert/SKILL.md +5 -4
  77. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -200
  78. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  79. package/skills/headless-cms-expert/SKILL.md +182 -181
  80. package/skills/hig/SKILL.md +5 -4
  81. package/skills/js-backend-expert/SKILL.md +219 -218
  82. package/skills/legacy-code-translator/SKILL.md +6 -5
  83. package/skills/llm-finops-router/SKILL.md +52 -0
  84. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  85. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  86. package/skills/mcp-server-architect/SKILL.md +315 -307
  87. package/skills/micro-frontend-architect/SKILL.md +5 -4
  88. package/skills/mobile-expo-expert/SKILL.md +5 -4
  89. package/skills/modern-css-native-expert/SKILL.md +190 -189
  90. package/skills/monorepo-architect/SKILL.md +5 -4
  91. package/skills/mpa-orchestrator/SKILL.md +41 -4
  92. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  93. package/skills/mvc-expert/SKILL.md +5 -4
  94. package/skills/n8n-automation-expert/SKILL.md +90 -89
  95. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  96. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  97. package/skills/payment-gateway-expert/SKILL.md +131 -128
  98. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  99. package/skills/performance-web-vitals/SKILL.md +5 -4
  100. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  101. package/skills/prd-architect/SKILL.md +183 -182
  102. package/skills/proactive-background-watcher/SKILL.md +5 -4
  103. package/skills/production-ready-hardener/SKILL.md +10 -9
  104. package/skills/pwa-offline-first-expert/SKILL.md +227 -226
  105. package/skills/pydantic-ai-expert/SKILL.md +162 -161
  106. package/skills/python-programming-expert/SKILL.md +5 -4
  107. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  108. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  109. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  110. package/skills/rust-programming-expert/SKILL.md +5 -4
  111. package/skills/saas-architect/SKILL.md +155 -154
  112. package/skills/saas-billing/SKILL.md +394 -382
  113. package/skills/saas-multi-tenant/SKILL.md +7 -6
  114. package/skills/scalability-clean-code/SKILL.md +5 -4
  115. package/skills/search-engine-expert/SKILL.md +90 -89
  116. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  117. package/skills/senior-frontend/SKILL.md +14 -9
  118. package/skills/seo/SKILL.md +4 -4
  119. package/skills/session-memory-manager/SKILL.md +129 -128
  120. package/skills/solidjs-expert/SKILL.md +81 -80
  121. package/skills/spa-orchestrator/SKILL.md +5 -4
  122. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  123. package/skills/state-management-expert/SKILL.md +5 -4
  124. package/skills/supabase-security-expert/SKILL.md +5 -4
  125. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  126. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  127. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -155
  128. package/skills/tailwind-expert/SKILL.md +62 -5
  129. package/skills/tanstack-query-expert/SKILL.md +5 -4
  130. package/skills/tauri-expert/SKILL.md +5 -4
  131. package/skills/typescript-expert/SKILL.md +5 -4
  132. package/skills/ui-ux-pro-max/SKILL.md +7 -6
  133. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  134. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -181
  135. package/skills/voice-ai-realtime-agent/SKILL.md +243 -242
  136. package/skills/vue-frontend-expert/SKILL.md +5 -4
  137. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  138. package/skills/web-3d-graphics-expert/SKILL.md +314 -313
  139. package/skills/web-game-engine-expert/SKILL.md +330 -329
  140. package/skills/web-scraper/SKILL.md +158 -157
  141. package/skills/website-design-cloner/SKILL.md +5 -4
  142. package/skills/webxr-ar-vr-expert/SKILL.md +163 -162
  143. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  144. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  145. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -229
  146. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  147. package/BLUEPRINT.md +0 -319
  148. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  149. package/skills/multiple-entry-points/SKILL.md +0 -91
  150. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  151. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
@@ -1,87 +1,88 @@
1
- ---
2
- name: ecommerce-expert
3
- description: "Expert guide for e-commerce architecture (Shopify Storefront, Medusa.js, Saleor), product catalogs, cart/checkout UX, and order management / Panduan ahli arsitektur e-commerce (Shopify, Medusa.js, Saleor), katalog produk, UX keranjang/checkout, dan manajemen pesanan."
4
- author: "Roedy Rustam"
5
- ---
6
-
7
- # E-Commerce 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
- - **`payment-gateway-expert`**: Stripe, Xendit, Midtrans payment integration.
18
- - **`nextjs-app-router-expert`**: SSR product pages and cart functionality.
19
- - **`seo`**: Product schema markup, sitemaps, and SEO optimization.
20
- - **`saas-billing`**: Subscription-based e-commerce models.
21
- - **`headless-cms-expert`**: Content management for product descriptions and pages.
22
-
23
- ### Description
24
- Expert guide for building modern e-commerce applications. Covers Shopify Storefront API (headless commerce), Medusa.js v2 (open-source, self-hosted), Saleor (GraphQL-first), product catalog design, cart state management, checkout flows, inventory management, order fulfillment, and SEO for product pages.
25
-
26
- ### Trigger Conditions
27
- - Building an online store or e-commerce platform.
28
- - Integrating Shopify Storefront API with custom frontend.
29
- - Setting up Medusa.js or Saleor for headless commerce.
30
- - Designing product catalog schemas and cart/checkout UX.
31
-
32
- ---
33
-
34
- ### Platform Selection
35
-
36
- | Platform | Type | API | Self-Hosted | Best For |
37
- |----------|------|-----|-------------|----------|
38
- | Shopify Storefront | SaaS + Headless | GraphQL | ❌ | Quick launch, large catalog |
39
- | Medusa.js v2 | Open-source | REST + JS SDK | ✅ | Full control, customization |
40
- | Saleor | Open-source | GraphQL | ✅ | Enterprise, multi-channel |
41
- | WooCommerce | Plugin (WordPress) | REST | ✅ | WordPress ecosystem |
42
-
43
- ### Core Patterns
44
-
45
- ```typescript
46
- // Shopify Storefront API — Fetch products
47
- const SHOPIFY_QUERY = `{
48
- products(first: 12, sortKey: BEST_SELLING) {
49
- edges {
50
- node {
51
- id title handle description
52
- priceRange { minVariantPrice { amount currencyCode } }
53
- images(first: 1) { edges { node { url altText } } }
54
- variants(first: 5) { edges { node { id title availableForSale price { amount } } } }
55
- }
56
- }
57
- }
58
- }`;
59
-
60
- async function getProducts() {
61
- const res = await fetch(process.env.SHOPIFY_STOREFRONT_URL!, {
62
- method: 'POST',
63
- headers: {
64
- 'Content-Type': 'application/json',
65
- 'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN!,
66
- },
67
- body: JSON.stringify({ query: SHOPIFY_QUERY }),
68
- });
69
- return (await res.json()).data.products.edges.map((e) => e.node);
70
- }
71
- ```
72
-
73
- ## Orchestration & Integration
74
- - `payment-gateway-expert`, `nextjs-app-router-expert`, `seo`, `saas-billing`
75
-
76
- ---
77
-
78
- <a name="bahasa-indonesia"></a>
79
- ## Bahasa Indonesia
80
-
81
- ### Deskripsi
82
- Panduan ahli untuk membangun aplikasi e-commerce modern. Mencakup Shopify Storefront API, Medusa.js v2, Saleor, desain katalog produk, manajemen keranjang, alur checkout, manajemen inventaris, dan SEO halaman produk.
83
-
84
- ### Kondisi Pemicu
85
- - Membangun toko online atau platform e-commerce.
86
- - Mengintegrasikan Shopify Storefront API dengan frontend kustom.
87
- - Menyiapkan Medusa.js atau Saleor untuk headless commerce.
1
+ ---
2
+ name: ecommerce-expert
3
+ description: "Expert guide for e-commerce architecture (Shopify Storefront, Medusa.js, Saleor), product catalogs, cart/checkout UX, and order management / Panduan ahli arsitektur e-commerce (Shopify, Medusa.js, Saleor), katalog produk, UX keranjang/checkout, dan manajemen pesanan."
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # E-Commerce Expert (2026 Edition)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Orchestration & Integration
18
+ - **`payment-gateway-expert`**: Stripe, Xendit, Midtrans payment integration.
19
+ - **`nextjs-app-router-expert`**: SSR product pages and cart functionality.
20
+ - **`seo`**: Product schema markup, sitemaps, and SEO optimization.
21
+ - **`saas-billing`**: Subscription-based e-commerce models.
22
+ - **`headless-cms-expert`**: Content management for product descriptions and pages.
23
+
24
+ ### Description
25
+ Expert guide for building modern e-commerce applications. Covers Shopify Storefront API (headless commerce), Medusa.js v2 (open-source, self-hosted), Saleor (GraphQL-first), product catalog design, cart state management, checkout flows, inventory management, order fulfillment, and SEO for product pages.
26
+
27
+ ### Trigger Conditions
28
+ - Building an online store or e-commerce platform.
29
+ - Integrating Shopify Storefront API with custom frontend.
30
+ - Setting up Medusa.js or Saleor for headless commerce.
31
+ - Designing product catalog schemas and cart/checkout UX.
32
+
33
+ ---
34
+
35
+ ### Platform Selection
36
+
37
+ | Platform | Type | API | Self-Hosted | Best For |
38
+ |----------|------|-----|-------------|----------|
39
+ | Shopify Storefront | SaaS + Headless | GraphQL | ❌ | Quick launch, large catalog |
40
+ | Medusa.js v2 | Open-source | REST + JS SDK | ✅ | Full control, customization |
41
+ | Saleor | Open-source | GraphQL | ✅ | Enterprise, multi-channel |
42
+ | WooCommerce | Plugin (WordPress) | REST | ✅ | WordPress ecosystem |
43
+
44
+ ### Core Patterns
45
+
46
+ ```typescript
47
+ // Shopify Storefront API — Fetch products
48
+ const SHOPIFY_QUERY = `{
49
+ products(first: 12, sortKey: BEST_SELLING) {
50
+ edges {
51
+ node {
52
+ id title handle description
53
+ priceRange { minVariantPrice { amount currencyCode } }
54
+ images(first: 1) { edges { node { url altText } } }
55
+ variants(first: 5) { edges { node { id title availableForSale price { amount } } } }
56
+ }
57
+ }
58
+ }
59
+ }`;
60
+
61
+ async function getProducts() {
62
+ const res = await fetch(process.env.SHOPIFY_STOREFRONT_URL!, {
63
+ method: 'POST',
64
+ headers: {
65
+ 'Content-Type': 'application/json',
66
+ 'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN!,
67
+ },
68
+ body: JSON.stringify({ query: SHOPIFY_QUERY }),
69
+ });
70
+ return (await res.json()).data.products.edges.map((e) => e.node);
71
+ }
72
+ ```
73
+
74
+ ## Orchestration & Integration
75
+ - `payment-gateway-expert`, `nextjs-app-router-expert`, `seo`, `saas-billing`
76
+
77
+ ---
78
+
79
+ <a name="bahasa-indonesia"></a>
80
+ ## Bahasa Indonesia
81
+
82
+ ### Deskripsi
83
+ Panduan ahli untuk membangun aplikasi e-commerce modern. Mencakup Shopify Storefront API, Medusa.js v2, Saleor, desain katalog produk, manajemen keranjang, alur checkout, manajemen inventaris, dan SEO halaman produk.
84
+
85
+ ### Kondisi Pemicu
86
+ - Membangun toko online atau platform e-commerce.
87
+ - Mengintegrasikan Shopify Storefront API dengan frontend kustom.
88
+ - Menyiapkan Medusa.js atau Saleor untuk headless commerce.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: email-notification-expert
3
3
  description: "Expert guide for transactional email (Resend, Postmark, SES), React Email templates, in-app notifications, and unified communication pipelines / Panduan ahli untuk email transaksional (Resend, Postmark, SES), template React Email, notifikasi in-app, dan pipeline komunikasi terpadu."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Email & Notification Expert (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  Production-grade guide for building reliable email delivery systems and unified notification pipelines. Covers **Resend**, **Postmark**, **AWS SES**, **React Email** / **MJML** template engines, **email deliverability** (SPF, DKIM, DMARC), **in-app notification systems** (bell icon, toast, notification center), **webhook-triggered email flows**, **email queuing** with BullMQ/Inngest, and **CAN-SPAM/GDPR** compliance.
@@ -346,7 +347,7 @@ export async function registerForPushNotificationsAsync() {
346
347
  ## Bahasa Indonesia
347
348
 
348
349
  ### Integrasi Orkestrasi
349
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
350
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
350
351
 
351
352
  ### Deskripsi
352
353
  Panduan tingkat produksi untuk membangun sistem pengiriman email yang andal dan pipeline notifikasi terpadu. Mencakup **Resend**, **Postmark**, **AWS SES**, mesin template **React Email** / **MJML**, **deliverabilitas email** (SPF, DKIM, DMARC), **sistem notifikasi in-app** (bell icon, toast, pusat notifikasi), **alur email berbasis webhook**, **antrean email** dengan BullMQ/Inngest, dan kepatuhan **CAN-SPAM/GDPR**.
@@ -392,4 +393,4 @@ Aktifkan skill ini ketika:
392
393
  - `saas-architect` — Email undangan tim, notifikasi workspace
393
394
  - `authentication-identity-expert` — Email reset password, verifikasi email, kode MFA
394
395
  - `async-queue-temporal-expert` — Worker antrean pengiriman email & push dengan BullMQ/Inngest
395
- - `production-ready-hardener` — Audit deliverabilitas email sebelum peluncuran
396
+ - `production-ready-hardener` — Audit deliverabilitas email sebelum peluncuran
@@ -0,0 +1,88 @@
1
+ ---
2
+ name: ephemeral-generative-ui-architect
3
+ description: "Expert guide for Generative UI architectures, ephemeral dynamic interfaces, and real-time streaming of React Server Components (RSC) driven by Gemini 4 Pro / Panduan ahli arsitektur Generative UI, antarmuka dinamis efemeral, dan streaming RSC real-time yang didorong oleh Gemini 4 Pro."
4
+ author: "vibes-plug-swarm"
5
+ version: "3.8.0"
6
+ ---
7
+
8
+ # Ephemeral Generative UI Architect (2026 Edition)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Orchestration & Integration
18
+ Connects and orchestrates with ercel-ai-sdk-expert, senior-frontend, gemini-agent-booster, and multi-agent-orchestration.
19
+
20
+ ### Description
21
+ Standard UIs are static and pre-compiled. In the Gemini 4 Pro era, interfaces are **ephemeral**: generated in real-time based on the user's immediate intent, and destroyed when no longer needed. This skill orchestrates Generative UI systems using React Server Components (RSC), Tool-Driven UI injection, and Vercel AI SDK, allowing LLMs to directly stream fully functional, interactive components (charts, forms, dashboards) instead of markdown text.
22
+
23
+ ### Trigger Conditions
24
+ - The user requests an interface that adapts entirely to the data context (e.g., "Show me a dashboard of my spending" -> AI generates a custom chart component on the fly).
25
+ - Designing AI-native chat interfaces that render interactive widgets (booking forms, map components) instead of plain text responses.
26
+ - Integrating Vercel AI SDK streamUI or tool-call-to-component mappings.
27
+
28
+ ### Core Architecture (2026 Standard)
29
+ 1. **Tool-to-UI Mapping**: The AI decides to call a tool (e.g., getWeather). The server intercepts this tool call and streams a <WeatherWidget /> React Server Component directly to the client.
30
+ 2. **Zero-Client-State (Ephemeral)**: The UI state exists only within the LLM conversation history. If the chat resets, the UI resets.
31
+ 3. **Optimistic Rendering**: The client immediately renders a loading skeleton (e.g., <WeatherSkeleton />) the millisecond the LLM begins emitting the tool call token, replaced by the final RSC once execution completes.
32
+
33
+ ### Implementation Recipe (Vercel AI SDK + React 19)
34
+ ` sx
35
+ import { streamUI } from 'ai/rsc';
36
+ import { google } from '@ai-sdk/google';
37
+ import { z } from 'zod';
38
+ import { FlightTracker } from '@/components/flight-tracker';
39
+ import { Skeleton } from '@/components/skeleton';
40
+
41
+ export async function submitMessage(userInput: string) {
42
+ 'use server';
43
+
44
+ const result = await streamUI({
45
+ model: google('gemini-4-pro'),
46
+ prompt: userInput,
47
+ text: ({ content, done }) => {
48
+ return <div>{content}</div>;
49
+ },
50
+ tools: {
51
+ trackFlight: {
52
+ description: 'Track a flight status in real-time',
53
+ parameters: z.object({ flightNumber: z.string() }),
54
+ generate: async function* ({ flightNumber }) {
55
+ yield <Skeleton className="h-40 w-full" />; // Optimistic UI
56
+ const data = await fetchFlightData(flightNumber); // Server-side execution
57
+ return <FlightTracker data={data} />; // Final RSC streamed to client
58
+ },
59
+ },
60
+ },
61
+ });
62
+
63
+ return result.value;
64
+ }
65
+ `
66
+
67
+ ---
68
+
69
+ <a name="bahasa-indonesia"></a>
70
+ ## Bahasa Indonesia
71
+
72
+ ### Integrasi Orkestrasi
73
+ Terhubung dan mengorkestrasi bersama ercel-ai-sdk-expert, senior-frontend, gemini-agent-booster, dan multi-agent-orchestration.
74
+
75
+ ### Deskripsi
76
+ UI standar bersifat statis dan di-compile sebelumnya. Di era Gemini 4 Pro, antarmuka bersifat **efemeral**: dihasilkan secara real-time berdasarkan niat langsung pengguna, dan dihancurkan saat tidak lagi dibutuhkan. Skill ini mengatur sistem Generative UI menggunakan React Server Components (RSC), injeksi UI berbasis Tool, dan Vercel AI SDK, memungkinkan LLM untuk langsung men-streaming komponen fungsional interaktif (grafik, formulir, dashboard) sebagai pengganti teks biasa.
77
+
78
+ ### Kondisi Pemicu
79
+ - Pengguna meminta antarmuka yang beradaptasi sepenuhnya dengan konteks data (misal: "Tampilkan dashboard pengeluaran saya" -> AI menghasilkan komponen grafik kustom secara instan).
80
+ - Mendesain antarmuka percakapan AI-native yang merender widget interaktif (formulir pemesanan, peta) alih-alih teks biasa.
81
+ - Mengintegrasikan Vercel AI SDK streamUI atau pemetaan panggilan alat (*tool-call*) ke komponen React.
82
+
83
+ ### Arsitektur Inti (Standar 2026)
84
+ 1. **Pemetaan Tool-ke-UI**: AI memutuskan untuk memanggil alat (misal: getWeather). Server mencegat panggilan alat ini dan men-streaming komponen React Server (<WeatherWidget />) langsung ke klien.
85
+ 2. **Zero-Client-State (Efemeral)**: State UI hanya ada di dalam riwayat percakapan LLM. Jika obrolan di-reset, UI ikut ter-reset.
86
+ 3. **Render Optimistis**: Klien langsung merender kerangka pemuatan (misal: <WeatherSkeleton />) pada milidetik pertama LLM mulai mengeluarkan token pemanggilan alat, yang kemudian diganti dengan RSC final setelah eksekusi selesai.
87
+
88
+
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: error-resilience-expert
3
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"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Error & Resilience Expert (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  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.
@@ -451,7 +452,7 @@ worker.on('failed', async (job, err) => {
451
452
  ## Bahasa Indonesia
452
453
 
453
454
  ### Integrasi Orkestrasi
454
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
455
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
455
456
 
456
457
  ### Deskripsi
457
458
  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**.
@@ -478,15 +479,15 @@ Aktifkan skill ini ketika:
478
479
  | **Isolasi Kegagalan** | Komponen yang gagal tidak boleh menghancurkan seluruh halaman |
479
480
  | **Lacak Semuanya** | Setiap error yang tidak tertangani harus sampai ke sistem monitoring |
480
481
 
481
- ### Protokol Chaos Engineering & Injeksi Kegagalan Otomatis
482
- 1. **Injeksi Kekacauan (Chaos Injection)**: Uji ketahanan dengan sengaja memutuskan koneksi database, menyuntikkan latensi jaringan (Toxiproxy), atau membuang paket request ke API eksternal.
483
- 2. **Observasi Kegagalan**: Periksa apakah UI macet, layar menjadi putih kosong, atau connection pool bocor saat dependensi bermasalah.
484
- 3. **Hardening Ketahanan Otomatis**:
485
- - Terapkan Circuit Breaker pada panggilan API eksternal yang rentan.
486
- - Tambahkan retry dengan exponential backoff dan random jitter.
487
- - Terapkan degradasi anggun (*graceful degradation*): sajikan data cache atau UI fallback alternatif.
488
- 4. **Verifikasi Ketahanan**: Ulangi simulasi gangguan hingga sistem bertahan tanpa crash fatal dan seluruh error tercatat di Sentry.
489
-
482
+ ### Protokol Chaos Engineering & Injeksi Kegagalan Otomatis
483
+ 1. **Injeksi Kekacauan (Chaos Injection)**: Uji ketahanan dengan sengaja memutuskan koneksi database, menyuntikkan latensi jaringan (Toxiproxy), atau membuang paket request ke API eksternal.
484
+ 2. **Observasi Kegagalan**: Periksa apakah UI macet, layar menjadi putih kosong, atau connection pool bocor saat dependensi bermasalah.
485
+ 3. **Hardening Ketahanan Otomatis**:
486
+ - Terapkan Circuit Breaker pada panggilan API eksternal yang rentan.
487
+ - Tambahkan retry dengan exponential backoff dan random jitter.
488
+ - Terapkan degradasi anggun (*graceful degradation*): sajikan data cache atau UI fallback alternatif.
489
+ 4. **Verifikasi Ketahanan**: Ulangi simulasi gangguan hingga sistem bertahan tanpa crash fatal dan seluruh error tercatat di Sentry.
490
+
490
491
  ### Kesalahan Umum yang Harus Dihindari
491
492
 
492
493
  | Anti-Pola | Masalah | Pendekatan yang Benar |
@@ -504,4 +505,4 @@ Aktifkan skill ini ketika:
504
505
  - `logging-error-tracking-expert` — Integrasi Sentry/BugSnag dan logging error terstruktur
505
506
  - `async-queue-temporal-expert` — Dead letter queue dan strategi retry untuk background job
506
507
  - `production-ready-hardener` — Checklist audit penanganan error sebelum peluncuran
507
- - `api-design-expert` — Spesifikasi respons error RFC 9457
508
+ - `api-design-expert` — Spesifikasi respons error RFC 9457
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: event-driven-architect
3
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
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Event-Driven Architecture Expert
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  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).
@@ -53,7 +54,7 @@ Instead of storing just the current state of an entity (e.g., `AccountBalance =
53
54
  ## Bahasa Indonesia
54
55
 
55
56
  ### 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
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
57
58
 
58
59
  ### Deskripsi
59
60
  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*).
@@ -84,4 +85,4 @@ Untuk aplikasi dengan tingkat pembacaan yang sangat tinggi (seperti dasbor anali
84
85
  - Event bertugas menyinkronkan Database Tulis ke Database Baca di latar belakang.
85
86
 
86
87
  #### 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.
88
+ 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.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: feature-flag-analytics-expert
3
3
  description: "Expert guide for Feature Flags & Progressive Rollout (PostHog, LaunchDarkly, GrowthBook), A/B testing orchestration, and canary releases / Panduan ahli Feature Flags, A/B testing, dan rilis bertahap."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Feature Flag & Progressive Rollout Expert
@@ -63,4 +64,4 @@ Panduan tingkat produksi untuk manajemen feature flags, rilis fitur bertahap (pr
63
64
  - [ ] Bersihkan flag yang kedaluwarsa dari basis kode setelah fitur 100% dirilis.
64
65
 
65
66
  ## Integrasi Orkestrasi
66
- - Terintegrasi dengan: `data-telemetry-expert`, `e2e-testing-expert`, `ci-cd-devops-architect`.
67
+ - Terintegrasi dengan: `data-telemetry-expert`, `e2e-testing-expert`, `ci-cd-devops-architect`.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: file-upload-media-expert
3
3
  description: "Expert guide for file uploads (S3, R2, Supabase Storage), presigned URLs, image/video processing, CDN optimization, and media pipeline architecture / Panduan ahli untuk upload file (S3, R2, Supabase Storage), presigned URL, pemrosesan gambar/video, optimasi CDN, dan arsitektur pipeline media."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # File Upload & Media Expert (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  Production-grade guide for building secure, performant file upload systems and media processing pipelines. Covers **presigned URL upload patterns** (S3, R2, Supabase Storage), **multipart uploads** with progress tracking, **image optimization** (Sharp, Cloudflare Images, Vercel OG), **video transcoding** (Mux, Cloudflare Stream), **PDF generation**, **file validation & virus scanning**, **CDN configuration**, and **drag-and-drop UI components**.
@@ -392,7 +393,7 @@ export async function validateFile(buffer: Buffer, declaredMimeType: string): Pr
392
393
  ## Bahasa Indonesia
393
394
 
394
395
  ### Integrasi Orkestrasi
395
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
396
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
396
397
 
397
398
  ### Deskripsi
398
399
  Panduan tingkat produksi untuk membangun sistem upload file yang aman dan performa tinggi serta pipeline pemrosesan media. Mencakup **pola upload presigned URL** (S3, R2, Supabase Storage), **upload multipart** dengan pelacakan progres, **optimasi gambar** (Sharp, Cloudflare Images, Vercel OG), **transcoding video** (Mux, Cloudflare Stream), **pembuatan PDF**, **validasi file & pemindaian virus**, **konfigurasi CDN**, dan **komponen UI drag-and-drop**.
@@ -434,4 +435,4 @@ Aktifkan skill ini ketika:
434
435
  - `performance-web-vitals` — Strategi loading gambar (lazy loading, srcset, blur placeholder)
435
436
  - `database-orm-expert` — Menyimpan metadata file dan referensi
436
437
  - `production-ready-hardener` — Audit keamanan upload file
437
- - `error-resilience-expert` — Logika retry upload dan pemulihan kegagalan
438
+ - `error-resilience-expert` — Logika retry upload dan pemulihan kegagalan
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: firebase-security-expert
3
3
  description: "Firebase security expert to audit Security Rules (Firestore/Realtime Database/Storage), authentication, API keys, data leakage prevention, and App Check configuration / Ahli keamanan Firebase untuk audit Security Rules (Firestore/Realtime Database/Storage), autentikasi, API keys, pencegahan kebocoran data, dan konfigurasi App Check."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Firebase Security Expert
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  You are a highly experienced Security Expert in the Firebase (Google Cloud Platform) ecosystem. Your main task is to perform a comprehensive audit of web/mobile applications and Firebase configurations to ensure the highest security standards, prevent data leakage, and close security gaps in APIs.
@@ -110,7 +111,7 @@ Active automatically whenever the user asks to:
110
111
  ## Bahasa Indonesia
111
112
 
112
113
  ### Integrasi Orkestrasi
113
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
114
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
114
115
 
115
116
  ### Deskripsi
116
117
  Anda adalah seorang ahli keamanan (Security Expert) yang sangat berpengalaman dalam ekosistem Firebase (Google Cloud Platform). Tugas utama Anda adalah melakukan audit menyeluruh terhadap aplikasi web/mobile dan konfigurasi Firebase untuk memastikan standar keamanan tertinggi, mencegah kebocoran data, dan menutup celah keamanan pada API.
@@ -198,4 +199,4 @@ Aktif secara otomatis setiap kali pengguna meminta untuk:
198
199
  2. Menghubungkan aplikasi frontend dengan Firebase (Firestore, Auth, Storage, Cloud Functions).
199
200
  3. Mengkonfigurasi autentikasi Firebase atau mengelola JWT custom claims.
200
201
  4. Menulis Cloud Functions for Firebase yang membutuhkan autentikasi dan validasi data.
201
- 5. Membahas arsitektur keamanan, API keys, atau Service Account Firebase.
202
+ 5. Membahas arsitektur keamanan, API keys, atau Service Account Firebase.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: form-validation-expert
3
3
  description: "Expert guide for complex form handling with React Hook Form, server-side validation (useActionState + Zod), multi-step wizards, and accessible form patterns / Panduan ahli penanganan formulir kompleks dengan React Hook Form, validasi server-side, wizard multi-langkah, dan pola formulir aksesibel."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Form & Validation Expert (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
14
15
  ## English
15
16
 
16
17
  ### 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
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
18
19
 
19
20
  ### Description
20
21
  Production-grade guide for building robust, accessible, and user-friendly forms. Covers **React Hook Form v7+** with Zod/Valibot resolvers, **server-side validation** with `useActionState` + Zod, **multi-step form wizards**, **dynamic forms** from JSON Schema, **autofill-friendly patterns**, **optimistic form submission** with `useOptimistic`, **Conform** (progressive enhancement), and **form accessibility** (ARIA, error announcements).
@@ -374,7 +375,7 @@ export function MultiStepForm() {
374
375
 
375
376
  - `senior-frontend` — React 19 form patterns, useActionState, useOptimistic
376
377
  - `global-a11y-i18n-expert` — WCAG 2.2 form accessibility requirements
377
- - `ui-components-expert` — Input control primitives, form field components
378
+ - `design-system-architect, senior-frontend` — Input control primitives, form field components
378
379
  - `authentication-identity-expert` — Login/signup form patterns
379
380
  - `error-resilience-expert` — Form submission error handling and retry
380
381
  - `tailwind-expert` — Form styling with Tailwind CSS v4
@@ -385,7 +386,7 @@ export function MultiStepForm() {
385
386
  ## Bahasa Indonesia
386
387
 
387
388
  ### Integrasi Orkestrasi
388
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
389
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
389
390
 
390
391
  ### Deskripsi
391
392
  Panduan tingkat produksi untuk membangun formulir yang kuat, aksesibel, dan ramah pengguna. Mencakup **React Hook Form v7+** dengan Zod/Valibot resolver, **validasi server-side** dengan `useActionState` + Zod, **wizard formulir multi-langkah**, **formulir dinamis** dari JSON Schema, **pola autofill-friendly**, **optimistic form submission**, **Conform** (progressive enhancement), dan **aksesibilitas formulir** (ARIA, pengumuman error).
@@ -402,6 +403,6 @@ Aktifkan skill ini ketika:
402
403
 
403
404
  - `senior-frontend` — Pola formulir React 19, useActionState, useOptimistic
404
405
  - `global-a11y-i18n-expert` — Persyaratan aksesibilitas formulir WCAG 2.2
405
- - `ui-components-expert` — Primitif kontrol input, komponen field formulir
406
+ - `design-system-architect, senior-frontend` — Primitif kontrol input, komponen field formulir
406
407
  - `authentication-identity-expert` — Pola formulir login/signup
407
- - `error-resilience-expert` — Penanganan error submission formulir dan retry
408
+ - `error-resilience-expert` — Penanganan error submission formulir dan retry