vibes-plug 2.5.0 → 2.14.1

package/skills/session-memory-manager/SKILL.md

@@ -0,0 +1,128 @@
+---
+name: session-memory-manager
+description: "Manages the entire session lifecycle: from context loading (PRD, Tech Stack) at startup, to maintaining project memory during active sessions, and creating ultra-compact checkpoints for handoff. / Mengelola siklus hidup sesi: dari pemuatan konteks awal, pemeliharaan memori proyek, hingga pembuatan checkpoint ringkas untuk handoff."
+author: "Roedy Rustam"
+---
+
+# Session Memory Manager
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming` and `zero-to-prod-orchestrator` to ensure cohesive execution across the entire session lifecycle.
+
+### Description
+This skill acts as the agent's memory controller. It handles loading project context at session startup, dynamically updating the context map and learning graph during the session, and seamlessly generating ultra-compact handoff checkpoints at session end.
+
+### 1. Session Start (Ingestion)
+Activate this phase IMMEDIATELY on a new session, or when the user says "start session" or "load context". Do not answer primary requests until complete.
+
+**Workflow:**
+1. **Discover Files**: Search the root or `.docs/` using `list_dir`, `grep_search`, or `view_file` for: `CONTEXT_MAP.md`, `LEARNING_GRAPH.md`, `PRD.md`, `BLUEPRINT.md` (or `ARCHITECTURE.md`), and `CHECKPOINT.md`. Also read tech stack identifiers (`TECH_STACK.md`, `package.json`, `go.mod`, etc.).
+2. **Internalize**: Read the contents. Grasp the architectural constraints, user stylistic preferences, hard-learned lessons, and the current goal/milestone.
+3. **Acknowledge**: Briefly confirm to the user what context was loaded, stating the Tech Stack and immediate goal. Proceed to address the actual request.
+
+### 2. Active Session (Run)
+Maintain project memory actively to prevent context exhaustion and hallucination.
+
+**Maintain Context Map (`CONTEXT_MAP.md`)**
+- A highly compressed index (bullet points) of architecture, dependency graphs, and state locations.
+- **Rules**: Do not store full code; use only file paths and 1-sentence responsibilities. Use BM25/`grep_search` before modifying. Append new major components/routes immediately upon creation.
+
+**Maintain Learning Graph (`LEARNING_GRAPH.md`)**
+- **Triggers**: When the user corrects code style, states a strong preference, or after resolving a complex bug. 
+- **Rules**: Physically write lessons to the memory file under categories: User Stylistic Preferences, Hard-Learned Lessons, Architectural Decisions. Do not just promise to remember.
+- **Global Memory**: For issues spanning multiple projects, document the root cause/solution into a global context directory (e.g., `<appDataDir>/knowledge`). Inject this historical context proactively in future tasks.
+
+### 3. Session End (Handoff)
+**Triggers**: Session is very long (>30 messages or >70% context used), major milestone reached, or user says "save checkpoint" / "handoff".
+
+**Action**: Generate an ultra-compact YAML checkpoint block (<200 tokens).
+
+**Checkpoint Format**:
+```yaml
+# CHECKPOINT — [Project Name] — [Date]
+project: "[Name]"
+goal: "[One-line goal]"
+status: "[e.g., 60% — backend API done]"
+stack: "[Tech Stack]"
+last_completed:
+  - "[Most recent task]"
+next_tasks:
+  - "[Immediate next task]"
+blockers: "[Blockers or 'none']"
+key_files:
+  - "[path/to/critical.ts]"
+env_needed: "[List of vars]"
+notes: "[Critical context]"
+```
+
+**Cross-Model Handoff Prompt**:
+Use this universal template when moving across models (Gemini, Claude, GPT):
+```markdown
+## RESUME CONTEXT — [Project Name]
+**Goal**: [One-sentence goal]
+**Current Status**: [Status]
+**Tech Stack**: [Stack]
+**Completed**: [Done items]
+**Next Tasks**: 1. [Task 1] 2. [Task 2]
+**Critical Files to Read First**: [File paths & reasons]
+**Known Constraints**: [Constraints]
+**Do NOT**: [Anti-patterns to avoid]
+Start by reading the critical files, then confirm understanding before proceeding.
+```
+
+**Checkpoint Storage Hierarchy**:
+1. `CHECKPOINT.md` in project root (Primary).
+2. `.agents/CHECKPOINT.md` (Alternative).
+3. Clipboard or Supabase notes table (Cross-device).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain seperti `brainstorming` dan `zero-to-prod-orchestrator` untuk memastikan eksekusi kohesif selama siklus hidup sesi.
+
+### Deskripsi
+Skill ini mengatur memori agen: memuat konteks di awal sesi, memperbarui peta proyek dan grafik pembelajaran selama sesi berjalan, dan membuat checkpoint ringkas untuk perpindahan sesi (handoff).
+
+### 1. Awal Sesi (Ingestion)
+Aktifkan SEGERA pada sesi baru, atau saat diminta "mulai sesi" / "muat konteks". 
+
+**Alur Kerja:**
+1. **Temukan File**: Cari di root atau `.docs/`: `CONTEXT_MAP.md`, `LEARNING_GRAPH.md`, `PRD.md`, `BLUEPRINT.md`, `CHECKPOINT.md`, dan file identifikasi tech stack (`package.json`, dsb).
+2. **Pahami**: Baca isinya. Pahami batasan arsitektur, preferensi pengguna, pelajaran penting, dan tujuan/milestone saat ini.
+3. **Konfirmasi**: Beritahu pengguna secara singkat bahwa konteks dimuat, sebutkan Tech Stack dan tujuan langsung, lalu proses permintaan utama.
+
+### 2. Sesi Berjalan (Run)
+Pertahankan memori proyek agar tidak terjadi halusinasi dan hemat token.
+
+**Pelihara Peta Konteks (`CONTEXT_MAP.md`)**
+- Indeks super padat berisi arsitektur, lokasi file penting, dan graf dependensi.
+- **Aturan**: Jangan simpan kode lengkap, hanya path dan tanggung jawab singkat. Gunakan BM25/`grep_search` sebelum mengedit. Tambahkan entri baru saat membuat komponen/rute besar.
+
+**Pelihara Grafik Pembelajaran (`LEARNING_GRAPH.md`)**
+- **Pemicu**: Pengguna mengoreksi gaya koding, menyatakan preferensi, atau setelah mengatasi bug rumit.
+- **Aturan**: Catat langsung ke file dalam kategori: Preferensi Gaya, Pelajaran Berharga, Keputusan Arsitektur. 
+- **Memori Global**: Ekstrak solusi masalah lintas-proyek ke direktori pengetahuan global (`<appDataDir>/knowledge`). Gunakan pengetahuan masa lalu secara proaktif dengan menyebutkannya.
+
+### 3. Akhir Sesi (Handoff)
+**Pemicu**: Pesan > 30, jendela konteks > 70% terpakai, milestone tercapai, atau pengguna berkata "simpan checkpoint".
+
+**Tindakan**: Hasilkan blok YAML super ringkas (<200 token) berisi: `project`, `goal`, `status`, `stack`, `last_completed`, `next_tasks`, `blockers`, `key_files`, `env_needed`, dan `notes`.
+
+**Prompt Handoff Lintas-Model**:
+Gunakan template universal saat berpindah model:
+Berikan konteks proyek (Tujuan, Status, Stack, Tugas Selesai, Tugas Berikutnya), daftar file kritis untuk dibaca pertama kali, batasan, dan apa yang JANGAN dilakukan. Minta konfirmasi sebelum lanjut.
+
+**Hierarki Penyimpanan Checkpoint**:
+1. `CHECKPOINT.md` di root proyek (Utama).
+2. `.agents/CHECKPOINT.md` (Alternatif).
+3. Clipboard / Catatan Supabase (Lintas perangkat).

package/skills/solidjs-expert/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: solidjs-expert
+description: "Expert guide for SolidJS 2 and SolidStart — fine-grained reactivity, signals, createResource, and server-first rendering / Panduan ahli SolidJS 2 dan SolidStart — reaktivitas fine-grained, signals, createResource, dan rendering server-first."
+author: "Roedy Rustam"
+---
+
+# SolidJS Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`performance-web-vitals`**: SolidJS's top-tier runtime performance.
+- **`tailwind-expert`**: Tailwind CSS integration with SolidJS.
+- **`state-management-expert`**: Solid signals vs other state management patterns.
+- **`typescript-expert`**: Type-safe SolidJS components.
+
+### Description
+Expert guide for SolidJS 2 and SolidStart, the fine-grained reactive framework with near-zero overhead. Covers signals (`createSignal`), derived state (`createMemo`), effects (`createEffect`), resources (`createResource`), stores, context, SolidStart routing, server functions, and migration patterns from React.
+
+### Trigger Conditions
+- Building applications with SolidJS or SolidStart.
+- Choosing SolidJS for performance-critical interactive UIs.
+- Comparing SolidJS vs React for a new project.
+- Understanding fine-grained reactivity patterns.
+
+---
+
+### SolidJS Core
+
+```tsx
+import { createSignal, createMemo, createEffect, createResource, For, Show } from 'solid-js';
+
+function TodoApp() {
+  const [todos, setTodos] = createSignal<{ id: number; text: string; done: boolean }[]>([]);
+  const [filter, setFilter] = createSignal<'all' | 'active' | 'done'>('all');
+
+  const filtered = createMemo(() => {
+    const f = filter();
+    return f === 'all' ? todos() : todos().filter((t) => (f === 'done' ? t.done : !t.done));
+  });
+
+  const remaining = createMemo(() => todos().filter((t) => !t.done).length);
+
+  createEffect(() => {
+    document.title = `${remaining()} todos remaining`;
+  });
+
+  return (
+    <div>
+      <h1>Todos ({remaining()} remaining)</h1>
+      <For each={filtered()}>
+        {(todo) => <div classList={{ done: todo.done }}>{todo.text}</div>}
+      </For>
+      <Show when={todos().length > 0} fallback={<p>No todos yet!</p>}>
+        <button onClick={() => setTodos([])}>Clear All</button>
+      </Show>
+    </div>
+  );
+}
+```
+
+## Orchestration & Integration
+- `performance-web-vitals`, `tailwind-expert`, `typescript-expert`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli SolidJS 2 dan SolidStart, framework reaktif fine-grained dengan overhead hampir nol. Mencakup signals, derived state, effects, resources, stores, dan routing SolidStart.
+
+### Kondisi Pemicu
+- Membangun aplikasi dengan SolidJS atau SolidStart.
+- Memilih SolidJS untuk UI interaktif yang kritis performa.

package/skills/spa-orchestrator/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: spa-orchestrator
 description: "Orchestrates Single-Page Application (SPA) architecture, integrating frontend state management with API-driven backends / Mengorkestrasi arsitektur Single-Page Application (SPA), mengintegrasikan state management frontend dengan backend berbasis API."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Single-Page Application (SPA) Orchestrator (2026 Edition)
@@ -13,6 +13,10 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+- **MANDATORY**: Execute `modern-web-guidance` FIRST for all HTML/CSS and client-side JS tasks to ensure modern web standards.
+
 ### Description
 Structured orchestration guide for building modern Single-Page Applications (SPAs). Coordinates frontend architecture (TanStack Router, React 19, TanStack Query v5) with decoupled API backends (Hono RPC, tRPC). Covers state management strategy, routing patterns, API layer design, build tooling (Vite + TanStack Start), and deployment strategies.
 
@@ -253,6 +257,10 @@ export default defineConfig({
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+- **MANDATORY**: Eksekusi `modern-web-guidance` PERTAMA KALI untuk semua tugas HTML/CSS dan JS sisi klien guna memastikan standar web modern.
+
 ### Deskripsi
 Panduan orkestrasi terstruktur untuk membangun Single-Page Application (SPA) modern. Mengkoordinasikan arsitektur frontend (TanStack Router, React 19, TanStack Query v5) dengan backend API terpisah (Hono RPC, tRPC). Mencakup strategi state management, pola routing, desain API layer, build tooling (Vite + TanStack Start), dan strategi deployment.
 
@@ -286,3 +294,14 @@ Ekspor `AppType` dari backend Hono dan gunakan `hc<AppType>()` di frontend untuk
 
 ### Build & Deployment
 Gunakan plugin `TanStackRouterVite` untuk auto-generate route tree. Konfigurasi `manualChunks` untuk code splitting yang optimal. Deploy SPA ke Cloudflare Pages atau Vercel; backend API ke Railway/Fly.io secara terpisah.
+
+---
+### 📄 Standard Pages Mandate (CRITICAL)
+**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
+1. **About Page** (`/about`)
+2. **Profile Page** (`/profile`)
+3. **Contact Page** (`/contact`)
+4. **Terms of Reference / Terms of Service** (`/terms`)
+5. **Privacy Policy** (`/privacy-policy`)
+
+These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.

package/skills/sse-websocket-streaming-expert/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: sse-websocket-streaming-expert
+description: "Expert guide for Server-Sent Events (SSE), WebSockets, and Streaming Architectures. Covers real-time data push, Socket.IO, Hono WebSocket, and AI response streaming / Panduan ahli streaming real-time."
+author: "Roedy Rustam"
+---
+
+# SSE, WebSocket & Streaming Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A focused guide for building real-time data push architectures. While `realtime-collaboration-expert` focuses on CRDTs (Yjs) for multi-player editing, this skill focuses on the transport layer: when to use Server-Sent Events (SSE) vs WebSockets vs HTTP Streaming, scaling pub/sub architectures, and streaming AI responses.
+
+### Trigger Conditions
+- When building live notification systems, live sports scores, or stock tickers.
+- When streaming LLM text generation responses chunk-by-chunk to the UI.
+- When the user asks about "WebSockets", "Socket.IO", or "SSE".
+- When implementing a chat application.
+
+### Core Architectural Guidelines
+
+#### 1. SSE vs WebSockets
+Choose the right transport mechanism to save server resources.
+- **Server-Sent Events (SSE)**: Unidirectional (Server to Client). Uses standard HTTP. Best for live feeds, AI streaming, notifications. Handles reconnections automatically.
+- **WebSockets**: Bidirectional. Best for chat apps, multiplayer games. Requires a persistent TCP connection and custom ping/pong keepalives.
+
+#### 2. Streaming AI Responses (HTTP Streaming)
+For LLMs, use standard HTTP Streaming (often via the `ai` SDK in React/Next.js) instead of complex WebSockets.
+```typescript
+// Next.js Route Handler Example
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+  const stream = await myLLM.stream(prompt);
+  
+  return new Response(stream, {
+    headers: { 'Content-Type': 'text/event-stream' },
+  });
+}
+```
+
+#### 3. Scaling WebSockets (Pub/Sub)
+A single Node.js process can handle thousands of WebSockets, but when you scale horizontally (multiple servers), clients on Server A cannot see messages from Server B.
+- **Redis Adapter**: Use a Pub/Sub mechanism (like Redis) so when a message is published, all server instances broadcast it to their respective connected clients.
+- **Serverless WebSockets**: In serverless environments (AWS API Gateway, Cloudflare Durable Objects), you do not hold the connection in your code. The infrastructure holds it, and calls your webhook when messages arrive.
+
+#### 4. Reconnection & Idempotency
+- Always assume connections will drop.
+- Clients must maintain a `lastEventId` or cursor. Upon reconnection, the client sends this cursor so the server can push any missed messages, preventing data loss.
+
+## Orchestration & Integration
+- Supplements `js-backend-expert` or `go-programming-expert` with real-time push capabilities.
+- Essential for `gemini-agent-booster` when building AI streaming chat interfaces.
+- Integrates with `api-gateway-proxy-expert` to ensure proxies do not buffer streaming responses.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan terfokus untuk membangun arsitektur push data real-time. Skill ini berfokus pada lapisan transport: kapan harus menggunakan Server-Sent Events (SSE) vs WebSockets vs HTTP Streaming, penskalaan arsitektur pub/sub (Redis), dan streaming respons AI.
+
+### Kondisi Pemicu
+- Saat membangun sistem notifikasi live, pembaruan skor, atau ticker saham.
+- Saat melakukan streaming teks hasil generasi LLM bagian-demi-bagian (chunk-by-chunk) ke UI.
+- Saat mengimplementasikan aplikasi obrolan (chat).
+
+### Panduan Arsitektur Inti
+
+#### 1. SSE vs WebSockets
+Pilih mekanisme transport yang tepat:
+- **Server-Sent Events (SSE)**: Satu arah (Server ke Klien). Berjalan di atas HTTP biasa. Sangat ideal untuk feed berita, notifikasi, dan streaming AI. Mendukung rekoneksi otomatis secara native.
+- **WebSockets**: Dua arah. Ideal untuk aplikasi chat dan game. Membutuhkan penanganan koneksi persisten dan mekanisme ping/pong manual.
+
+#### 2. Streaming Respons AI
+Gunakan HTTP Streaming biasa (biasanya menggunakan `text/event-stream`) untuk merender kata demi kata dari AI tanpa perlu memelihara koneksi WebSocket yang kompleks.
+
+#### 3. Penskalaan (Scaling) WebSockets
+Saat aplikasi diskalakan ke beberapa server (horizontal scaling), pengguna yang terhubung ke Server A tidak akan menerima pesan dari pengguna di Server B. Anda WAJIB menggunakan Redis Pub/Sub (atau mekanisme message broker serupa) sebagai *backplane* agar semua server saling berkomunikasi.
+
+#### 4. Rekoneksi & Penanganan Kehilangan Data
+- Klien harus selalu mengirimkan kursor (misal: ID pesan terakhir yang diterima) saat melakukan rekoneksi.
+- Server menggunakan kursor tersebut untuk memutar ulang (replay) pesan yang terlewat selama klien terputus.
+
+## Integrasi Orkestrasi
+- Melengkapi `js-backend-expert` atau `go-programming-expert` dengan kemampuan push real-time.
+- Sangat penting bagi `gemini-agent-booster` saat membangun antarmuka chat AI.
+- Terintegrasi dengan `api-gateway-proxy-expert` (pastikan NGINX/proxy tidak melakukan *buffering* pada koneksi streaming).

package/skills/state-management-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: state-management-expert
 description: "Expert guide for modern client-side state management: Zustand, Jotai, Valtio, TanStack Store, Redux Toolkit, and server state patterns with TanStack Query / Panduan ahli untuk manajemen state client-side modern: Zustand, Jotai, Valtio, TanStack Store, Redux Toolkit, dan pola server state dengan TanStack Query."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # State Management Expert (Modern React Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <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
 Expert guide for selecting and implementing the right state management solution for React and Next.js applications. Covers **Zustand 5**, **Jotai 2**, **Valtio**, **TanStack Store**, and **Redux Toolkit 2**, with clear guidance on when to use each, proper separation of server state (TanStack Query) from client state, and advanced patterns like slices, persistence, and devtools integration.
 
@@ -251,6 +254,9 @@ export function StoreProvider({ children, initialUser }: Props) {
 <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
 Panduan ahli untuk memilih dan mengimplementasikan solusi manajemen state yang tepat untuk aplikasi React dan Next.js. Mencakup **Zustand 5**, **Jotai 2**, **Valtio**, dan **Redux Toolkit 2**, dengan panduan pemilihan yang jelas, pemisahan server state (TanStack Query) dari client state, dan pola lanjutan seperti slices, persistensi, dan integrasi devtools.
 

package/skills/supabase-security-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: supabase-security-expert
 description: "Supabase security expert to audit RLS (Row Level Security), RBAC, relational databases, prevent data leakage, and utilize Supabase Linter / Ahli keamanan Supabase untuk audit RLS (Row Level Security), RBAC, database relasional, pencegahan kebocoran data, dan pemanfaatan Supabase Linter."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Supabase Security Expert (2026 Edition — Auth v3 / PKCE)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <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
 Expert guide for auditing and hardening Supabase applications. Covers Row Level Security (RLS), Supabase Auth v3 (PKCE flow), API key hygiene, data leakage prevention, Supabase Linter, and production security checklists.
 
@@ -199,6 +202,9 @@ USING (bucket_id = 'user-uploads' AND auth.uid()::text = (storage.foldername(nam
 <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
 Panduan ahli untuk mengaudit dan mengeraskan aplikasi Supabase. Mencakup Row Level Security (RLS), Supabase Auth v3 (PKCE flow), kebersihan API key, pencegahan kebocoran data, Supabase Linter, dan checklist keamanan produksi.
 

package/skills/svelte-sveltekit-expert/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: svelte-sveltekit-expert
+description: "Expert guide for Svelte 5 (Runes) and SvelteKit 2+ — fine-grained reactivity, server-first architecture, form actions, and SSR/SSG / Panduan ahli Svelte 5 (Runes) dan SvelteKit 2+ — reaktivitas fine-grained, arsitektur server-first, form actions, dan SSR/SSG."
+author: "Roedy Rustam"
+---
+
+# Svelte & SvelteKit Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`tailwind-expert`**: Tailwind CSS v4 integration with SvelteKit.
+- **`performance-web-vitals`**: Svelte's compile-time optimizations and zero-overhead reactivity.
+- **`e2e-testing-expert`**: Playwright testing for SvelteKit applications.
+- **`typescript-expert`**: TypeScript integration with Svelte 5 Runes.
+
+### Description
+Expert guide for building high-performance applications with Svelte 5 and SvelteKit 2+. Covers Runes (`$state`, `$derived`, `$effect`, `$props`), server-first architecture, form actions, load functions, streaming, SSR/SSG/ISR rendering modes, and migration from Svelte 4.
+
+### Trigger Conditions
+- Building applications with Svelte or SvelteKit.
+- Migrating from Svelte 4 to Svelte 5 Runes.
+- Choosing between Svelte and React/Vue for a new project.
+- Implementing server-side rendering with SvelteKit.
+
+---
+
+### Svelte 5 Runes
+
+```svelte
+<script lang="ts">
+  // Svelte 5 Runes — fine-grained reactivity
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+
+  $effect(() => {
+    console.log(`Count changed to ${count}`);
+  });
+
+  // Props with Runes
+  let { title, onSubmit }: { title: string; onSubmit: (v: number) => void } = $props();
+</script>
+
+<h1>{title}</h1>
+<button onclick={() => count++}>Count: {count} (doubled: {doubled})</button>
+<button onclick={() => onSubmit(count)}>Submit</button>
+```
+
+### SvelteKit Server Patterns
+
+```typescript
+// src/routes/posts/+page.server.ts
+import type { PageServerLoad, Actions } from './$types';
+import { fail } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  const posts = await fetch('/api/posts').then((r) => r.json());
+  return { posts };
+};
+
+export const actions: Actions = {
+  create: async ({ request }) => {
+    const data = await request.formData();
+    const title = data.get('title');
+    if (!title) return fail(400, { error: 'Title required' });
+    // Create post...
+    return { success: true };
+  },
+};
+```
+
+## Orchestration & Integration
+- `tailwind-expert`, `performance-web-vitals`, `e2e-testing-expert`, `typescript-expert`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi berperforma tinggi dengan Svelte 5 dan SvelteKit 2+. Mencakup Runes, arsitektur server-first, form actions, load functions, streaming, dan mode rendering SSR/SSG/ISR.
+
+### Kondisi Pemicu
+- Membangun aplikasi dengan Svelte atau SvelteKit.
+- Migrasi dari Svelte 4 ke Svelte 5 Runes.
+- Memilih antara Svelte dan React/Vue untuk proyek baru.

package/skills/svg-animation-motion-expert/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: svg-animation-motion-expert
+description: "Expert guide for web animations: SVG manipulation, Framer Motion 12+, GSAP 3, CSS Scroll-Driven Animations, and View Transitions API / Panduan ahli animasi web."
+author: "Roedy Rustam"
+---
+
+# SVG & Web Animation Motion Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A dedicated skill for crafting fluid, high-performance web animations and micro-interactions. Covers direct SVG manipulation (paths, masks, clip-paths), React-based animations using Framer Motion 12+, advanced timeline choreography with GSAP 3, native CSS Scroll-Driven Animations, and the View Transitions API for seamless page navigations.
+
+### Trigger Conditions
+- When building complex landing page animations or scroll reveals.
+- When creating interactive SVG graphics, charts, or diagrams.
+- When the user asks for "buttery smooth", "apple-like", or "dynamic" interactions.
+- When implementing page transitions using the native View Transitions API.
+
+### Core Architecture & Guidelines
+
+#### 1. Framer Motion 12+ (React/Next.js)
+Use Framer Motion for declarative component animations, layout animations, and gesture-driven interactions.
+- **Layout Animations**: Use the `layout` prop to automatically animate between flexbox/grid state changes.
+- **Performance**: Use `style={{ x, y }}` with `useTransform` and `useScroll` instead of triggering React state updates on every frame.
+
+```tsx
+'use client'
+
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { useRef } from 'react'
+
+export function ScrollReveal({ children }: { children: React.ReactNode }) {
+  const ref = useRef(null)
+  const { scrollYProgress } = useScroll({ target: ref, offset: ['0 1', '1 1'] })
+  const y = useTransform(scrollYProgress, [0, 1], [100, 0])
+  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
+
+  return (
+    <motion.div ref={ref} style={{ y, opacity }}>
+      {children}
+    </motion.div>
+  )
+}
+```
+
+#### 2. GSAP 3 (Complex Choreography)
+Use GSAP when you need highly coordinated timeline sequences, path tracing, or when working outside of React (Vanilla JS).
+- **ScrollTrigger**: The industry standard for complex scroll-based animations.
+- **DrawSVG / MorphSVG**: Use for advanced SVG path drawing and morphing (requires Club GreenSock, use open-source alternatives if unavailable).
+
+#### 3. Native CSS Scroll-Driven Animations
+Where possible, leverage modern native CSS to tie animations to scroll position on the compositor thread for zero-JS performance.
+```css
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(100px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.reveal-on-scroll {
+  animation: slide-in linear both;
+  animation-timeline: view();
+  animation-range: entry 25% cover 50%;
+}
+```
+
+#### 4. SVG Optimization & Manipulation
+- Always run SVGs through SVGO to strip bloat before animating.
+- Keep `viewBox` responsive.
+- Target `<path>`, `<circle>`, and `<mask/>` elements via CSS vars or inline Framer Motion logic.
+
+## Orchestration & Integration
+- Works hand-in-hand with `ui-ux-pro-max` and `monday-design-aesthetic` to bring designs to life.
+- Complements `senior-frontend` by handling the motion layer of the UI.
+- Integrates with `seo-aeo-landing-page-writer` to build visually stunning landing pages.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill khusus untuk membuat animasi web dan interaksi mikro yang lancar dan berkinerja tinggi. Mencakup manipulasi SVG langsung, animasi berbasis React menggunakan Framer Motion 12+, koreografi timeline lanjutan dengan GSAP 3, CSS Scroll-Driven Animations native, dan View Transitions API.
+
+### Kondisi Pemicu
+- Saat membangun animasi landing page yang kompleks.
+- Saat membuat grafik, chart, atau diagram SVG interaktif.
+- Saat pengguna meminta interaksi yang "sangat mulus", "mirip Apple", atau "dinamis".
+- Saat mengimplementasikan transisi halaman menggunakan View Transitions API native.
+
+### Panduan Arsitektur Inti
+
+#### 1. Framer Motion 12+ (React/Next.js)
+Gunakan Framer Motion untuk animasi komponen deklaratif, animasi layout, dan interaksi gestur.
+- Hindari memicu pembaruan state React pada setiap frame animasi. Gunakan `useTransform` dan `useScroll` yang beroperasi di luar siklus render React untuk performa 60fps.
+
+#### 2. GSAP 3
+Gunakan GSAP untuk urutan timeline yang sangat terkoordinasi atau saat bekerja di luar ekosistem React. Plugin `ScrollTrigger` sangat berguna untuk merangkai aksi kompleks berdasarkan posisi scroll.
+
+#### 3. CSS Scroll-Driven Animations Native
+Manfaatkan CSS modern (`animation-timeline: view()`) untuk mengikat animasi ke posisi scroll langsung di compositor thread tanpa JavaScript sama sekali. Ini memberikan performa terbaik untuk efek paralaks dan reveal.
+
+#### 4. Manipulasi SVG
+- Selalu optimasi SVG (buang tag tidak perlu) sebelum dianimasikan.
+- Gunakan `<clipPath>` dan `<mask>` untuk transisi transisi pengungkapan gambar yang dramatis.
+
+## Integrasi Orkestrasi
+- Bekerja sama dengan `ui-ux-pro-max` dan `monday-design-aesthetic` untuk menghidupkan desain statis.
+- Melengkapi `senior-frontend` dengan menangani lapisan pergerakan (motion layer) UI.
+- Terintegrasi dengan `seo-aeo-landing-page-writer` untuk merancang landing page yang memukau secara visual.