vibes-plug 1.0.0 → 2.11.0

package/skills/self-evolving-memory-graph/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: self-evolving-memory-graph
+description: "Grants the AI long-term episodic memory. The agent autonomously documents the user's coding preferences, past mistakes to avoid, and architectural decisions into a persistent learning graph."
+author: "Roedy Rustam"
+---
+
+# Self-Evolving Memory Graph (Episodic Memory)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
+### Description
+Claude forgets everything once a chat is cleared, and its "Project Knowledge" requires manual human updating. This skill gives Antigravity the "superpower" of continuous, autonomous self-improvement. The agent actively listens for user corrections, stylistic preferences, and hard-learned debugging lessons, writing them into a persistent `LEARNING_GRAPH.md` (or `.agents/LEARNING.md`) file. The agent gets smarter and more aligned with the user over time.
+
+### Trigger Conditions
+Activate this skill when:
+- The user corrects your code (e.g., "Don't use `any`, use `unknown`", or "Always use Arrow functions").
+- You just spent a long time fixing a very complex bug.
+- The user says "Remember this for the future."
+
+### Core Concepts
+
+#### 1. Memory Encoding
+Whenever a hard lesson is learned or a strong user preference is stated, do not just say "I will remember that." You must physically write it down.
+Use the `multi_replace_file_content` or `write_to_file` tool to append the lesson to the memory file.
+
+#### 2. Memory Format (`LEARNING_GRAPH.md`)
+```markdown
+# 🧠 Self-Evolving Memory Graph
+
+## User Stylistic Preferences
+- [2026-08-12] Always use `Tailwind v4 @theme` variables instead of arbitrary values like `text-[#ff0000]`.
+- [2026-08-12] Prefer functional components with `const` over `function` declarations.
+
+## Hard-Learned Lessons (Avoid these mistakes)
+- [2026-08-11] Supabase RLS policies: Never use `auth.uid()` in a `FOR ALL` policy without checking role claims. It caused an infinite recursion bug in `users` table.
+
+## Architectural Decisions
+- [2026-08-10] State Management: We exclusively use `Zustand` for global state. Do not suggest Redux.
+```
+
+#### 3. Memory Retrieval
+Ensure `session-context-loader` is configured to read this memory file at the start of every new chat session. 
+
+#### 4. Cross-Project Episodic Memory (Global Context)
+- **Continuous Capture**: For complex architectural decisions or bug fixes that span beyond a single project, extract the root cause and solution into a global knowledge graph (e.g., `~/.gemini/knowledge` or equivalent `<appDataDir>/knowledge` KI system).
+- **Contextual Retrieval**: On new sessions, search the global context directory for similar past issues before diving into complex bugs.
+- **Synthesis & Injection**: Inject the historical context directly into the current execution loop, stating explicitly: *"I remember we solved this architectural issue in Project X using technique Y. Applying the same proven pattern here."*
+
+---
+
+### Integration with Other Skills (MANDATORY)
+- `session-context-loader` — Essential for loading the `LEARNING_GRAPH.md` when a new session starts.
+- `project-context-mapper` — The context map tracks *where* things are; the memory graph tracks *how* and *why* things are built.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "Discovery & Audit".
+- `zero-to-prod-orchestrator` — Phase 1 (Discovery & Architecture).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Claude melupakan segalanya saat sesi chat baru dimulai. Skill ini memberi Anda "kekuatan super" berupa *Ingatan Jangka Panjang* yang berevolusi sendiri. Agen secara aktif mencatat preferensi koding pengguna, pelajaran dari *bug* yang sulit dipecahkan, dan keputusan arsitektur ke dalam file persisten `LEARNING_GRAPH.md`. 
+
+### Kondisi Pemicu
+- Saat pengguna mengoreksi gaya koding Anda (misal: "Gunakan bahasa Indonesia baku", "Jangan pakai `var`").
+- Setelah Anda berhasil memecahkan *bug* yang menghabiskan waktu lama.
+- Saat pengguna berkata "Ingat ini untuk proyek ke depannya."
+
+### Panduan Singkat
+- **Jangan Hanya Berjanji:** Jika pengguna mengoreksi Anda, jangan sekadar menjawab "Baik, saya akan ingat." LLM tidak punya ingatan bawaan antar-sesi. Anda **wajib** menulis koreksi tersebut ke dalam file `LEARNING_GRAPH.md` di folder `.agents/` atau direktori *root*.
+- **Kategorisasi Ingatan:** Pisahkan ingatan menjadi: Preferensi Gaya (*Style*), Pelajaran Berharga (*Lessons Learned*), dan Keputusan Arsitektur (*Decisions*).
+- **Semakin Lama Semakin Pintar:** Dengan membaca file ini di awal setiap percakapan, Anda tidak akan pernah mengulangi kesalahan yang sama dua kali.
+
+### Memori Episodik Lintas-Proyek (Konteks Global)
+- **Penangkapan Berkelanjutan**: Untuk bug yang rumit dan pola arsitektur tingkat lanjut, ekstrak solusi ke dalam grafik pengetahuan global (misal: `~/.gemini/knowledge`).
+- **Pencarian Kontekstual**: Sebelum memecahkan masalah kompleks baru, cari direktori konteks global untuk kasus serupa.
+- **Sintesis & Injeksi**: Secara proaktif sebutkan: *"Saya ingat kita menyelesaikan ini di Proyek X dengan cara Y, saya akan menerapkannya di sini."*

package/skills/self-healing-cloud-orchestrator/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: self-healing-cloud-orchestrator
+description: "Real-time log monitoring, crash detection, and auto-hotfixing code without human intervention / Pemantauan log real-time, deteksi kerusakan, dan perbaikan kode hotfix otomatis tanpa intervensi manusia."
+author: "Roedy Rustam"
+---
+
+# Self-Healing Cloud Orchestrator (Code-to-Cloud Auto Remediation)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Bridges the gap between code generation and Cloud Operations (CloudOps). This agent continuously monitors production or staging logs (via Vercel, AWS CloudWatch, Datadog, or Sentry MCP servers). When an anomaly, crash (OOM, Null Pointer), or configuration mismatch occurs, it autonomously downloads the stack trace, identifies the root cause in the source code, writes a patch, validates it locally, and pushes a hotfix deployment without requiring human intervention.
+
+### Trigger Conditions
+- Post-deployment in Phase 8, running as a persistent background daemon.
+- When an application goes down or experiences a spike in 5xx errors.
+- When `proactive-background-watcher` detects a critical health-check failure.
+
+### Operating Protocol
+1. **Telemetry Ingestion**: Listens to structured logs and APM alerts.
+2. **Root Cause Analysis (RCA)**: Parses stack traces and maps them to the local repository's current commit state.
+3. **Autonomous Patching**: Writes the necessary fix (e.g., adding missing env vars, fixing memory leaks, patching unhandled promise rejections).
+4. **Validation & Deploy**: Runs local unit/E2E tests via `autonomous-tdd-debugger` and commits the hotfix to trigger the CI/CD pipeline.
+
+## Orchestration & Integration
+- Utilizes `proactive-background-watcher` for continuous daemon execution.
+- Consumes data from `logging-error-tracking-expert` and `data-telemetry-expert`.
+- Delegates to `ci-cd-devops-architect` to push fixes and initiate deployments.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Menjembatani kesenjangan antara pembuatan kode dan Operasi Cloud (CloudOps). Agen ini secara terus-menerus memantau log produksi atau staging (melalui server MCP Vercel, AWS CloudWatch, Datadog, atau Sentry). Ketika terjadi anomali, kerusakan (OOM, Null Pointer), atau ketidaksesuaian konfigurasi, agen ini secara otonom mengunduh *stack trace*, mengidentifikasi akar masalah pada *source code*, menulis *patch*, memvalidasinya secara lokal, dan meluncurkan *deployment hotfix* tanpa intervensi manusia.
+
+### Kondisi Pemicu
+- Pasca-deployment di Fase 8, berjalan sebagai daemon latar belakang yang persisten.
+- Ketika sebuah aplikasi tumbang (*down*) atau mengalami lonjakan *error* 5xx.
+- Ketika `proactive-background-watcher` mendeteksi kegagalan pengecekan kesehatan (*health-check*) yang kritis.
+
+### Protokol Operasi
+1. **Penyerapan Telemetri**: Mendengarkan log terstruktur dan peringatan APM.
+2. **Analisis Akar Masalah (RCA)**: Menguraikan *stack trace* dan memetakannya ke status komit repositori lokal saat ini.
+3. **Patching Otonom**: Menulis perbaikan yang diperlukan (misal: menambahkan *environment variable* yang hilang, memperbaiki kebocoran memori, menambal *unhandled promise rejection*).
+4. **Validasi & Deploy**: Menjalankan *unit test/E2E test* lokal melalui `autonomous-tdd-debugger` lalu melakukan komit untuk memicu pipeline CI/CD.
+
+## Integrasi Orkestrasi
+- Menggunakan `proactive-background-watcher` untuk eksekusi daemon berkelanjutan.
+- Mengonsumsi data dari `logging-error-tracking-expert` dan `data-telemetry-expert`.
+- Mendelegasikan tugas ke `ci-cd-devops-architect` untuk mendorong perbaikan (*push*) dan memulai deployment.

package/skills/senior-frontend/SKILL.md

@@ -16,88 +16,63 @@ author: "Roedy Rustam"
 ### Description
 Production-grade frontend development patterns, performance optimization, and modern ecosystem integrations for React 19 / Next.js 15 applications with Tailwind CSS v4 and TypeScript. Covers React 19 Compiler, Partial Prerendering (PPR), View Transitions API, and SPA/MPA hybrid strategies.
 
+### Orchestration & Integration
+- `ui-components-expert`: For building robust UI components (Radix, shadcn).
+- `tailwind-expert`: For styling and custom @theme configurations.
+- `nextjs-app-router-expert`: For RSC, caching, and Next.js routing patterns.
+- `state-management-expert`: For client-side state (Zustand, Jotai).
+- `tanstack-query-expert`: For advanced data fetching and server state caching.
+- `spa-orchestrator`: For Single-Page Application architectures.
+- `mpa-orchestrator`: For Multi-Page Application architectures.
+
 ### Trigger Conditions
-- Use when scaffolding a new React or Next.js 15 project with TypeScript and Tailwind CSS v4.
-- Use when generating new components, custom hooks, or Server Actions.
-- Use when analyzing and optimizing bundle sizes and Core Web Vitals.
-- Use to implement advanced React 19 patterns (`useActionState`, `useOptimistic`, `use()`).
-- Use when working in SPA mode — coordinate with `spa-orchestrator` for architecture decisions.
-- Use to ensure accessibility compliance (WCAG 2.2) and implement robust testing.
+- Scaffold a new React or Next.js 15 project with TypeScript and Tailwind CSS v4.
+- Generate new components, custom hooks, or Server Actions.
+- Analyze and optimize bundle sizes and Core Web Vitals.
+- Implement advanced React 19 patterns (`useActionState`, `useOptimistic`, `use()`).
+- Build SPAs — coordinate with `spa-orchestrator`.
+- Ensure accessibility compliance (WCAG 2.2) and testing.
 
 ### Technical Guidelines & Best Practices
 
 #### 1. Next.js 15: Server vs Client Components
-Use **Server Components** by default for performance and SEO. Use `'use client'` only when you need:
+Use **Server Components** by default for performance and SEO. Use `'use client'` strictly for:
 - State (`useState`, `useEffect`), event handlers (`onClick`), browser APIs.
-- Interactive UI that must be hydrated on the client.
-
-*Next.js 15 Notes:*
-- `params` and `searchParams` are now `Promise`-based — always `await` them before reading properties.
-- **Partial Prerendering (PPR)**: Wrap dynamic sections in `<Suspense>` — Next.js will statically pre-render the shell and stream dynamic content. Enable with `experimental: { ppr: true }`.
+- Interactive UI needing client hydration.
 
-#### 2. React 19 — New Hooks & Compiler
-React 19 ships with a **compiler** that auto-applies memoization. You no longer need `useMemo`, `useCallback`, or `React.memo` in most cases — the compiler handles it.
+*Next.js 15.2+ Requirements:*
+- Await `Promise`-based `params` and `searchParams` before accessing properties.
+- Use **Partial Prerendering (PPR)** natively. Wrap dynamic sections in `<Suspense>`.
 
-**New Hooks:**
-- **`useActionState`**: Manage form state, pending indicators, and action results natively with Server Actions.
-- **`useOptimistic`**: Instantly update UI before server confirms (likes, cart additions).
-- **`useFormStatus`**: Read form submission state inside child components.
-- **`use(promise)`**: Unwrap promises or context inside render — works with Suspense.
-```tsx
-// use() with context
-const theme = use(ThemeContext);
+#### 2. React 19 Compiler & Hooks
+Do not use `useMemo`, `useCallback`, or `React.memo` unless explicitly required; rely on the React 19 compiler.
 
-// use() with a promise (suspends until resolved)
-const data = use(fetchUserPromise);
-```
+**Mandatory Hooks:**
+- **`useActionState`**: Manage form state, pending indicators, and action results with Server Actions.
+- **`useOptimistic`**: Update UI instantly before server confirmation.
+- **`useFormStatus`**: Read form submission state in child components.
+- **`use(promise)`**: Unwrap promises or context inside render with Suspense.
 
 #### 3. View Transitions API
-Use the native browser View Transitions API for smooth page transitions without heavy libraries:
-```tsx
-import { unstable_ViewTransition as ViewTransition } from 'react';
-
-// Wrap changing elements
-<ViewTransition name="hero-image">
-  <img src={image} />
-</ViewTransition>
-```
-Next.js 15 App Router supports View Transitions natively via the `<Link>` component with `viewTransition` prop.
-
-#### 4. Tailwind CSS v4 CSS-First Configuration
-Tailwind CSS v4 uses **CSS-first configuration**. Define custom theme tokens using the `@theme` directive in your main CSS file. Use the new `@plugin` directive to register plugins:
-```css
-@import "tailwindcss";
-
-@theme {
-  --color-brand: oklch(55% 0.2 250);
-  --font-sans: "Inter", sans-serif;
-  --animate-fade-in: fade-in 0.3s ease-out;
-}
-
-@plugin "@tailwindcss/typography";
-```
+Implement native View Transitions API for smooth page transitions. Use Next.js 15 `<Link viewTransition>` natively.
+
+#### 4. Tailwind CSS v4
+Use CSS-first configuration. Define custom tokens with `@theme` and register plugins with `@plugin` in the main CSS file.
 
 #### 5. Accessibility (WCAG 2.2) & Testing
-- Use semantic HTML tags (`<button>`, `<nav>`, `<main>`, `<article>`).
-- Ensure full keyboard navigability and proper `aria-*` labels.
+- Enforce semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`).
+- Enforce full keyboard navigability and valid `aria-*` labels.
 - Write unit tests using **Vitest** and **React Testing Library**.
