vibes-plug 2.5.0 → 2.14.1

package/skills/ui-components-expert/SKILL.md

@@ -1,280 +0,0 @@
----
-name: ui-components-expert
-description: "Expert guide for building production-quality UI components following the 4 pillars: Input Controls, Navigation, Information, and Containers. Covers React 19, Radix UI, shadcn/ui, accessibility (WCAG 2.2), and modern interaction patterns / Panduan ahli membangun komponen UI berkualitas produksi dengan 4 pilar: Kontrol Input, Navigasi, Informasi, dan Kontainer."
-author: "Roedy Rustam"
----
-
-# 🎨 UI Components Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Expert guide for evaluating, auditing, and building production-quality UI components in 2026. Covers the **4 pillars of UI components** with modern tooling: **shadcn/ui**, **Radix UI**, **Base UI**, **React 19 patterns**, **WCAG 2.2 accessibility**, and micro-interaction design. Use this skill when building, reviewing, or improving any interactive UI element.
-
-### Trigger Conditions
-- Building or reviewing UI components: buttons, forms, modals, navigation, tooltips, notifications.
-- Implementing accessible components with ARIA patterns and keyboard navigation.
-- Auditing existing components against WCAG 2.2 and interaction design standards.
-- Setting up a component library with **shadcn/ui**, **Radix UI**, or **Base UI**.
-- Adding micro-interactions, hover states, focus rings, and animation to components.
-
----
-
-### Component Stack Recommendation (2026)
-
-| Layer | Tool | Purpose |
-|---|---|---|
-| **Headless Primitives** | Radix UI / Base UI (MUI) | Accessibility, behavior, no styles |
-| **Component Library** | shadcn/ui (copy-paste) | Pre-styled, customizable, owns the code |
-| **Styling** | Tailwind CSS v4 | Utility-first, design tokens via `@theme` |
-| **Animation** | Motion (Framer Motion v12) | Spring physics, layout animations |
-| **Icons** | Lucide React | Consistent, tree-shakeable icon set |
-| **Forms** | React Hook Form + Zod | Type-safe, performant form state |
-
----
-
-### The 4 Pillars of UI Components
-
-#### Pillar 1: Input Controls
-Components that capture user intent and data.
-*Examples: Buttons, Checkboxes, Radio Groups, Text Fields, Selects, Switches, Sliders, Date Pickers*
-
-**Best Practices:**
-- **Clear Visual States**: Every input must have distinct `default`, `hover`, `active`, `focus`, `disabled`, and `error` states.
-- **Touch Target Sizes**: Minimum 44×44px (WCAG 2.5.8) for all interactive elements on mobile.
-- **Immediate Feedback**: Provide visual/haptic feedback on interaction — ripple, color change, or animation.
-- **Inline Validation**: Show error messages immediately after blur, not only on submit. Use `aria-invalid` and `aria-describedby` for screen readers.
-- **React Hook Form + Zod Pattern**:
-```tsx
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const schema = z.object({
-  email: z.string().email('Invalid email address'),
-  name: z.string().min(2, 'Name must be at least 2 characters'),
-});
-
-export function UserForm() {
-  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({
-    resolver: zodResolver(schema),
-  });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div>
-        <input
-          {...register('email')}
-          aria-invalid={!!errors.email}
-          aria-describedby={errors.email ? 'email-error' : undefined}
-          className="..."
-        />
-        {errors.email && (
-          <p id="email-error" role="alert" className="text-destructive text-sm">
-            {errors.email.message}
-          </p>
-        )}
-      </div>
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? 'Saving...' : 'Save'}
-      </button>
-    </form>
-  );
-}
-```
-
----
-
-#### Pillar 2: Navigation
-Components that help users move through the application structure.
-*Examples: Navbars, Tabs, Breadcrumbs, Pagination, Sidebars, Dropdowns, Command Palettes*
-
-**Best Practices:**
-- **Active State Clarity**: Always indicate the current location with a high-contrast visual indicator (filled background, underline, bold text). Never use color alone.
-- **Keyboard Navigation**: Tabs must support Arrow Keys; menus must support `Escape` to close; focus must be managed on open/close.
-- **Responsive Patterns**: Use bottom navigation on mobile (<768px), collapsible sidebar on tablet, full sidebar on desktop.
-- **Command Palette (2026 Standard)**: Add `⌘K` / `Ctrl+K` command palette for power users using `cmdk` library.
-- **`<Link>` with View Transitions** (Next.js 15):
-```tsx
-import Link from 'next/link';
-
-// Enables smooth page transitions
-<Link href="/dashboard" viewTransition>
-  Dashboard
-</Link>
-```
-- **ARIA Roles**: Use `role="navigation"` with `aria-label` on `<nav>`. Mark current page with `aria-current="page"`.
-
----
-
-#### Pillar 3: Information & Feedback
-Components that display status, guidance, or alerts to users.
-*Examples: Toast Notifications, Tooltips, Badges, Alert Banners, Progress Bars, Skeletons, Empty States*
-
-**Best Practices:**
-- **Contextual Color System**: Use semantic colors consistently — green (success), red (error/destructive), yellow (warning), blue (info).
-- **Toast Notifications**: Use **Sonner** (lightweight, accessible) — limit to 3 concurrent toasts, auto-dismiss success in 4s, keep errors until dismissed.
-- **Skeleton Loading**: Prefer skeletons over spinners for content areas — they reduce perceived load time and prevent layout shift (CLS).
-```tsx
-// Sonner toast
-import { toast } from 'sonner';
-
-toast.success('Profile updated!');
-toast.error('Something went wrong', { description: 'Please try again.' });
-toast.promise(saveProfile(), {
-  loading: 'Saving...',
-  success: 'Saved!',
-  error: 'Failed to save',
-});
-```
-- **Empty States**: Never show blank areas — provide illustration, explanation, and a clear CTA.
-- **`aria-live` for Dynamic Content**: Use `aria-live="polite"` for non-urgent updates, `aria-live="assertive"` for critical errors.
-
----
-
-#### Pillar 4: Containers & Layout
-Components that group related content into structured visual units.
-*Examples: Cards, Modals (Dialogs), Sheets (Drawers), Accordions, Tabs, Carousels, Popover*
-
-**Best Practices:**
-- **Modal/Dialog (Radix UI)**:
-```tsx
-import * as Dialog from '@radix-ui/react-dialog';
-
-export function ConfirmDialog({ onConfirm }: { onConfirm: () => void }) {
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button>Delete Account</button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm animate-in fade-in" />
-        <Dialog.Content
-          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background rounded-xl shadow-2xl p-6 w-[400px] animate-in fade-in zoom-in-95"
-          aria-describedby="dialog-description"
-        >
-          <Dialog.Title className="text-lg font-semibold">Are you sure?</Dialog.Title>
-          <Dialog.Description id="dialog-description" className="text-muted-foreground mt-2">
-            This action cannot be undone.
-          </Dialog.Description>
-          <div className="flex gap-3 mt-6 justify-end">
-            <Dialog.Close asChild>
-              <button className="btn-secondary">Cancel</button>
-            </Dialog.Close>
-            <button onClick={onConfirm} className="btn-destructive">Delete</button>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
-```
-- **Focus Trap**: Radix UI handles focus trapping automatically inside dialogs.
-- **Scroll Lock**: Lock body scroll when modal is open — Radix handles this.
-- **Card Design**: Use subtle shadows + borders for elevation. Never use heavy drop shadows on cards in light mode.
-- **Sheet/Drawer**: Use for mobile-first secondary actions. Prefer bottom sheet on mobile, side sheet on desktop.
-
----
-
-### Micro-Interaction Checklist (Next-Gen)
-These small details separate premium from basic UI:
-- [ ] All interactive elements have `:focus-visible` ring (2px, brand color).
-- [ ] Buttons have loading state with spinner + disabled state.
-- [ ] Form fields animate error shake on invalid submit.
-- [ ] **Physics-Based Animation**: Do not rely solely on linear `ease-in-out`. Use Framer Motion (v12) `spring` physics (`stiffness: 300, damping: 20`) for modals, popovers, and interactive elements to provide a natural, snappy feel.
-- [ ] Hover transitions on simple buttons use `transition-all duration-200 ease-out`.
-- [ ] Modals animate in with fade + scale: `animate-in fade-in zoom-in-95`.
-- [ ] List items stagger-animate when rendered (use Motion `stagger`).
-- [ ] Skeleton loaders match the exact layout of the content they replace.
-- [ ] Dark mode tested for all states (especially error/warning colors).
-
-### Accessibility (WCAG 2.2) Quick Reference
-| Criterion | Requirement |
-|---|---|
-| **1.4.3** | Text contrast ≥4.5:1 (normal), ≥3:1 (large/bold) |
-| **2.5.8** | Touch target ≥24×24px (min), 44×44px (recommended) |
-| **2.4.7** | Focus indicator visible on all interactive elements |
-| **2.4.11** | Focus not obscured by sticky headers |
-| **3.2.2** | No unexpected context change on input |
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk mengevaluasi, mengaudit, dan membangun komponen UI berkualitas produksi di 2026. Mencakup **4 pilar komponen UI** dengan tooling modern: **shadcn/ui**, **Radix UI**, **Base UI**, **pola React 19**, **aksesibilitas WCAG 2.2**, dan desain micro-interaction. Gunakan skill ini saat membangun, me-review, atau meningkatkan elemen UI interaktif apapun.
-
-### Kondisi Pemicu
-- Membangun atau me-review komponen UI: tombol, form, modal, navigasi, tooltip, notifikasi.
-- Mengimplementasikan komponen aksesibel dengan pola ARIA dan navigasi keyboard.
-- Mengaudit komponen yang ada terhadap standar WCAG 2.2 dan desain interaksi.
-- Menyiapkan library komponen dengan shadcn/ui, Radix UI, atau Base UI.
-- Menambahkan micro-interaction, hover state, focus ring, dan animasi ke komponen.
-
-### QA Visual Mandatori (KRITIS)
-- **Siklus Verifikasi Visual**: Anda DILARANG KERAS menyelesaikan komponen UI tanpa mengambil screenshot menggunakan `browser_subagent` dan menganalisisnya via `visual-qa-vision-agent`.
-- **Standar Pixel-Perfect**: Jangan menebak padding/margin. Ambil gambar, analisis dengan kemampuan Vision Anda, dan koreksi pergeseran tata letak hingga sempurna.
-
-### Stack Komponen Rekomendasi (2026)
-- **Headless Primitives**: Radix UI / Base UI — aksesibilitas dan behavior tanpa style.
-- **Library Komponen**: shadcn/ui — pre-styled, customizable, kode dimiliki sendiri.
-- **Styling**: Tailwind CSS v4 — utility-first dengan design token via `@theme`.
-- **Animasi**: Motion (Framer Motion v12) — spring physics, layout animations.
-- **Form**: React Hook Form + Zod — type-safe, performa tinggi.
-
-### 4 Pilar Komponen UI
-
-#### Pilar 1: Kontrol Input
-Komponen yang menangkap input dan data pengguna (tombol, form, checkbox, select, switch).
-
-**Best Practices:**
-- Setiap input harus memiliki state visual yang jelas: `default`, `hover`, `active`, `focus`, `disabled`, `error`.
-- Ukuran touch target minimal 44×44px untuk elemen interaktif di mobile.
-- Validasi inline dengan pesan error yang muncul setelah blur, bukan hanya saat submit.
-- Gunakan `aria-invalid` dan `aria-describedby` untuk screen reader.
-- Gunakan **React Hook Form + Zod** untuk form yang type-safe dan berperforma tinggi.
-
-#### Pilar 2: Navigasi
-Komponen yang membantu pengguna bergerak dalam struktur aplikasi (navbar, tab, breadcrumb, sidebar, command palette).
-
-**Best Practices:**
-- Selalu tunjukkan lokasi saat ini dengan indikator visual yang jelas (background, garis bawah, teks tebal).
-- Navigasi keyboard wajib: Arrow Keys untuk tab/menu, Escape untuk menutup, fokus terkelola saat buka/tutup.
-- Gunakan bottom navigation di mobile, sidebar di desktop.
-- Tambahkan command palette `⌘K` untuk power user menggunakan library `cmdk`.
-- Tandai halaman aktif dengan `aria-current="page"`.
-
-#### Pilar 3: Informasi & Feedback
-Komponen yang menampilkan status, panduan, atau peringatan (toast, tooltip, badge, skeleton, empty state).
-
-**Best Practices:**
-- Warna semantik yang konsisten: hijau (sukses), merah (error), kuning (peringatan), biru (info).
-- Gunakan **Sonner** untuk toast notifikasi — ringan dan aksesibel.
-- Gunakan skeleton loader (bukan spinner) untuk area konten guna mengurangi perceived load time.
-- Selalu sediakan empty state dengan ilustrasi, penjelasan, dan CTA yang jelas.
-- Gunakan `aria-live="polite"` untuk pembaruan konten dinamis.
-
-#### Pilar 4: Kontainer & Layout
-Komponen yang mengelompokkan konten terkait (card, modal/dialog, sheet/drawer, accordion, popover).
-
-**Best Practices:**
-- Gunakan **Radix UI Dialog** untuk modal — menangani focus trap, scroll lock, dan aksesibilitas secara otomatis.
-- Animasikan modal dengan fade + scale: `animate-in fade-in zoom-in-95`.
-- Gunakan shadow tipis + border untuk elevasi card. Hindari drop shadow berat di mode terang.
-- Gunakan bottom sheet di mobile, side sheet di desktop untuk aksi sekunder.
-
-### Checklist Micro-Interaction (Next-Gen)
-Detail kecil yang membedakan UI premium dari yang biasa:
-- [ ] Semua elemen interaktif memiliki `:focus-visible` ring (2px, warna brand).
-- [ ] Tombol memiliki loading state dengan spinner + disabled state.
-- [ ] **Animasi Fisika (Spring)**: Hindari transisi linier kaku. Gunakan Framer Motion (v12) `spring` (`stiffness: 300, damping: 20`) pada interaksi klik, modal, dan dropdown agar terasa alami dan sangat responsif.
-- [ ] Hover transition sederhana menggunakan `transition-all duration-200 ease-out`.
-- [ ] Modal dan drawer muncul dengan animasi fade + scale yang mulus.
-- [ ] Skeleton loader sesuai persis dengan layout konten yang digantikan.
-- [ ] Dark mode diuji untuk semua state (terutama warna error/warning).

