vibes-plug 2.11.0 → 2.14.1

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

@@ -1,166 +0,0 @@
----
-name: ui-components-expert
-description: Expert guide for building production-quality UI components following the 4 pillars. Covers React 19, Radix UI, Base UI, Tailwind v4, Material Design 3 (M3), WCAG 2.2 / Panduan ahli membangun komponen UI berkualitas produksi dengan M3.
-author: "Roedy Rustam"
----
-
-# 🎨 UI Components Expert (2026/2027 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Evaluate, audit, and build production-quality UI components. Apply the 4 pillars of UI components with modern tooling: **shadcn/ui**, **Radix UI**, **Base UI**, **React 19**, **Tailwind v4**, **Material Design 3 (M3)**, **WCAG 2.2**, and micro-interaction design.
-
-### Trigger Conditions
-- Build or review UI components (buttons, forms, modals, navigation, tooltips).
-- Implement accessible components (ARIA patterns, keyboard navigation).
-- Audit components against WCAG 2.2.
-- Set up component libraries (shadcn/ui, Radix UI, Base UI).
-- Add micro-interactions and animations.
-
-## Orchestration & Integration
-This skill orchestrates and connects with:
-- `senior-frontend`: For overall React 19 / Next.js 15 architecture.
-- `tailwind-expert`: For Tailwind v4 styling and theming.
-- `design-system-architect`: For system-wide design tokens and primitives.
-- `hig`: For Human Interface Guidelines (Hierarchy, Harmony, Consistency).
-
-### Component Stack (2026/2027)
-- **Headless Primitives**: Radix UI / Base UI (Accessibility, behavior).
-- **Component Library**: shadcn/ui (Pre-styled, customizable).
-- **Styling**: Tailwind CSS v4 (Utility-first, `@theme` tokens).
-- **Animation**: Motion / Framer Motion v12 (Spring physics).
-- **Icons**: Lucide React.
-- **Forms**: React Hook Form + Zod.
-
-### The 4 Pillars of UI Components
-
-#### 1: Input Controls
-Capture user intent and data (Buttons, Forms, Selects).
-- **M3 Integration (if requested)**: Use M3 button variants: Filled, Tonal, Elevated, Outlined, and Text. Include FABs (Floating Action Buttons) for primary screen actions.
-- **Visual States**: Define `default`, `hover`, `active`, `focus`, `disabled`, and `error`.
-- **Touch Targets**: Minimum 44×44px (WCAG 2.5.8), M3 recommends 48x48px.
-- **Immediate Feedback**: Provide visual ripple or scale animation on interaction.
-- **Inline Validation**: Show errors on blur. Use `aria-invalid` and `aria-describedby`.
-- **Stack**: React Hook Form + Zod.
-
-#### 2: Navigation
-Move through application structure (Navbars, Tabs, Command Palettes).
-- **M3 Integration (if requested)**: Use M3 Navigation Bar for mobile (bottom), Navigation Rail for tablet, and Navigation Drawer for desktop.
-- **Active State**: Indicate current location with high-contrast visual indicators.
-- **Keyboard Navigation**: Support Arrow Keys for tabs, `Escape` to close.
-- **Responsive**: Bottom navigation (<768px), collapsible sidebar (tablet), full sidebar (desktop).
-- **Command Palette**: Add `⌘K` via `cmdk`.
-- **Next.js 15**: Use `<Link viewTransition>` for smooth transitions.
-- **ARIA**: Use `role="navigation"` and `aria-current="page"`.
-
-#### 3: Information & Feedback
-Display status and guidance (Toasts, Skeletons, Empty States).
-- **M3 Integration (if requested)**: Use Snackbar for transient messages. Use Badges on navigation icons for notifications.
-- **Color Semantics**: Green (success), red (error), yellow (warning), blue (info).
-- **Toasts**: Use **Sonner**. Limit to 3 concurrent. Auto-dismiss success, keep errors until dismissed.
-- **Loading**: Use Skeletons matching exact content layout over spinners (prevents CLS).
-- **Empty States**: Provide illustration, context, and clear CTA.
-- **ARIA**: `aria-live="polite"` (updates), `aria-live="assertive"` (critical).
-
-#### 4: Containers & Layout
-Group related content (Cards, Modals, Sheets).
-- **M3 Integration (if requested)**: Use M3 Card variants: Elevated, Filled, Outlined. Follow M3 Dialog guidelines for Modals.
-- **Modals**: Use Radix UI Dialog. It handles focus trapping and scroll locking automatically.
-- **Animation**: Animate in (`animate-in fade-in zoom-in-95`).
-- **Cards**: Use subtle shadows + borders. Avoid heavy drop shadows in light mode.
-- **Sheets**: Use bottom sheet for mobile secondary actions, side sheet for desktop.
-
-### Micro-Interaction Checklist
-- [ ] Implement `:focus-visible` ring (2px, brand color) on all interactives.
-- [ ] **M3 State Layers**: If using M3, ensure interactive elements have distinct Hover, Focus, Pressed, and Dragged state layers.
-- [ ] Add loading state (spinner + disabled) to submit buttons.
-- [ ] Use **Framer Motion v12 spring physics** (`stiffness: 300, damping: 20`) for natural, snappy interactions. Avoid rigid linear transitions.
-- [ ] Use `transition-all duration-200 ease-out` for simple hovers.
-- [ ] Test dark mode for all states (especially error contrast).
-
-### WCAG 2.2 Quick Reference
-- **1.4.3**: Text contrast ≥4.5:1.
-- **2.5.8**: Touch target ≥24×24px (min), 44×44px (target).
-- **2.4.7**: Visible focus indicator.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Evaluasi, audit, dan bangun komponen UI berkualitas produksi. Terapkan 4 pilar komponen UI dengan tooling modern: **shadcn/ui**, **Radix UI**, **Base UI**, **React 19**, **Tailwind v4**, **Material Design 3 (M3)**, **WCAG 2.2**, dan desain micro-interaction.
-
-### Kondisi Pemicu
-- Membangun atau me-review komponen UI (tombol, form, modal, navigasi).
-- Implementasi komponen aksesibel (pola ARIA, navigasi keyboard).
-- Audit komponen berdasarkan WCAG 2.2.
-- Setup library komponen (shadcn/ui, Radix UI, Base UI).
-- Menambahkan micro-interaction dan animasi.
-
-## Integrasi Orkestrasi
-Skill ini mengorkestrasi dan terhubung dengan:
-- `senior-frontend`: Untuk arsitektur keseluruhan React 19 / Next.js 15.
-- `tailwind-expert`: Untuk styling dan theming Tailwind v4.
-- `design-system-architect`: Untuk design token dan primitif skala sistem.
-- `hig`: Untuk panduan Human Interface (Hierarki, Harmoni, Konsistensi).
-
-### QA Visual Mandatori
-- Wajib gunakan `browser_subagent` dan `visual-qa-vision-agent` untuk validasi layout.
-- Standar Pixel-Perfect: Jangan menebak ukuran. Ambil screenshot dan koreksi pergeseran tata letak.
-
-### Stack Komponen (2026/2027)
-- **Headless**: Radix UI / Base UI.
-- **Library**: shadcn/ui.
-- **Styling**: Tailwind CSS v4.
-- **Animasi**: Motion / Framer Motion v12.
-- **Form**: React Hook Form + Zod.
-
-### 4 Pilar Komponen UI
-
-#### 1: Kontrol Input
-Tangkap data (Tombol, Form, Select).
-- **Integrasi M3 (jika diminta)**: Gunakan varian tombol M3: Filled, Tonal, Elevated, Outlined, dan Text. Sertakan FABs (Floating Action Buttons).
-- Definisikan state visual: `default`, `hover`, `active`, `focus`, `disabled`, `error`.
-- Target sentuh minimal 44×44px (M3 merekomendasikan 48x48px).
-- Tampilkan error saat blur dengan `aria-invalid` dan `aria-describedby`.
-- Gunakan React Hook Form + Zod.
-
-#### 2: Navigasi
-Pergerakan pengguna (Navbar, Tab, Command Palette).
-- **Integrasi M3 (jika diminta)**: Gunakan Navigation Bar M3 untuk mobile, Navigation Rail untuk tablet, dan Navigation Drawer untuk desktop.
-- Gunakan indikator visual kontras tinggi untuk lokasi aktif.
-- Wajib dukung navigasi keyboard (Arrow Keys, Escape).
-- Responsive: Bottom navigation (<768px), sidebar desktop.
-- Gunakan `cmdk` untuk Command Palette `⌘K`.
-- Tandai navigasi aktif dengan `aria-current="page"`.
-
-#### 3: Informasi & Feedback
-Tampilkan status (Toast, Skeleton, Empty State).
-- **Integrasi M3 (jika diminta)**: Gunakan Snackbar untuk pesan sementara. Gunakan Badges pada ikon navigasi.
-- Gunakan warna semantik secara konsisten.
-- Gunakan **Sonner** untuk toast (maks 3 sekaligus).
-- Gunakan Skeleton persis sesuai layout (jangan gunakan spinner untuk layout) guna mencegah CLS.
-- Sediakan ilustrasi dan CTA pada Empty State.
-
-#### 4: Kontainer & Layout
-Kelompokkan konten (Card, Modal, Sheet).
-- **Integrasi M3 (jika diminta)**: Gunakan varian Card M3: Elevated, Filled, Outlined. Ikuti panduan Dialog M3 untuk modal.
-- Gunakan Radix UI Dialog untuk modal (menangani focus trap dan scroll lock).
-- Animasikan kemunculan modal (fade + scale).
-- Gunakan shadow tipis untuk elevasi card di mode terang.
-- Gunakan bottom sheet di mobile.
-
-### Checklist Micro-Interaction
-- [ ] Ring `:focus-visible` (2px) pada elemen interaktif.
-- [ ] **State Layers M3**: Jika menggunakan M3, pastikan elemen interaktif memiliki lapisan status (Hover, Focus, Pressed, Dragged) yang berbeda.
-- [ ] State loading pada tombol.
-- [ ] Gunakan **Framer Motion v12 spring physics** (`stiffness: 300, damping: 20`) untuk interaksi alami.
-- [ ] Transisi hover `transition-all duration-200 ease-out`.
-- [ ] Uji kontras warna dark mode.

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: "Roedy Rustam"
----
-
-# 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`.