-- Write E2E tests using **Playwright** (via `e2e-testing-expert` skill).
+- Write E2E tests using **Playwright** via `e2e-testing-expert`.
 
-#### 6. SPA Integration (spa-orchestrator)
-When building a decoupled SPA (not Next.js SSR):
-- Coordinate with `spa-orchestrator` for architecture decisions (routing, state, API layer).
-- Use **TanStack Router** for fully type-safe client-side routing (preferred over React Router for new projects).
-- Use **TanStack Query v5** for all server state — never use bare `useEffect` for data fetching.
+#### 6. Architecture Integration
+- **SPA (`spa-orchestrator`)**: Use **TanStack Router** for type-safe client routing and **TanStack Query v5** for server state. Never use bare `useEffect` for data fetching.
+- **MPA (`mpa-orchestrator`)**: Use **Alpine.js** or **HTMX** for micro-interactions. Apply Progressive Enhancement.
 
-#### 7. Multi-Page Application (MPA) Integration
-When working within a centralized MPA (via `mpa-orchestrator`):
-- Use **Alpine.js** or **HTMX** for micro-interactions without heavy client bundles.
-- Apply **Progressive Enhancement**: ensure forms and links work without JavaScript first.
-
-#### 8. Advanced Animations (GSAP)
-- Use **GSAP (GreenSock Animation Platform)** for complex, timeline-based, and scroll-driven animations (`ScrollTrigger`).
-- Prefer GSAP over CSS animations for sequences requiring pausing, reversing, staggering, or timeline control.
-- In React, always use the `@gsap/react` `useGSAP()` hook for automatic cleanup and scope management to prevent memory leaks.
+#### 7. Advanced Animations
+- **GSAP (GreenSock)**: Use for complex, timeline-based, scroll-driven animations (`ScrollTrigger`). Enforce `@gsap/react` `useGSAP()` hook for auto-cleanup.
+- **Anime.js**: Use as a lightweight alternative for simple sequencing, SVG path animations, and DOM attribute animations.
+- Prefer JS animations over CSS when timeline control (pause, reverse, dynamic stagger) is required.
 
 ---
 
