vibes-plug 1.0.0

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

@@ -0,0 +1,272 @@
+---
+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"
+---
+
+# State Management Expert (Modern React Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### Trigger Conditions
+- Choosing a state management library for a new React/Next.js project.
+- Refactoring prop drilling or complex Context API usage.
+- Implementing global UI state (modals, drawers, theme, auth session).
+- Managing complex form state across multiple steps.
+- Implementing undo/redo, optimistic updates, or derived state.
+- Migrating from Redux to a lighter alternative.
+
+---
+
+### State Category Separation (Critical First Step)
+
+Before choosing a library, categorize your state:
+
+| Category | Description | Solution |
+|---|---|---|
+| **Server State** | Data from APIs, databases | TanStack Query / SWR |
+| **URL State** | Route params, search filters | `useSearchParams`, nuqs |
+| **Form State** | Input values, validation errors | React Hook Form + Zod |
+| **UI/Local State** | Modals, drawers, toggles | `useState` / `useReducer` |
+| **Global Client State** | Theme, auth, shopping cart | Zustand / Jotai |
+| **Cross-tab State** | Sync across browser tabs | Zustand + BroadcastChannel |
+
+**Rule**: Do NOT store server data in client state. Let TanStack Query own all async data.
+
+---
+
+### Library Selection Guide
+
+| Criteria | Zustand 5 | Jotai 2 | Valtio | Redux Toolkit |
+|---|---|---|---|---|
+| **Mental Model** | Single store, actions | Atomic, bottom-up | Proxy-based, mutable | Flux, reducers |
+| **Bundle Size** | ~1KB | ~3KB | ~3KB | ~15KB+ |
+| **DevTools** | Redux DevTools | Jotai DevTools | Redux DevTools | Built-in |
+| **Async** | Manual or middleware | `atomWithQuery` | `snapshot` | `createAsyncThunk` |
+| **Best For** | General global state | Atomic derived state | Simple mutable state | Large teams, strict patterns |
+
+**Recommendation**: Use **Zustand** as the default. Use **Jotai** for fine-grained reactive atoms. Use **Redux Toolkit** only for large enterprise teams with strict conventions.
+
+---
+
+### Zustand 5 — Best Practices
+
+#### Basic Store with TypeScript
+```typescript
+// stores/ui.store.ts
+import { create } from 'zustand';
+import { devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+interface UiState {
+  theme: 'light' | 'dark' | 'system';
+  sidebarOpen: boolean;
+  activeModal: string | null;
+  setTheme: (theme: UiState['theme']) => void;
+  toggleSidebar: () => void;
+  openModal: (modalId: string) => void;
+  closeModal: () => void;
+}
+
+export const useUiStore = create<UiState>()(
+  devtools(
+    persist(
+      subscribeWithSelector(
+        immer((set) => ({
+          theme: 'system',
+          sidebarOpen: true,
+          activeModal: null,
+          setTheme: (theme) => set((state) => { state.theme = theme; }),
+          toggleSidebar: () => set((state) => { state.sidebarOpen = !state.sidebarOpen; }),
+          openModal: (modalId) => set((state) => { state.activeModal = modalId; }),
+          closeModal: () => set((state) => { state.activeModal = null; }),
+        }))
+      ),
+      { name: 'ui-store', partialize: (s) => ({ theme: s.theme }) }
+    ),
+    { name: 'UiStore' }
+  )
+);
+```
+
+#### Slice Pattern for Large Stores
+```typescript
+// Pattern: separate slices, combine into one store
+import { StateCreator } from 'zustand';
+
+interface AuthSlice {
+  user: User | null;
+  isAuthenticated: boolean;
+  login: (user: User) => void;
+  logout: () => void;
+}
+
+interface CartSlice {
+  items: CartItem[];
+  addItem: (item: CartItem) => void;
+  removeItem: (id: string) => void;
+  total: () => number;
+}
+
+type AppStore = AuthSlice & CartSlice;
+
+const createAuthSlice: StateCreator<AppStore, [], [], AuthSlice> = (set) => ({
+  user: null,
+  isAuthenticated: false,
+  login: (user) => set({ user, isAuthenticated: true }),
+  logout: () => set({ user: null, isAuthenticated: false }),
+});
+
+const createCartSlice: StateCreator<AppStore, [], [], CartSlice> = (set, get) => ({
+  items: [],
+  addItem: (item) => set((s) => ({ items: [...s.items, item] })),
+  removeItem: (id) => set((s) => ({ items: s.items.filter((i) => i.id !== id) })),
+  total: () => get().items.reduce((sum, item) => sum + item.price * item.qty, 0),
+});
+
+export const useAppStore = create<AppStore>()(
+  devtools((...args) => ({
+    ...createAuthSlice(...args),
+    ...createCartSlice(...args),
+  }))
+);
+```
+
+#### Selective Subscriptions (Prevent Unnecessary Rerenders)
+```typescript
+// Only re-render when `theme` changes, not the entire store
+const theme = useUiStore((s) => s.theme);
+const isModalOpen = useUiStore((s) => s.activeModal === 'confirm-delete');
+
+// Subscribe outside React (side effects, non-component code)
+useUiStore.subscribe(
+  (s) => s.theme,
+  (theme) => document.documentElement.dataset.theme = theme,
+  { fireImmediately: true }
+);
+```
+
+---
+
+### Jotai 2 — Atomic State Patterns
+
+```typescript
+// atoms/user.atoms.ts
+import { atom, loadable } from 'jotai';
+import { atomWithStorage, atomWithReset } from 'jotai/utils';
+
+// Primitive atom
+export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light');
+
+// Derived (read-only) atom
+export const isDarkAtom = atom((get) => get(themeAtom) === 'dark');
+
+// Async atom with loadable for Suspense-free usage
+export const userAtom = atom(async () => {
+  const res = await fetch('/api/me');
+  if (!res.ok) throw new Error('Failed to fetch user');
+  return res.json() as Promise<User>;
+});
+
+export const loadableUserAtom = loadable(userAtom);
+
+// In component:
+function UserWidget() {
+  const loadableUser = useAtomValue(loadableUserAtom);
+  if (loadableUser.state === 'loading') return <Spinner />;
+  if (loadableUser.state === 'hasError') return <Error />;
+  return <div>{loadableUser.data.name}</div>;
+}
+```
+
+---
+
+### Redux Toolkit 2 — Modern Patterns
+
+```typescript
+// features/cart/cartSlice.ts
+import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit';
+
+interface CartState {
+  items: CartItem[];
+  status: 'idle' | 'loading' | 'failed';
+}
+
+const cartSlice = createSlice({
+  name: 'cart',
+  initialState: { items: [], status: 'idle' } as CartState,
+  reducers: {
+    addItem(state, action: PayloadAction<CartItem>) {
+      state.items.push(action.payload); // Immer handles immutability
+    },
+    removeItem(state, action: PayloadAction<string>) {
+      state.items = state.items.filter((i) => i.id !== action.payload);
+    },
+  },
+});
+
+// Memoized selector
+export const selectCartTotal = createSelector(
+  (state: RootState) => state.cart.items,
+  (items) => items.reduce((sum, i) => sum + i.price * i.qty, 0)
+);
+
+export const { addItem, removeItem } = cartSlice.actions;
+export default cartSlice.reducer;
+```
+
+---
+
+### Integration with Next.js App Router
+
+- **Server Components**: No client state. Fetch directly.
+- **Client Components**: Use Zustand/Jotai wrapped in providers.
+- **Hydration**: Initialize Zustand store from server-fetched data using `useHydrateAtoms` (Jotai) or a `HydrationBoundary` pattern.
+
+```typescript
+// providers/store-provider.tsx (App Router pattern)
+'use client';
+import { createStore, Provider } from 'jotai';
+import { useRef } from 'react';
+
+type Props = { children: React.ReactNode; initialUser?: User };
+
+export function StoreProvider({ children, initialUser }: Props) {
+  const store = useRef(createStore());
+  if (initialUser) store.current.set(userAtom, initialUser);
+  return <Provider store={store.current}>{children}</Provider>;
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### Kondisi Pemicu
+- Memilih library state management untuk proyek React/Next.js baru.
+- Refaktor prop drilling atau penggunaan Context API yang rumit.
+- Mengimplementasikan global UI state (modal, drawer, tema, sesi auth).
+- Mengelola state form kompleks di beberapa langkah.
+- Mengimplementasikan undo/redo, optimistic update, atau derived state.
+- Migrasi dari Redux ke alternatif yang lebih ringan.
+
+### Prinsip Utama
+
+- **Pisahkan server state dari client state**: Server state (data dari API) dikelola TanStack Query. Client state (UI, preferensi) dikelola Zustand/Jotai.
+- **Gunakan Zustand sebagai default** untuk state global umum.
+- **Gunakan Jotai** untuk state atomik yang sangat granular dan reaktif.
+- **Hindari menyimpan data server di client state** — ini adalah sumber bug terbesar di aplikasi React.
+- **Selective subscription**: Selalu gunakan selector untuk menghindari re-render yang tidak perlu.
+- **DevTools**: Selalu integrasikan devtools di development untuk debugging yang efektif.

package/skills/supabase-migration/SKILL.md

@@ -0,0 +1,45 @@
+---
+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"
+---
+
+# Supabase Migration Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+When the user asks to create or apply a database migration for Supabase, follow these instructions:
+
+### Instructions
+1. **Check Environment**: Ensure `supabase/migrations` directory exists. Run `list_dir` on it if needed.
+2. **Review Available MCP Commands**: Utilize the Supabase MCP integration.
+   - For listing existing migrations, use `mcp_supabase-mcp-server_list_migrations` with `project_id`.
+   - Before executing migration queries on the server directly, confirm the SQL is correct.
+3. **Execute Command**: 
+   - Write the SQL script to a local migration file located in `supabase/migrations/` using `write_to_file`. Use standard timestamps or `supabase migration new` command to get the filename.
+   - 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.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Ketika pengguna meminta untuk membuat atau menerapkan migrasi database untuk Supabase, ikuti instruksi berikut:
+
+### Instruksi
+1. **Periksa Lingkungan**: Pastikan direktori `supabase/migrations` ada. Jalankan `list_dir` jika diperlukan.
+2. **Tinjau Perintah MCP yang Tersedia**: Manfaatkan integrasi Supabase MCP.
+   - Untuk mencantumkan migrasi yang ada, gunakan `mcp_supabase-mcp-server_list_migrations` dengan `project_id`.
+   - Sebelum menjalankan kueri migrasi di server secara langsung, pastikan kode SQL-nya sudah benar.
+3. **Jalankan Perintah**:
+   - 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.

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

@@ -0,0 +1,243 @@
+---
+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"
+---
+
+# Supabase Security Expert (2026 Edition — Auth v3 / PKCE)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### Trigger Conditions
+- Auditing RLS policies for correctness and security gaps.
+- Setting up Supabase Auth v3 with PKCE flow (replaces implicit flow).
+- Reviewing API key usage (anon key vs. service role key).
+- Preventing data leakage from misconfigured policies.
+- Running Supabase Linter (`supabase lint`) for automated security checks.
+- Implementing user roles and access control in a Supabase project.
+
+### Supabase Auth v3 — PKCE Flow (2026 Default)
+
+Supabase Auth v3 now uses **PKCE (Proof Key for Code Exchange)** as the default flow for all OAuth and magic link authentication — replacing the older implicit flow:
+
+```typescript
+// supabase/client.ts — v3 client setup
+import { createBrowserClient } from '@supabase/ssr';
+
+export const supabase = createBrowserClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  {
+    auth: {
+      flowType: 'pkce', // Default in Auth v3
+      autoRefreshToken: true,
+      persistSession: true,
+      detectSessionInUrl: true,
+    }
+  }
+);
+```
+
+```typescript
+// Server-side session handling (Next.js App Router)
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+export async function createSupabaseServerClient() {
+  const cookieStore = await cookies();
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll: () => cookieStore.getAll(),
+        setAll: (cookiesToSet) => {
+          cookiesToSet.forEach(({ name, value, options }) =>
+            cookieStore.set(name, value, options)
+          );
+        },
+      },
+    }
+  );
+}
+```
+
+### API Key Security
+
+| Key Type | Purpose | Where to Use |
+|---|---|---|
+| `anon` key | Public client access — restricted by RLS | Frontend (browser) |
+| `service_role` key | Bypasses ALL RLS | Backend only (server) |
+
+> ⚠️ **NEVER** expose `service_role` key to the frontend. If it leaks, an attacker can read/write all data in your database, bypassing RLS completely.
+
+```typescript
+// ✅ CORRECT: service_role used only in server-side code
+// app/api/admin/route.ts (only accessible at admin.domain.com)
+import { createClient } from '@supabase/supabase-js';
+
+const adminClient = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.SUPABASE_SERVICE_ROLE_KEY!, // NOT exposed to client
+);
+
+// 🔴 WRONG: service_role in client-side code
+const publicClient = createBrowserClient(url, process.env.SUPABASE_SERVICE_ROLE_KEY!);
+```
+
+### RLS Policy Audit Checklist
+
+#### Common RLS Mistakes
+```sql
+-- 🔴 INSECURE: auth.uid() is not validated — returns null if not authenticated
+CREATE POLICY "users can see own data" ON profiles
+FOR SELECT USING (user_id = auth.uid());
+-- If user is unauthenticated, auth.uid() returns null, which means 
+-- NULL = NULL is NULL (falsy in SQL) — so this IS secure... but next one isn't:
+
+-- 🔴 DANGEROUS: Using 'true' without auth check
+CREATE POLICY "all can read" ON public_posts
+FOR SELECT USING (true);  -- Anyone, including anonymous, can read
+
+-- ✅ SECURE: Explicit authentication requirement
+CREATE POLICY "only authenticated users can read" ON sensitive_data
+FOR SELECT USING (auth.role() = 'authenticated');
+
+-- ✅ SECURE: Workspace isolation with auth check
+CREATE POLICY "workspace isolation" ON projects
+FOR ALL USING (
+  workspace_id IN (
+    SELECT workspace_id FROM workspace_members
+    WHERE user_id = auth.uid()
+  )
+);
+```
+
+#### RLS Audit SQL Queries
+```sql
+-- Find tables WITHOUT RLS enabled
+SELECT schemaname, tablename
+FROM pg_tables
+WHERE schemaname = 'public'
+  AND tablename NOT IN (
+    SELECT tablename FROM pg_policies WHERE schemaname = 'public'
+  );
+
+-- Find tables with RLS enabled but NO policies (effectively blocks all access)
+SELECT c.relname AS table_name, c.relrowsecurity AS rls_enabled
+FROM pg_class c
+JOIN pg_namespace n ON n.oid = c.relnamespace
+WHERE n.nspname = 'public'
+  AND c.relkind = 'r'
+  AND c.relrowsecurity = true
+  AND NOT EXISTS (
+    SELECT 1 FROM pg_policies p
+    WHERE p.tablename = c.relname AND p.schemaname = n.nspname
+  );
+```
+
+### Supabase Linter
+Run automated security checks:
+```bash
+# Install Supabase CLI
+npm install -g supabase
+
+# Run the linter against your project
+supabase db lint --project-id <your-project-id>
+
+# Common lint checks:
+# - Tables with RLS disabled
+# - Policies using mutable functions (NOW(), RANDOM())
+# - Security definer functions without search_path
+# - Auth functions used incorrectly
+```
+
+### Storage Security
+```typescript
+// Create a private storage bucket (files not publicly accessible by URL)
+const { data, error } = await supabase.storage.createBucket('user-uploads', {
+  public: false,  // Private — requires signed URLs
+  fileSizeLimit: 10 * 1024 * 1024, // 10MB
+  allowedMimeTypes: ['image/jpeg', 'image/png', 'application/pdf'],
+});
+
+// Generate a signed URL (expires in 1 hour)
+const { data: { signedUrl } } = await supabase.storage
+  .from('user-uploads')
+  .createSignedUrl(`${userId}/${filename}`, 3600);
+```
+
+```sql
+-- Storage RLS: users can only access their own files
+CREATE POLICY "users can manage own files"
+ON storage.objects FOR ALL
+USING (bucket_id = 'user-uploads' AND auth.uid()::text = (storage.foldername(name))[1]);
+```
+
+### Production Security Checklist
+- [ ] All tables in `public` schema have RLS enabled.
+- [ ] `service_role` key is only in server-side environment variables.
+- [ ] PKCE flow enabled (`flowType: 'pkce'`) in Auth v3 client.
+- [ ] Storage buckets are private by default.
+- [ ] JWT expiry set appropriately (recommended: 1 hour + refresh tokens).
+- [ ] Email confirmations required for new signups.
+- [ ] Supabase Linter (`supabase db lint`) passes with no critical issues.
+- [ ] MFA (Multi-Factor Authentication) enabled for admin users.
+- [ ] Realtime subscriptions restricted — filter by authenticated user.
+- [ ] Custom `auth.uid()` policies tested with anonymous/different user sessions.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### Kondisi Pemicu
+- Mengaudit kebijakan RLS untuk kebenaran dan celah keamanan.
+- Menyiapkan Supabase Auth v3 dengan PKCE flow (menggantikan implicit flow).
+- Meninjau penggunaan API key (anon key vs. service role key).
+- Mencegah kebocoran data dari kebijakan yang salah konfigurasi.
+- Menjalankan Supabase Linter untuk pemeriksaan keamanan otomatis.
+
+### Supabase Auth v3 — PKCE Flow (Default 2026)
+
+Supabase Auth v3 menggunakan **PKCE** sebagai alur default untuk semua OAuth dan magic link — menggantikan implicit flow yang lama. Konfigurasikan dengan `flowType: 'pkce'` di klien browser dan gunakan `@supabase/ssr` untuk penanganan sesi sisi server di Next.js App Router.
+
+### Keamanan API Key
+
+| Tipe Key | Tujuan | Tempat Penggunaan |
+|---|---|---|
+| `anon` key | Akses klien publik — dibatasi RLS | Frontend (browser) |
+| `service_role` key | Melewati SEMUA RLS | Hanya backend (server) |
+
+> ⚠️ **JANGAN PERNAH** mengekspos `service_role` key ke frontend. Jika bocor, penyerang dapat membaca/menulis semua data di database Anda, melewati RLS sepenuhnya.
+
+### Audit Kebijakan RLS
+
+Kesalahan RLS umum: menggunakan `USING (true)` tanpa pemeriksaan autentikasi (siapa saja, termasuk anonim, dapat membaca). Selalu verifikasi dengan `auth.role() = 'authenticated'` atau cek `auth.uid()` eksplisit.
+
+Gunakan query audit SQL untuk menemukan tabel tanpa RLS dan tabel dengan RLS aktif tetapi tanpa kebijakan (memblokir semua akses).
+
+### Supabase Linter
+Jalankan `supabase db lint` untuk pemeriksaan keamanan otomatis: tabel dengan RLS dinonaktifkan, kebijakan menggunakan fungsi yang dapat dimutasi, fungsi security definer tanpa `search_path`.
+
+### Keamanan Storage
+Buat bucket penyimpanan privat (`public: false`) dengan batasan ukuran file dan tipe MIME yang diizinkan. Gunakan URL bertanda tangan (signed URL) untuk memberikan akses sementara ke file privat. Terapkan RLS di `storage.objects` untuk memastikan pengguna hanya dapat mengakses file mereka sendiri.
+
+### Checklist Keamanan Produksi
+- Semua tabel di schema `public` mengaktifkan RLS.
+- `service_role` key hanya di variabel lingkungan sisi server.
+- PKCE flow diaktifkan di klien Auth v3.
+- Bucket storage privat secara default.
+- Supabase Linter tidak ada isu kritis.
+- MFA diaktifkan untuk pengguna admin.