package/skills/ui_ux_expert/SKILL.md

@@ -1,125 +0,0 @@
----
-name: ui-ux-expert
-description: "UI/UX Designer & Frontend Specialist / UI/UX Designer & Spesialis Frontend."
-author: "Roedy Rustam"
----
-
-# UI/UX Expert
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-This skill establishes Antigravity as a **UI/UX Designer & Frontend Specialist** focusing on building responsive web applications for Desktop and Tablet (landscape 1080x720 px). Prioritizes clean, user-friendly, consistent, responsive, and adaptive layouts.
-
-### Trigger Conditions
-Active when the user requests help with:
-- UI/UX Design.
-- Layouts and grid systems.
-- Designing responsive web components.
-- Frontend development (HTML/CSS/JS).
-- Creating wireframes or mockups.
-
-### UI (User Interface) Skills
-- **Layout & Grid**: Use CSS Grid/Flexbox, max container width of 1080px, and consistent spacing (8px system).
-- **Typography**: Maximum 2–3 fonts with clear hierarchy (H1: 24–32px, H2: 18–24px, Body: 14–16px).
-- **Color System**: Define Primary, Secondary, and Neutral colors with proper WCAG contrast accessibility.
-- **Reusable Components**: Design modular buttons, cards, navbars, form inputs, and modals.
-
-### UX (User Experience) Skills
-- **Responsiveness Strategy**: Focus breakpoints on Desktop (≥1080px) and Tablet Landscape (768px – 1080px).
-- **Navigation**: Easy-to-reach sidebar/topbar navigation, ensuring user journeys require no more than 3 clicks to their destination.
-- **Usability & Interaction**: Prioritize simplicity and clarity. Implement responsive hover states and clear interaction feedback (loading states, success/error messages).
-- **Cognitive Load Reduction**: Implement Progressive Disclosure. Do not overwhelm the user with all settings/buttons at once. Hide advanced features behind "Advanced" accordions or dropdowns.
-
-### Modern SaaS Design Guidelines (Next-Gen Aesthetic)
-- **Visual Aesthetic**: Move beyond flat design. Implement Premium styles like **Glassmorphism** (translucent backgrounds with `backdrop-blur-md`), dynamic Aurora gradients, or Bento Grid layouts. Backgrounds should feel spatial and alive.
-- **Typography**: Geometric sans-serif fonts with high contrast (extra-bold 48-60px for hero, medium 16-18px for body in muted gray `#676879`).
-- **Components**: Rounded corners for buttons (~8px) and large radius for cards (~12-16px) with subtle drop shadows (`shadow-sm` to `shadow-xl` for elevation).
-- **Layout Flow**: Centered content with a max-width of 1200-1400px and very generous vertical section padding (80-120px) to create a premium feel.
-
-### Modern & Professional Dashboard Design Guidelines
-- **Dashboard Layout**: 
-  - **Sidebar**: Collapsible navigation bar (240px–280px width open, 64px–80px collapsed). Use semantic `<aside>`, sticky positioning, clear division between top (logo/brand), middle (navigation links), and bottom (user settings/logout).
-  - **Header (Topbar)**: Sticky header with breadcrumbs, search, notification icon, and profile menu.
-  - **Main Content**: Structured layout utilizing CSS Grid or Flexbox, max-width wrapper, and consistent padding (e.g., 24px/p-6).
-- **Metric Cards (KPIs)**:
-  - Place primary metric summaries at the top (usually 3–4 columns grid).
-  - Structure: Label (subtle gray), Value (large, bold/semibold, e.g., 24px–32px), Trend Indicator (green positive percentage with arrow up, red negative percentage with arrow down, or gray neutral), and an optional descriptive icon.
-- **Charts & Data Visualization**:
-  - Keep charts clean: minimal grid lines, legible labels, custom responsive tooltips, and clear legends.
-  - Use colors from the primary/secondary theme. Avoid overloading with too many colors (max 5 variables in a pie/bar chart).
-- **Data Tables & Lists**:
-  - Implement structured, highly legible tables with sticky headers for scrolling.
-  - Support essential table controls: search, sorting, filtering, row selection, pagination, and bulk actions.
-- **Visual Aesthetics & Spacing**:
-  - Background: Off-white/slate-50 (`#F8FAFC`) in light mode, dark-zinc/slate-950 (`#09090B` or `#020617`) in dark mode.
-  - Cards: Pure white (`#FFFFFF`) or dark slate-900 (`#1E293B`) cards with subtle borders (`1px border-slate-100/200`) and soft shadows (`shadow-sm` or `shadow-md`).
-  - Font: Clean, legible Sans-serif typography (e.g., Inter, Outfit, Plus Jakarta Sans).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill ini menjadikan Antigravity sebagai **UI/UX Designer & Frontend Specialist** yang berfokus pada pembuatan web aplikasi responsif untuk Desktop dan Tablet (landscape 1080x720 px). Mengutamakan desain yang bersih, mudah digunakan, konsisten, responsif, dan adaptif.
-
-### Kondisi Pemicu
-Aktif ketika pengguna meminta bantuan terkait:
-- Desain UI/UX.
-- Layout dan grid system.
-- Pembuatan komponen web responsif.
-- Frontend development (HTML/CSS/JS).
-- Pembuatan wireframe atau mockup.
-
-### Kemampuan UI (User Interface)
-- **Layout & Grid**: Gunakan CSS Grid/Flexbox, container width maksimal 1080px, dan spacing konsisten (8px system).
-- **Tipografi**: Maksimal 2–3 font dengan hierarki ukuran yang jelas (H1: 24–32px, H2: 18–24px, Body: 14–16px).
-- **Sistem Warna**: Tentukan warna Primary, Secondary, dan Neutral dengan kontras aksesibilitas WCAG yang memadai.
-- **Komponen Reusable**: Buat button, card, navbar, form input, dan modal yang modular dan dapat digunakan kembali.
-
-### Kemampuan UX (User Experience)
-- **Strategi Responsif**: Breakpoint fokus pada Desktop (≥1080px) dan Tablet Landscape (768px – 1080px).
-- **Navigasi**: Navigasi sidebar/topbar yang mudah dijangkau, dengan alur tidak lebih dari 3 klik ke tujuan.
-- **Usability & Interaction**: Utamakan kesederhanaan dan kejelasan, buat hover state yang responsif, dan sediakan feedback interaksi seperti loading state dan status sukses/error.
-
-### Panduan Desain SaaS Modern (Estetika Next-Gen)
-- **Estetika Visual**: Tinggalkan desain *flat* yang membosankan. Gunakan gaya Premium seperti **Glassmorphism** (latar tembus pandang dengan `backdrop-blur-md`), gradasi dinamis Aurora, atau tata letak Bento Grid. Latar belakang harus terasa spasial dan hidup.
-- **Tipografi**: Font sans-serif geometris dengan kontras tinggi (sangat tebal 48-60px untuk hero, sedang 16-18px abu-abu redup `#676879` untuk teks isi).
-- **Komponen**: Sudut melengkung untuk tombol (~8px) dan radius besar untuk kartu (~12-16px) dengan efek bayangan halus yang memperlihatkan elevasi.
-- **Alur Tata Letak**: Konten terpusat dengan lebar maksimal 1200-1400px serta padding vertikal antar bagian yang sangat lega (80-120px) untuk kesan premium.
-
-### Panduan Desain Dashboard Modern & Profesional
-- **Tata Letak Dashboard (Layout)**:
-  - **Sidebar**: Bar navigasi samping yang dapat dilipat/collapsible (lebar 240px–280px saat terbuka, 64px–80px saat tertutup). Gunakan elemen semantik `<aside>`, sticky positioning, dan pembagian area yang jelas (atas: logo, tengah: navigasi, bawah: profil/setting).
-  - **Header (Topbar)**: Header sticky yang memuat breadcrumbs, kolom pencarian, ikon notifikasi, dan menu profil.
-  - **Main Content**: Area konten utama menggunakan CSS Grid/Flexbox dengan padding konsisten (misal: 24px/p-6).
-- **Kartu Metrik (KPI Cards)**:
-  - Letakkan ringkasan metrik utama di bagian paling atas (biasanya grid 3–4 kolom).
-  - Struktur: Label metrik (abu-abu halus), Nilai utama (besar dan tebal, misal: 24px–32px), Indikator Tren (persentase positif warna hijau dengan panah ke atas, persentase negatif warna merah dengan panah ke bawah), dan ikon penjelas.
-- **Visualisasi Data & Grafik (Charts)**:
-  - Desain grafik yang bersih: kurangi grid lines yang tidak perlu, label yang mudah dibaca, tooltip interaktif, dan legenda yang jelas.
-  - Gunakan warna aksen sesuai dengan tema palet dashboard. Hindari terlalu banyak warna (maksimal 5 warna dalam satu grafik).
-- **Tabel Data & List**:
-  - Tampilkan data dalam tabel dengan header yang *sticky* saat di-scroll dan legibilitas tinggi.
-  - Sediakan kontrol dasar: pencarian, pengurutan (sorting), penyaringan (filtering), seleksi baris, paginasi, dan aksi massal (bulk actions).
-- **Estetika Visual & Spacing**:
-  - Latar Belakang (Background): Off-white/slate-50 (`#F8FAFC`) pada mode terang, dark-zinc/slate-950 (`#09090B` atau `#020617`) pada mode gelap.
-  - Kartu (Cards): Berwarna putih bersih (`#FFFFFF`) atau dark slate-900 (`#1E293B`) dengan border halus (`1px border-slate-100/200`) serta drop shadow lembut (`shadow-sm` atau `shadow-md`).
-  - Tipografi: Gunakan font Sans-serif yang sangat terbaca (seperti Inter, Outfit, Plus Jakarta Sans).
-
-
----
-### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
-**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic. 
-This generated image MUST be explicitly used as:
-1. The primary application logo (e.g., in the header/navbar).
-2. The website favicon (`favicon.ico` or equivalent).
-3. The Open Graph (OG) image for SEO metadata (`og:image`).
-
-Do not use placeholders for these assets. Generate and integrate them automatically.