@@ -107,55 +82,60 @@ When working within a centralized MPA (via `mpa-orchestrator`):
 ### Deskripsi
 Pola pengembangan frontend tingkat produksi, optimasi performa, dan integrasi ekosistem modern untuk aplikasi React 19 / Next.js 15 dengan Tailwind CSS v4 dan TypeScript. Mencakup React 19 Compiler, Partial Prerendering (PPR), View Transitions API, dan strategi hybrid SPA/MPA.
 
+### Integrasi Orkestrasi
+- `ui-components-expert`: Untuk membangun komponen UI yang kuat (Radix, shadcn).
+- `tailwind-expert`: Untuk styling dan konfigurasi @theme kustom.
+- `nextjs-app-router-expert`: Untuk RSC, caching, dan pola routing Next.js.
+- `state-management-expert`: Untuk state client-side (Zustand, Jotai).
+- `tanstack-query-expert`: Untuk fetching data lanjutan dan caching server state.
+- `spa-orchestrator`: Untuk arsitektur Single-Page Application.
+- `mpa-orchestrator`: Untuk arsitektur Multi-Page Application.
+
 ### Kondisi Pemicu
-- Gunakan saat merancang proyek React atau Next.js 15 baru dengan TypeScript dan Tailwind CSS v4.
-- Gunakan saat membuat komponen baru, custom hooks, atau Server Actions.
-- Gunakan saat menganalisis dan mengoptimalkan bundle dan Core Web Vitals.
-- Gunakan untuk mengimplementasikan pola React 19 lanjutan (`useActionState`, `useOptimistic`, `use()`).
-- Gunakan saat membangun SPA — koordinasikan dengan `spa-orchestrator` untuk keputusan arsitektur.
-- Gunakan untuk memastikan kepatuhan aksesibilitas (WCAG 2.2) dan pengujian otomatis.
+- Buat proyek React atau Next.js 15 baru dengan TypeScript dan Tailwind CSS v4.
+- Buat komponen baru, custom hooks, atau Server Actions.
+- Analisis dan optimalkan ukuran bundle dan Core Web Vitals.
+- Terapkan pola React 19 lanjutan (`useActionState`, `useOptimistic`, `use()`).
+- Bangun SPA — koordinasikan dengan `spa-orchestrator`.
+- Pastikan kepatuhan aksesibilitas (WCAG 2.2) dan pengujian.
 
 ### Panduan Teknis & Praktik Terbaik
 
 #### 1. Next.js 15: Server vs Client Components
