vibes-plug 1.0.0

package/skills/design-system-architect/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: design-system-architect
+description: "Expert guide for designing, building, and maintaining scalable UI design systems with design tokens, headless primitives (Radix/Base UI), Tailwind v4 @theme, and WCAG 2.2 accessibility in English and Indonesian."
+author: "Roedy Rustam"
+---
+
+# Design System Architect (2026 Edition — shadcn/ui Registry)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for building and maintaining scalable UI design systems. Covers design tokens with OKLCH and Tailwind v4 `@theme`, headless component primitives (Radix UI, **Base UI 1.x**), **shadcn/ui registry** for distributable component libraries, CVA for type-safe variants, and WCAG 2.2 accessibility compliance.
+
+### Trigger Conditions
+- Building a shared UI component library from scratch.
+- Setting up design tokens (colors, typography, spacing) with Tailwind v4.
+- Using headless primitives (Radix UI, Base UI 1.x) with custom styling.
+- Distributing components via the **shadcn/ui registry** format.
+- Auditing a component library for WCAG 2.2 accessibility compliance.
+
+### Design Token Foundation (Tailwind v4 + OKLCH)
+
+```css
+/* packages/ui/src/tokens.css */
+@import "tailwindcss";
+
+@theme {
+  /* --- Color System (OKLCH for wide-gamut P3 displays) --- */
+  /* Brand */
+  --color-brand-50:  oklch(97% 0.015 250);
+  --color-brand-100: oklch(93% 0.04  250);
+  --color-brand-500: oklch(55% 0.22  250);
+  --color-brand-700: oklch(40% 0.18  250);
+  --color-brand-900: oklch(20% 0.10  250);
+
+  /* Semantic (maps to brand in light/dark automatically) */
+  --color-primary:     var(--color-brand-500);
+  --color-primary-fg:  oklch(100% 0 0);        /* White */
+  --color-surface:     oklch(100% 0 0);        /* White */
+  --color-surface-2:   oklch(97% 0.005 250);
+  --color-border:      oklch(90% 0.01  250);
+  --color-text:        oklch(15% 0.02  250);
+  --color-text-muted:  oklch(50% 0.015 250);
+  --color-destructive: oklch(55% 0.22  25);    /* Red */
+
+  /* --- Typography --- */
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --font-size-xs:   0.75rem;
+  --font-size-sm:   0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg:   1.125rem;
+  --font-size-xl:   1.25rem;
+  --font-size-2xl:  1.5rem;
+  --font-size-3xl:  1.875rem;
+  --font-size-4xl:  2.25rem;
+
+  /* --- Spacing & Radius --- */
+  --radius-sm:  0.25rem;
+  --radius-md:  0.5rem;
+  --radius-lg:  0.75rem;
+  --radius-xl:  1rem;
+  --radius-full: 9999px;
+
+  /* --- Animation --- */
+  --animate-fade-in:   fade-in   0.2s ease-out;
+  --animate-slide-up:  slide-up  0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-scale-in:  scale-in  0.2s ease-out;
+}
+
+/* Dark mode tokens */
+@variant dark {
+  :root {
+    --color-surface:    oklch(10% 0.015 250);
+    --color-surface-2:  oklch(15% 0.015 250);
+    --color-border:     oklch(25% 0.02  250);
+    --color-text:       oklch(95% 0.005 250);
+    --color-text-muted: oklch(60% 0.01  250);
+  }
+}
+```
+
+### Component Architecture
+
+#### Headless + Styled Pattern (Base UI 1.x / Radix UI)
+Use headless primitives for accessibility, apply styles via Tailwind + CVA:
+
+```typescript
+// packages/ui/src/button.tsx
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  // Base styles
+  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none',
+  {
+    variants: {
+      variant: {
+        default:     'bg-primary text-primary-fg shadow-sm hover:brightness-110 active:brightness-90',
+        secondary:   'bg-surface-2 text-text border border-border hover:bg-surface hover:border-brand-300',
+        destructive: 'bg-destructive text-white hover:brightness-110',
+        ghost:       'hover:bg-surface-2 text-text',
+        link:        'text-primary underline-offset-4 hover:underline p-0 h-auto',
+      },
+      size: {
+        sm:   'h-8  px-3 text-xs',
+        md:   'h-9  px-4 text-sm',
+        lg:   'h-11 px-6 text-base',
+        icon: 'h-9  w-9',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+```
+
+### shadcn/ui Registry — Distributable Components (2026)
+
+shadcn/ui v2 introduces a **registry** system — distribute your components as a shareable library that others can `npx shadcn add` into their projects:
+
+```json
+// registry.json — defines your component library
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "my-ui",
+  "homepage": "https://ui.myapp.com",
+  "items": [
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "title": "Button",
+      "description": "Multi-variant button component with CVA",
+      "files": [
+        { "path": "registry/ui/button.tsx", "type": "registry:ui" }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": { "primary": "hsl(var(--primary))" }
+            }
+          }
+        }
+      }
+    }
+  ]
+}
+```
+
+```bash
+# Users install your components directly
+npx shadcn add https://ui.myapp.com/registry.json button
+npx shadcn add https://ui.myapp.com/registry.json card dialog
+```
+
+### Base UI 1.x — Unstyled Accessibility Primitives
+Base UI (from MUI team) is the 2026 alternative to Radix UI with React 19 native support:
+```typescript
+import { Dialog, Button, Select } from '@base-ui-components/react';
+
+// Fully unstyled — apply any className/Tailwind styles
+<Dialog.Root>
+  <Dialog.Trigger render={<Button />}>Open Dialog</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Backdrop className="fixed inset-0 bg-black/50 animate-fade-in" />
+    <Dialog.Popup className="fixed inset-0 m-auto h-fit max-w-md rounded-xl bg-surface p-6 shadow-xl animate-slide-up">
+      <Dialog.Title className="text-lg font-semibold">Title</Dialog.Title>
+      <Dialog.Close className="absolute right-4 top-4">✕</Dialog.Close>
+    </Dialog.Popup>
+  </Dialog.Portal>
+</Dialog.Root>
+```
+
+### WCAG 2.2 Accessibility Checklist
+- [ ] All interactive elements have visible focus indicators (`ring-2`).
+- [ ] Color contrast ≥ 4.5:1 (text), ≥ 3:1 (large text / UI components).
+- [ ] All images have `alt` text; decorative images have `alt=""`.
+- [ ] All form inputs have associated `<label>` elements.
+- [ ] Keyboard navigation works for all interactions (Tab, Enter, Space, Escape, Arrow keys).
+- [ ] `aria-label` or `aria-labelledby` on icon buttons.
+- [ ] Modals trap focus and restore it on close.
+- [ ] No content relies on color alone to convey information.
+- [ ] Touch targets ≥ 24×24px (WCAG 2.2 new requirement).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun dan memelihara design system UI yang skalabel. Mencakup design token dengan OKLCH dan `@theme` Tailwind v4, primitif komponen headless (Radix UI, **Base UI 1.x**), **registry shadcn/ui** untuk distribusi library komponen, CVA untuk varian type-safe, dan kepatuhan aksesibilitas WCAG 2.2.
+
+### Kondisi Pemicu
+- Membangun library komponen UI bersama dari awal.
+- Menyiapkan design token (warna, tipografi, spacing) dengan Tailwind v4.
+- Menggunakan primitif headless (Radix UI, Base UI 1.x) dengan styling kustom.
+- Mendistribusikan komponen via format **registry shadcn/ui**.
+- Mengaudit library komponen untuk kepatuhan aksesibilitas WCAG 2.2.
+
+### Fondasi Design Token (Tailwind v4 + OKLCH)
+Definisikan semua token di CSS menggunakan direktif `@theme`. Gunakan warna OKLCH untuk tampilan P3 wide-gamut. Definisikan token semantik (`--color-primary`, `--color-surface`, `--color-border`) yang secara otomatis beradaptasi antara mode terang/gelap melalui `@variant dark`.
+
+### Arsitektur Komponen
+Gunakan pola Headless + Styled: primitif headless (Base UI/Radix) untuk aksesibilitas, gaya melalui Tailwind + CVA (class-variance-authority) untuk varian type-safe.
+
+### Registry shadcn/ui — Komponen yang Dapat Didistribusikan (2026)
+shadcn/ui v2 memperkenalkan sistem registry — distribusikan komponen Anda sebagai library yang dapat dibagikan sehingga orang lain dapat menginstalnya dengan `npx shadcn add [url] [komponen]`.
+
+### Base UI 1.x — Primitif Aksesibilitas Tanpa Gaya
+Base UI (dari tim MUI) adalah alternatif Radix UI untuk 2026 dengan dukungan native React 19. Sepenuhnya tanpa gaya — terapkan className/Tailwind apapun.
+
+### Checklist Aksesibilitas WCAG 2.2
+- Semua elemen interaktif memiliki indikator fokus yang terlihat.
+- Kontras warna ≥ 4.5:1 (teks), ≥ 3:1 (komponen UI).
+- Semua input form memiliki elemen `<label>` terkait.
+- Navigasi keyboard berfungsi untuk semua interaksi.
+- Modal menjebak fokus dan memulihkannya saat ditutup.
+- Target sentuh ≥ 24×24px (persyaratan baru WCAG 2.2).

