vibes-plug 1.0.0 → 2.5.0

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

@@ -0,0 +1,75 @@
+---
+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
+
+### 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. 
+
+---
+
+### 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
+
+### 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.

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: vibes-plug-swarm
+---
+
+# 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

@@ -1,161 +1,161 @@
----
-name: senior-frontend
-description: "Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4."
-author: "Roedy Rustam"
----
-
-# Senior Frontend Specialist (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### 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.
-
-### 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.
-
-### 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:
-- 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 }`.
-
-#### 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.
-
-**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);
-
-// use() with a promise (suspends until resolved)
-const data = use(fetchUserPromise);
-```
-
-#### 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";
-```
-
-#### 5. Accessibility (WCAG 2.2) & Testing
-- Use semantic HTML tags (`<button>`, `<nav>`, `<main>`, `<article>`).
-- Ensure full keyboard navigability and proper `aria-*` labels.
-- Write unit tests using **Vitest** and **React Testing Library**.
-- Write E2E tests using **Playwright** (via `e2e-testing-expert` skill).
-
-#### 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.
-
-#### 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.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### 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.
-
-### 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.
-
-### 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.
-
-*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 }`.
-
-#### 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.
-
-**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.
-
-#### 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>`.
-
-#### 4. Tailwind CSS v4 CSS-First Configuration
-Konfigurasi kustom tema dilakukan langsung di file CSS menggunakan direktif `@theme`. Gunakan `@plugin` untuk mendaftarkan plugin.
-
-#### 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*).
+---
+name: senior-frontend
+description: "Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4."
+author: "Roedy Rustam"
+---
+
+# Senior Frontend Specialist (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### 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.
+
+### 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:
+- 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 }`.
+
+#### 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.
+
+**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);
+
+// use() with a promise (suspends until resolved)
+const data = use(fetchUserPromise);
+```
+
+#### 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";
+```
+
+#### 5. Accessibility (WCAG 2.2) & Testing
+- Use semantic HTML tags (`<button>`, `<nav>`, `<main>`, `<article>`).
+- Ensure full keyboard navigability and proper `aria-*` labels.
+- Write unit tests using **Vitest** and **React Testing Library**.
+- Write E2E tests using **Playwright** (via `e2e-testing-expert` skill).
+
+#### 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.
+
+#### 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 & Anime.js)
+- **GSAP (GreenSock)**: Use for complex, timeline-based, and scroll-driven animations (`ScrollTrigger`). In React, always use `@gsap/react` `useGSAP()` hook for automatic cleanup.
+- **Anime.js**: Use as a lightweight, powerful alternative for simpler sequencing, staggering, SVG path animations, and DOM attribute animations. It's often preferred when bundle size is a strict concern and scroll-driven features are not needed.
+- Prefer JS animations (GSAP/Anime.js) over CSS for sequences requiring pausing, reversing, or timeline control.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### 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.
+
+### 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.
+
+*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 }`.
+
+#### 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.
+
+**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.
+
+#### 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>`.
+
+#### 4. Tailwind CSS v4 CSS-First Configuration
+Konfigurasi kustom tema dilakukan langsung di file CSS menggunakan direktif `@theme`. Gunakan `@plugin` untuk mendaftarkan plugin.
+
+#### 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 & Anime.js)
+- **GSAP (GreenSock)**: Gunakan untuk animasi kompleks, berbasis timeline, dan *scroll-driven* (`ScrollTrigger`). Di React, selalu gunakan hook `useGSAP()` dari `@gsap/react` untuk mencegah kebocoran memori.
+- **Anime.js**: Gunakan sebagai alternatif yang lebih ringan namun sangat kuat untuk animasi DOM, properti CSS, SVG, dan *staggering* sederhana. Sangat cocok jika ukuran *bundle* menjadi prioritas utama.
+- Utamakan pustaka JS (GSAP/Anime.js) dibandingkan CSS murni untuk animasi yang membutuhkan kontrol *timeline*, jeda (*pause*), *reverse*, atau *stagger* dinamis.