-Gunakan **Server Components** secara default untuk performa dan SEO. Gunakan `'use client'` hanya saat dibutuhkan state, event handler, atau API browser.
+Gunakan **Server Components** secara default. Gunakan `'use client'` hanya untuk:
+- State (`useState`, `useEffect`), event handler, API browser.
+- UI interaktif yang membutuhkan hidrasi klien.
 
-*Catatan Next.js 15:*
-- `params` dan `searchParams` sekarang bertipe `Promise` — lakukan `await` sebelum mengakses nilainya.
-- **Partial Prerendering (PPR)**: Bungkus bagian dinamis dengan `<Suspense>` — Next.js akan men-prerender shell statis dan meng-stream konten dinamis. Aktifkan dengan `experimental: { ppr: true }`.
+*Persyaratan Next.js 15.2+:*
+- Wajib `await` pada `params` dan `searchParams` yang kini bertipe `Promise`.
+- Gunakan **Partial Prerendering (PPR)** secara native. Bungkus bagian dinamis dengan `<Suspense>`.
 
-#### 2. React 19 — Hook Baru & Compiler
-React 19 hadir dengan **compiler** yang otomatis menerapkan memoization. Anda tidak lagi perlu `useMemo`, `useCallback`, atau `React.memo` di sebagian besar kasus.
+#### 2. React 19 Compiler & Hook Baru
+Jangan gunakan `useMemo`, `useCallback`, atau `React.memo` kecuali sangat diperlukan; andalkan compiler React 19.
 