package/skills/e2e-testing-expert/SKILL.md

@@ -0,0 +1,315 @@
+---
+name: e2e-testing-expert
+description: "Expert guide for End-to-End (E2E) testing with Playwright, unit/integration testing with Vitest, and CI/CD automated testing pipeline setup / Panduan ahli pengujian End-to-End (E2E) dengan Playwright, pengujian unit/integrasi dengan Vitest, dan otomatisasi CI/CD."
+author: "Roedy Rustam"
+---
+
+# E2E Testing Expert (Playwright 1.49+ / Vitest 3 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for building comprehensive automated test suites using **Playwright 1.49+** (E2E + component testing), **Vitest 3** (unit/integration), and robust CI/CD pipelines. Covers modern testing patterns for Next.js 15, React 19, and API backends.
+
+### Trigger Conditions
+- Writing E2E tests for web applications with Playwright.
+- Writing unit or integration tests with Vitest.
+- Setting up a full automated testing pipeline in GitHub Actions / GitLab CI.
+- Testing React components in isolation with Playwright Component Testing.
+- Mocking external services (APIs, databases) in tests.
+- Setting up visual regression tests.
+
+### Playwright 1.49+ — Key Updates
+
+#### New in 2026
+- **`aria-snapshot`**: Assert the accessibility tree as a snapshot — more semantic than DOM snapshots.
+- **`page.addLocatorHandler()`**: Handle dynamic UI (modals, cookie banners) automatically.
+- **WebSocket testing**: Built-in `page.expectWebSocketEvent()`.
+- **Playwright MCP Server**: Expose a Playwright browser to AI agents via MCP tools.
+
+#### Project Configuration
+```typescript
+// playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 4 : undefined,
+  reporter: [
+    ['html', { open: 'never' }],
+    ['junit', { outputFile: 'results.xml' }],
+  ],
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+  },
+  projects: [
+    // Setup: seed test DB
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      dependencies: ['setup'],
+    },
+    {
+      name: 'mobile-chrome',
+      use: { ...devices['Pixel 7'] },
+      dependencies: ['setup'],
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```
+
+#### Page Object Model (POM)
+```typescript
+// tests/e2e/pages/LoginPage.ts
+import { type Page, type Locator, expect } from '@playwright/test';
+
+export class LoginPage {
+  readonly page: Page;
+  readonly emailInput: Locator;
+  readonly passwordInput: Locator;
+  readonly submitButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.emailInput = page.getByLabel('Email');
+    this.passwordInput = page.getByLabel('Password');
+    this.submitButton = page.getByRole('button', { name: 'Sign in' });
+  }
+
+  async goto() {
+    await this.page.goto('/login');
+  }
+
+  async login(email: string, password: string) {
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+    await this.page.waitForURL('/dashboard');
+  }
+}
+```
+
+#### API Mocking with `page.route()`
+```typescript
+test('shows error when API fails', async ({ page }) => {
+  // Intercept and mock API response
+  await page.route('**/api/users', (route) => {
+    route.fulfill({
+      status: 500,
+      body: JSON.stringify({ error: 'Internal server error' }),
+      contentType: 'application/json',
+    });
+  });
+
+  await page.goto('/users');
+  await expect(page.getByRole('alert')).toContainText('Something went wrong');
+});
+```
+
+#### Accessibility Assertions (aria-snapshot)
+```typescript
+test('navigation is accessible', async ({ page }) => {
+  await page.goto('/');
+  
+  // Assert accessibility tree structure
+  await expect(page.locator('nav')).toMatchAriaSnapshot(`
+    - navigation:
+      - link "Home"
+      - link "Products"
+      - link "Pricing"
+      - link "Sign in"
+  `);
+});
+```
+
+#### Auth State Reuse (storageState)
+```typescript
+// tests/e2e/auth.setup.ts
+import { test as setup } from '@playwright/test';
+
+setup('authenticate', async ({ page }) => {
+  await page.goto('/login');
+  await page.getByLabel('Email').fill('test@example.com');
+  await page.getByLabel('Password').fill('password');
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await page.waitForURL('/dashboard');
+  
+  // Save session state for reuse in all tests
+  await page.context().storageState({ path: 'playwright/.auth/user.json' });
+});
+
+// tests/e2e/dashboard.spec.ts
+import { test } from '@playwright/test';
+
+test.use({ storageState: 'playwright/.auth/user.json' });
+
+test('dashboard loads correctly', async ({ page }) => {
+  await page.goto('/dashboard');
+  // Already authenticated — no login needed
+});
+```
+
+### Vitest 3 — Unit & Integration Testing
+
+#### Configuration
+```typescript
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov', 'html'],
+      thresholds: { lines: 80, functions: 80 },
+    },
+  },
+});
+```
+
+#### React Component Testing
+```typescript
+import { render, screen, userEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Counter } from './Counter';
+
+describe('Counter', () => {
+  it('increments count on button click', async () => {
+    const user = userEvent.setup();
+    render(<Counter initialCount={0} />);
+
+    await user.click(screen.getByRole('button', { name: 'Increment' }));
+
+    expect(screen.getByText('Count: 1')).toBeInTheDocument();
+  });
+
+  it('calls onMaxReached when limit hit', async () => {
+    const onMaxReached = vi.fn();
+    const user = userEvent.setup();
+    render(<Counter initialCount={9} max={10} onMaxReached={onMaxReached} />);
+
+    await user.click(screen.getByRole('button', { name: 'Increment' }));
+
+    expect(onMaxReached).toHaveBeenCalledOnce();
+  });
+});
+```
+
+#### Server Action / API Route Testing
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+import { testClient } from 'hono/testing';
+import { app } from '../src/server';
+import { resetTestDb } from './helpers/db';
+
+describe('POST /api/users', () => {
+  beforeEach(resetTestDb);
+
+  it('creates a new user', async () => {
+    const client = testClient(app);
+    const res = await client.api.users.$post({
+      json: { name: 'Alice', email: 'alice@example.com' },
+    });
+
+    expect(res.status).toBe(201);
+    const data = await res.json();
+    expect(data.email).toBe('alice@example.com');
+  });
+});
+```
+
+### GitHub Actions CI Pipeline
+```yaml
+# .github/workflows/test.yml
+name: CI Tests
+
+on: [push, pull_request]
+
+jobs:
+  unit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: '22', cache: 'pnpm' }
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run typecheck
+      - run: pnpm run test:unit --coverage
+
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: '22', cache: 'pnpm' }
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install --with-deps chromium
+      - run: pnpm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun test suite otomatis yang komprehensif menggunakan **Playwright 1.49+** (E2E + component testing), **Vitest 3** (unit/integrasi), dan pipeline CI/CD yang kuat. Mencakup pola pengujian modern untuk Next.js 15, React 19, dan backend API.
+
+### Kondisi Pemicu
+- Menulis E2E test untuk aplikasi web dengan Playwright.
+- Menulis unit atau integration test dengan Vitest.
+- Menyiapkan pipeline pengujian otomatis di GitHub Actions / GitLab CI.
+- Menguji komponen React secara terisolasi.
+- Mocking layanan eksternal (API, database) dalam test.
+- Menyiapkan visual regression test.
+
+### Playwright 1.49+ — Fitur Baru 2026
+- **`aria-snapshot`**: Assert accessibility tree sebagai snapshot.
+- **`page.addLocatorHandler()`**: Tangani UI dinamis (modal, cookie banner) secara otomatis.
+- **WebSocket testing**: `page.expectWebSocketEvent()` bawaan.
+- **Playwright MCP Server**: Ekspos browser Playwright ke agen AI via MCP.
+
+### Page Object Model (POM)
+Enkapsulasi selektor dan tindakan halaman dalam kelas terpisah untuk mengurangi duplikasi dan meningkatkan keterbacaan test.
+
+### Mocking API dengan `page.route()`
+Gunakan `page.route()` untuk mencegat permintaan jaringan dan mengembalikan respons palsu — mengisolasi frontend dari backend dalam E2E test.
+
+### Aksesibilitas dengan aria-snapshot
+Gunakan `toMatchAriaSnapshot()` untuk memvalidasi struktur aksesibilitas navigasi, form, dan komponen interaktif — lebih semantis dari snapshot DOM biasa.
+
+### Auth State Reuse (storageState)
+Gunakan `storageState` untuk menyimpan state sesi setelah login sekali dan menggunakannya kembali di semua test yang memerlukan autentikasi — menghemat waktu secara signifikan.
+
+### Vitest 3 — Unit & Integration Testing
+Vitest 3 adalah test runner yang cepat berbasis Vite dengan kompatibilitas Jest penuh. Gunakan untuk unit test React component, server action, dan logika bisnis.
+
+### Pipeline CI GitHub Actions
+Pisahkan job `unit` dan `e2e` untuk feedback paralel yang lebih cepat. Upload `playwright-report` sebagai artifact saat gagal untuk debugging.

