vibes-plug 2.5.0 → 2.11.0

package/skills/{skill_baru → skill-baru}/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: skill-baru
 description: "Comprehensive template for creating new vibes-plug skills with proper structure, trigger conditions, and bilingual support / Template komprehensif untuk membuat skill vibes-plug baru dengan struktur yang tepat, kondisi pemicu, dan dukungan bilingual."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # [Skill Name] — vibes-plug Skill Template
@@ -11,7 +11,7 @@ author: "Roedy Rustam"
 ---
 
 > **HOW TO USE THIS TEMPLATE**
-> 1. Copy this entire folder (`skill_baru/`) and rename it using kebab-case (e.g., `my-new-skill/`).
+> 1. Copy this entire folder (`skill-baru/`) and rename it using kebab-case (e.g., `my-new-skill/`).
 > 2. Replace all placeholder text marked with `[...]` brackets.
 > 3. Update the frontmatter `name` and `description` fields above.
 > 4. Delete this instruction block before publishing.
@@ -22,6 +22,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
 [One paragraph describing the purpose and scope of this skill. Be specific about what problems it solves and what technology versions it targets.]
 
@@ -117,6 +120,9 @@ This skill should be referenced by the following orchestrators:
 <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
 [Satu paragraf menjelaskan tujuan dan ruang lingkup skill ini. Spesifik tentang masalah apa yang dipecahkan dan versi teknologi apa yang ditargetkan.]
 

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-migration/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: supabase-migration
 description: "A skill to create or apply a Supabase database migration / Kemampuan untuk membuat atau menerapkan migrasi database Supabase."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Supabase Migration Skill
@@ -26,6 +26,29 @@ When the user asks to create or apply a database migration for Supabase, follow
    - Run `npx supabase migration up` to test locally or use the remote MCP `apply_migration` if the user wants it applied remotely.
 4. **Final Step**: Confirm with the user that the migration successfully completed.
 
+### Implementation Checklist
+- [ ] Generate a new migration file: `npx supabase migration new [name]`
+- [ ] Write raw SQL in the generated migration file (DDL and DML).
+- [ ] Test the migration locally: `npx supabase db reset` or `npx supabase migration up`.
+- [ ] If using RLS, explicitly add policies to the new tables.
+- [ ] Commit the migration file to version control.
+
+### Example: Supabase Migration Command Flow
+```bash
+# 1. Create a new migration file
+npx supabase migration new create_users_table
+
+# 2. Write SQL to supabase/migrations/<timestamp>_create_users_table.sql
+# 3. Apply to local database
+npx supabase migration up
+
+# 4. Apply to remote production database
+npx supabase db push
+```
+
+## Orchestration & Integration
+- Integrates with: `supabase-security-expert`, `database-orm-expert`, `ci-cd-devops-architect`.
+
 ---
 
 <a name="bahasa-indonesia"></a>
@@ -43,3 +66,26 @@ Ketika pengguna meminta untuk membuat atau menerapkan migrasi database untuk Sup
    - Tulis skrip SQL ke file migrasi lokal yang terletak di `supabase/migrations/` menggunakan `write_to_file`. Gunakan timestamp standar atau perintah `supabase migration new` untuk mendapatkan nama file.
    - Jalankan `npx supabase migration up` untuk menguji secara lokal atau gunakan MCP remote `apply_migration` jika pengguna ingin menerapkannya secara remote.
 4. **Langkah Terakhir**: Konfirmasikan dengan pengguna bahwa migrasi telah berhasil diselesaikan.
+
+### Checklist Implementasi
+- [ ] Buat file migrasi baru: `npx supabase migration new [nama]`
+- [ ] Tulis SQL mentah di file migrasi yang dihasilkan (DDL dan DML).
+- [ ] Uji migrasi secara lokal: `npx supabase db reset` atau `npx supabase migration up`.
+- [ ] Jika menggunakan RLS, tambahkan kebijakan secara eksplisit ke tabel baru.
+- [ ] Commit file migrasi ke sistem kontrol versi.
+
+### Contoh: Alur Perintah Migrasi Supabase
+```bash
+# 1. Buat file migrasi baru
+npx supabase migration new create_users_table
+
+# 2. Tulis SQL ke supabase/migrations/<timestamp>_create_users_table.sql
+# 3. Terapkan ke database lokal
+npx supabase migration up
+
+# 4. Terapkan ke database remote produksi
+npx supabase db push
+```
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `supabase-security-expert`, `database-orm-expert`, `ci-cd-devops-architect`.

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.