-**Hook Baru:**
-- **`useActionState`**: Mengelola state form, indikator loading, dan hasil action dengan Server Actions.
-- **`useOptimistic`**: Memperbarui UI secara instan sebelum server mengonfirmasi.
-- **`useFormStatus`**: Membaca status form di dalam komponen anak.
-- **`use(promise)`**: Membuka *promise* atau context langsung di dalam render — bekerja bersama Suspense.
+**Hook Wajib:**
+- **`useActionState`**: Kelola state form, indikator loading, dan hasil action dengan Server Actions.
+- **`useOptimistic`**: Perbarui UI secara instan sebelum server mengonfirmasi.
+- **`useFormStatus`**: Baca status form di dalam komponen anak.
+- **`use(promise)`**: Buka promise atau context langsung di dalam render dengan Suspense.
 
 #### 3. View Transitions API
-Gunakan View Transitions API bawaan browser untuk transisi halaman yang mulus tanpa library berat. Next.js 15 mendukung ini secara native melalui `<Link viewTransition>`.
+Terapkan View Transitions API bawaan browser untuk transisi halaman. Gunakan `<Link viewTransition>` pada Next.js 15.
 
-#### 4. Tailwind CSS v4 CSS-First Configuration
-Konfigurasi kustom tema dilakukan langsung di file CSS menggunakan direktif `@theme`. Gunakan `@plugin` untuk mendaftarkan plugin.
+#### 4. Tailwind CSS v4
+Gunakan konfigurasi CSS-first. Definisikan token kustom dengan `@theme` dan plugin dengan `@plugin` di file CSS utama.
 
 #### 5. Aksesibilitas (WCAG 2.2) & Pengujian