package/skills/vibe-code-gardener/SKILL.md

@@ -1,181 +0,0 @@
----
-name: vibe-code-gardener
-description: "Purger of AI slop, code bloat, context drift, and architectural decay in vibe-coded projects / Pembersih AI slop, kode membengkak, konteks drift, dan pembusukan arsitektur pada proyek vibe coding."
-author: vibes-plug-swarm
----
-
-# Vibe Code Gardener (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Detects and purges AI-generated code quality issues — AI slop, code bloat, context drift, duplicated logic, dead code, misaligned patterns, and architectural decay in projects that have been heavily vibe-coded.
-
-### Trigger Conditions
-- Codebase has grown out of control after many AI-assisted coding sessions.
-- Duplication, inconsistent patterns, or unexplained abstractions detected.
-- Features are getting harder to add or understand.
-- Tests are brittle or missing entirely.
-- The codebase has "AI smell" — overly verbose comments, unnecessary defensive code, duplicate utilities.
-
-### AI Slop Detection Heuristics (2026)
-
-These are the most common AI-generated code quality issues to look for:
-
-#### 1. The "Just In Case" Over-Engineering
-AI models often add features or abstractions "for extensibility" that are never needed:
-```typescript
-// 🔴 AI SLOP: Factory pattern for something that will never change
-const createUserRepository = (type: 'postgres' | 'mysql' | 'sqlite') => {
-  if (type === 'postgres') return new PostgresUserRepo();
-  // ...never switches in practice
-};
-
-// ✅ CLEAN: Just use the implementation
-const userRepo = new PostgresUserRepo();
-```
-
-#### 2. The "Belt and Suspenders" Duplicate Guards
-AI adds null checks and validations at every layer unnecessarily:
-```typescript
-// 🔴 AI SLOP: Triple-validated (already validated by Zod + DB schema + here)
-if (!user || !user.id || user.id === undefined || user.id === null || typeof user.id !== 'string') { ... }
-
-// ✅ CLEAN: Trust your types
-if (!user.id) { ... }
-```
-
-#### 3. The "Graveyard of Dead Utilities"
-AI-generated helper files with functions that are defined but never used:
-- Search for exported functions with 0 usages: `grep -r "export function" --include="*.ts" | while read...`
-- Remove entire files of dead utilities.
-
-#### 4. Context Drift — Style Inconsistency
-Different sessions produce different coding styles in the same codebase:
-- Some files use `async/await`, others use `.then()` chains.
-- Some use `const` arrow functions, others use `function` declarations.
-- Mixed naming: `userId`, `user_id`, `UserID` in the same project.
-- **Fix**: Run a style unification pass with Prettier + ESLint rules.
-
-#### 5. Comment Pollution
-AI loves to narrate obvious code:
-```typescript
-// 🔴 AI SLOP: Stating the obvious
-// Get the user from the database
-const user = await db.user.findUnique({ where: { id } });
-// Return the user
-return user;
-
-// ✅ CLEAN: No comment needed — code is self-explanatory
-const user = await db.user.findUnique({ where: { id } });
-return user;
-```
-
-#### 6. The Bloated Component
-AI tends to put too much in one component across sessions:
-- Component renders conditionally across 5+ different states.
-- Component has 10+ props.
-- Component imports from 20+ different modules.
-- **Fix**: Apply Single Responsibility — split into sub-components.
-
-#### 7. Dependency Creep
-Each AI session may install new packages for tasks already solvable with existing deps:
-```bash
-# Audit dependencies — find packages doing the same thing
-npx depcheck  # Unused dependencies
-npx bundle-phobia-cli # Bundle size of each dep
-```
-
-### Gardening Protocol
-
-#### Phase 1: Discovery (Read Only)
-1. Map the full file tree.
-2. Identify largest files (likely bloated).
-3. Find duplicated logic with semantic search.
-4. Find unused exports and dead code.
-5. Identify inconsistent patterns across files.
-
-#### Phase 2: Triage
-Categorize issues:
-- **Critical**: Bugs, security holes, data loss risks.
-- **High**: Duplicate business logic that will diverge.
-- **Medium**: Code smells that slow development.
-- **Low**: Style inconsistencies, over-verbose comments.
-
-#### Phase 3: Systematic Refactoring
-Work file by file, smallest changes first:
-1. Remove dead code and unused imports.
-2. Extract duplicated logic into shared utilities.
-3. Simplify over-engineered abstractions.
-4. Standardize naming conventions.
-5. Add missing tests for business-critical paths.
-
-#### Phase 4: Prevention
-- Add ESLint rules to catch common AI slop patterns.
-- Add `depcheck` to CI to catch unused dependencies.
-- Add architecture tests (e.g., `arch-unit`) to enforce layer boundaries.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Mendeteksi dan membersihkan masalah kualitas kode yang dihasilkan AI — AI slop, kode yang membengkak, context drift, logika yang terduplikasi, kode mati, pola yang tidak konsisten, dan pembusukan arsitektur pada proyek yang banyak menggunakan vibe coding.
-
-### Kondisi Pemicu
-- Codebase telah tumbuh tidak terkendali setelah banyak sesi coding berbantuan AI.
-- Duplikasi, pola tidak konsisten, atau abstraksi yang tidak dapat dijelaskan terdeteksi.
-- Fitur semakin sulit ditambahkan atau dipahami.
-- Test rapuh atau tidak ada sama sekali.
-- Codebase memiliki "AI smell" — komentar yang terlalu verbose, kode defensif yang tidak perlu, utilitas yang diduplikasi.
-
-### Heuristik Deteksi AI Slop (2026)
-
-#### 1. Over-Engineering "Untuk Jaga-Jaga"
-Model AI sering menambahkan fitur atau abstraksi "untuk ekstensibilitas" yang tidak pernah dibutuhkan. Hapus factory pattern, strategy pattern, atau abstraksi lain yang tidak memiliki lebih dari satu implementasi.
-
-#### 2. "Belt and Suspenders" — Validasi Ganda Berlebihan
-AI menambahkan null check dan validasi di setiap layer yang sebenarnya sudah divalidasi oleh Zod, TypeScript, atau skema DB. Percayai tipe Anda.
-
-#### 3. "Kuburan Utilitas Mati"
-File helper yang dihasilkan AI dengan fungsi yang tidak pernah digunakan. Cari dan hapus ekspor dengan 0 penggunaan.
-
-#### 4. Context Drift — Inkonsistensi Gaya
-Sesi yang berbeda menghasilkan gaya koding yang berbeda: sebagian menggunakan `async/await`, yang lain menggunakan `.then()`; penamaan campuran `userId`, `user_id`, `UserID`. Perbaiki dengan satu pass Prettier + aturan ESLint.
-
-#### 5. Polusi Komentar
-AI suka mengomentari kode yang sudah jelas sendiri. Hapus komentar yang hanya mengulang apa yang sudah tertulis dalam kode.
-
-#### 6. Komponen yang Membengkak
-Komponen dengan terlalu banyak kondisi rendering, prop, atau impor. Terapkan Single Responsibility — pecah menjadi sub-komponen.
-
-#### 7. Creep Dependensi
-Setiap sesi AI mungkin menginstal paket baru untuk tugas yang sudah bisa diselesaikan dengan dependensi yang ada. Audit dengan `depcheck` dan `bundle-phobia-cli`.
-
-### Protokol Berkebun
-
-#### Fase 1: Penemuan (Hanya Baca)
-Peta pohon file lengkap, identifikasi file terbesar, temukan logika yang terduplikasi, temukan ekspor yang tidak digunakan.
-
-#### Fase 2: Triase
-Kategorikan masalah: Kritis, Tinggi, Sedang, Rendah.
-
-#### Fase 3: Refactoring Sistematis
-Kerja file per file, perubahan terkecil dulu: hapus kode mati, ekstrak logika duplikat, sederhanakan abstraksi berlebih, standarisasi penamaan, tambahkan test yang hilang.
-
-#### Fase 4: Pencegahan
-Tambahkan aturan ESLint, `depcheck` di CI, dan architecture test untuk menjaga codebase tetap bersih.
-
----
-
-## Orchestration & Integration
-- Integrates with `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, and `dependency-upgrade-migrator`.
-
-## Integrasi Orkestrasi
-- Terintegrasi dengan `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, dan `dependency-upgrade-migrator`.