package/skills/event-driven-architect/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: event-driven-architect
+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."
+author: "Roedy Rustam"
+---
+
+# Event-Driven Architecture Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+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).
+
+### Trigger Conditions
+- Scaling a system that handles extremely high throughput or traffic spikes.
+- Implementing background jobs, asynchronous workers, or heavy data processing.
+- Transitioning from a monolith to microservices.
+- Integrating message brokers like RabbitMQ, Apache Kafka, AWS SQS, or Redis Pub/Sub.
+- Resolving distributed transaction issues (e.g., handling the Saga pattern).
+
+### Core Architecture Guidelines
+
+#### 1. Decoupling via Events
+Do not use synchronous HTTP calls between microservices for state mutations. It creates tightly coupled systems that fail in cascades.
+- **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.
+- Use **RabbitMQ** or **AWS SQS** for standard task queues (where order and exact-once delivery might be managed).
+- Use **Apache Kafka** or **Redpanda** for high-throughput event streaming where logs need to be replayed.
+
+#### 2. The Saga Pattern (Distributed Transactions)
+In microservices, you cannot use simple database transactions (ACID) across different databases.
+- 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.
+
+#### 3. CQRS (Command Query Responsibility Segregation)
+For high-read applications (like social media or analytics dashboards), split the read operations from the write operations.
+- **Commands**: Mutate state (write database).
+- **Queries**: Read state (read replica or materialized views/Elasticsearch).
+- Events synchronize the Write DB with the Read DB.
+
+#### 4. Event Sourcing
+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.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+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*).
+
+### Kondisi Pemicu
+- Menskalakan sistem untuk menangani lonjakan *traffic* atau volume data yang sangat tinggi.
+- Mengimplementasikan pekerjaan latar belakang (*background jobs*), *worker asinkron*, atau pemrosesan data berat.
+- Bertransisi dari arsitektur monolit ke layanan mikro (*microservices*).
+- Mengintegrasikan *message brokers* seperti RabbitMQ, Apache Kafka, AWS SQS, atau Redis Pub/Sub.
+- Menyelesaikan masalah transaksi terdistribusi (misalnya menerapkan pola Saga).
+
+### Panduan Arsitektur Inti
+
+#### 1. Desentralisasi melalui Event
+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*).
+- **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.
+- Gunakan **RabbitMQ** atau **AWS SQS** untuk antrean tugas standar.
+- Gunakan **Apache Kafka** atau **Redpanda** untuk *streaming event* throughput tinggi yang memerlukan *replay* log.
+
+#### 2. Pola Saga (Transaksi Terdistribusi)
+Dalam arsitektur *microservices*, Anda tidak dapat menggunakan transaksi database ACID standar lintas database yang berbeda.
+- 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.
+
+#### 3. CQRS (Command Query Responsibility Segregation)
+Untuk aplikasi dengan tingkat pembacaan yang sangat tinggi (seperti dasbor analitik), pisahkan operasi baca dari operasi tulis.
+- **Command**: Memutasi state/data (Database Tulis).
+- **Query**: Membaca state (Read Replica, Materialized Views, atau Elasticsearch).
+- Event bertugas menyinkronkan Database Tulis ke Database Baca di latar belakang.
+
+#### 4. Event Sourcing
+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.