-- Gunakan HTML semantik (`<button>`, `<nav>`, `<main>`).
-- Pastikan navigasi keyboard berfungsi penuh dengan label `aria-*` yang tepat.
-- Pengujian unit dengan Vitest + React Testing Library; E2E dengan Playwright.
-
-#### 6. Integrasi SPA (spa-orchestrator)
-Saat membangun SPA terpisah (bukan Next.js SSR):
-- Koordinasikan dengan `spa-orchestrator` untuk keputusan routing, state, dan API layer.
-- Gunakan **TanStack Router** untuk routing type-safe di sisi klien.
-- Gunakan **TanStack Query v5** untuk semua server state.
-
-#### 7. Integrasi MPA (mpa-orchestrator)
-Saat bekerja dalam arsitektur MPA terpusat:
-- Gunakan Alpine.js atau HTMX untuk interaksi mikro yang ringan.
-- Terapkan Progressive Enhancement: form dan link harus berfungsi tanpa JavaScript terlebih dahulu.
-
-#### 8. Animasi Tingkat Lanjut (GSAP)
-- Gunakan **GSAP (GreenSock Animation Platform)** untuk animasi kompleks, berbasis timeline, dan *scroll-driven* (`ScrollTrigger`).
-- Utamakan GSAP dibandingkan CSS untuk animasi yang membutuhkan kontrol *timeline*, jeda (*pause*), *reverse*, atau *stagger*.
-- Di React, selalu gunakan hook `useGSAP()` dari `@gsap/react` untuk *cleanup* otomatis dan manajemen *scope* guna mencegah kebocoran memori (*memory leak*).
+- Wajib gunakan HTML semantik (`<button>`, `<nav>`, `<main>`).
+- Wajib pastikan navigasi keyboard dengan label `aria-*` yang valid.
+- Tulis pengujian unit dengan **Vitest** dan **React Testing Library**.
+- Tulis pengujian E2E dengan **Playwright** via `e2e-testing-expert`.
+
+#### 6. Integrasi Arsitektur
+- **SPA (`spa-orchestrator`)**: Gunakan **TanStack Router** untuk routing klien dan **TanStack Query v5** untuk server state. Jangan gunakan `useEffect` murni untuk fetching data.
+- **MPA (`mpa-orchestrator`)**: Gunakan **Alpine.js** atau **HTMX** untuk interaksi mikro. Terapkan Progressive Enhancement.
+
+#### 7. Animasi Tingkat Lanjut
+- **GSAP (GreenSock)**: Gunakan untuk animasi kompleks, berbasis timeline, dan scroll-driven. Wajib gunakan hook `useGSAP()` dari `@gsap/react`.
+- **Anime.js**: Gunakan untuk staggering sederhana, animasi SVG, dan DOM.
+- Utamakan animasi JS (GSAP/Anime.js) daripada CSS murni jika kontrol timeline (pause, reverse) dibutuhkan.