vibes-plug 2.11.0 → 3.9.0

package/skills/tailwind-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: tailwind-expert
 description: "Expert guide for Tailwind CSS v4, CSS-first configuration, @theme customization, and modern responsive design / Panduan ahli untuk Tailwind CSS v4, konfigurasi CSS-first, kustomisasi @theme, dan desain responsif modern."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Tailwind CSS Expert (v4 Edition)
@@ -18,14 +19,14 @@ Strict guidelines and best practices for Tailwind CSS v4. Enforces the CSS-first
 
 ### Trigger Conditions
 - Scaffold or configure a Tailwind CSS v4 project.
-- Migrate a codebase from Tailwind CSS v3 to v4.
+- Migrate a codebase from Tailwind CSS v4 to v4.
 - Implement design tokens via `@theme`.
 - Apply 3D transforms, CSS container queries, or `field-sizing`.
 
 ## Orchestration & Integration
 Integrates tightly with the following skills:
 - **`senior-frontend`**: Feeds modern CSS capabilities into Next.js/React component architecture.
-- **`ui-components-expert`**: Provides the styling primitives for Radix/shadcn-style components.
+- **`design-system-architect, senior-frontend`**: Provides the styling primitives for Radix/shadcn-style components.
 - **`design-system-architect`**: Establishes the core tokens mapped inside `@theme`.
 
 ### Execution Standards
@@ -75,6 +76,34 @@ When upgrading older codebases:
 - **Specificity**: Use `@layer utilities` strictly when custom CSS requires Tailwind's specificity tier.
 - **No `@apply` Abuse**: Avoid `@apply` in loops or highly repeated components; use HTML utility classes to leverage Lightning CSS tree-shaking.
 
+#### 5. Bootstrap to Tailwind Migration Guide
+1. **Analyze the Legacy Structure**:
+   - Identify the version of Bootstrap being used.
+   - Locate custom CSS files that override Bootstrap defaults.
+   - Identify interactive components (modals, dropdowns, tooltips, tabs, carousels) that rely on Bootstrap's JavaScript or jQuery.
+2. **Setup Modern Tools**:
+   - Ensure **Tailwind CSS v4** is properly set up in the project (e.g., via CDN for simple projects, or PostCSS/Vite for build steps).
+   - Inject **Alpine.js** via CDN or module bundler to handle interactivity.
+3. **Migration Strategy**:
+   - **Grid & Layout**: Convert Bootstrap grids (`container`, `row`, `col-*`) to Tailwind flexbox (`flex`, `flex-col`, `gap-*`) or CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Typography**: Map Bootstrap spacing (`m-3`, `p-4`) to Tailwind spacing (`m-4`, `p-6`—noting scale differences). Map typography utilities (`text-center`, `font-weight-bold`) to Tailwind equivalents (`text-center`, `font-bold`).
+   - **Colors**: Update Bootstrap semantic colors (`primary`, `success`, `danger`) to Tailwind color palettes (e.g., `blue-600`, `green-500`, `red-500`) or define custom themes in CSS variables for Tailwind v4.
+   - **Components**: Rebuild Bootstrap components (cards, buttons, alerts, navbars) using Tailwind utility classes to match or improve the original design.
+4. **Interactivity with Alpine.js**:
+   - Remove jQuery and Bootstrap JS dependencies.
+   - Replace interactive Bootstrap components with Alpine.js data and directives.
+   - **Dropdowns**: Use `x-data="{ open: false }"` and `@click="open = !open"`.
+   - **Modals**: Use Alpine.js to manage the open state and handle background overlays and click-away events (`@click.outside`).
+   - **Tabs**: Manage active tab state with `x-data="{ tab: 'home' }"`.
+5. **UI/UX Modernization & Skill Integration**:
+   - Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
+   - You MUST orchestrate and apply guidelines from other UI/UX skills (`ui-ux-expert`, `ui-ux-pro-max`, and `hig`).
+   - Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
+   - Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
+6. **Quality Assurance**:
+   - Verify that responsive design behaves correctly across breakpoints (`sm:`, `md:`, `lg:`).
+   - Ensure interactive components (modals, dropdowns) feel premium with Alpine.js transitions (`x-transition`).
+
 ---
 
 <a name="bahasa-indonesia"></a>
@@ -85,14 +114,14 @@ Panduan ketat dan praktik terbaik untuk Tailwind CSS v4. Memaksa penggunaan mode
 
 ### Kondisi Pemicu
 - Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4.
-- Migrasi codebase dari Tailwind CSS v3 ke v4.
+- Migrasi codebase dari Tailwind CSS v4 ke v4.
 - Implementasi design token via `@theme`.
 - Menggunakan 3D transform, container query, atau `field-sizing`.
 
 ## Integrasi Orkestrasi
 Terintegrasi erat dengan skill berikut:
 - **`senior-frontend`**: Menyuplai kapabilitas CSS modern ke dalam arsitektur komponen Next.js/React.
-- **`ui-components-expert`**: Menyediakan primitif styling untuk komponen gaya Radix/shadcn.
+- **`design-system-architect, senior-frontend`**: Menyediakan primitif styling untuk komponen gaya Radix/shadcn.
 - **`design-system-architect`**: Membangun token utama yang dipetakan di dalam `@theme`.
 
 ### Standar Eksekusi
@@ -138,3 +167,31 @@ Saat memperbarui codebase lama:
 - **Konfigurasi Nol**: Andalkan deteksi konten otomatis v4. Jangan tentukan path konten secara manual.
 - **Spesifisitas**: Gunakan `@layer utilities` secara ketat hanya jika CSS kustom memerlukan tingkat spesifisitas Tailwind.
 - **Dilarang Menyalahgunakan `@apply`**: Hindari `@apply` pada loop atau komponen berulang; gunakan kelas utilitas di HTML untuk memaksimalkan tree-shaking Lightning CSS.
+
+#### 5. Panduan Migrasi Bootstrap ke Tailwind
+1. **Analisis Struktur Lama**:
+   - Identifikasi versi Bootstrap yang digunakan.
+   - Temukan file CSS kustom yang menimpa (override) default Bootstrap.
+   - Identifikasi komponen interaktif (modal, dropdown, tooltip, tab, carousel) yang mengandalkan JavaScript Bootstrap atau jQuery.
+2. **Setup Tools Modern**:
+   - Pastikan **Tailwind CSS v4** disiapkan dengan benar di proyek (misalnya, melalui CDN untuk proyek sederhana, atau PostCSS/Vite jika ada build step).
+   - Masukkan **Alpine.js** melalui CDN atau module bundler untuk menangani interaktivitas.
+3. **Strategi Migrasi**:
+   - **Grid & Layout**: Ubah grid Bootstrap (`container`, `row`, `col-*`) menjadi flexbox Tailwind (`flex`, `flex-col`, `gap-*`) atau CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Tipografi**: Petakan spasi Bootstrap (`m-3`, `p-4`) ke Tailwind (`m-4`, `p-6`—perhatikan perbedaan skala). Petakan utilitas teks (`text-center`, `font-weight-bold`) ke padanan Tailwind (`text-center`, `font-bold`).
+   - **Warna**: Perbarui warna semantik Bootstrap (`primary`, `success`, `danger`) ke palet warna Tailwind (misal: `blue-600`, `green-500`, `red-500`) atau definisikan tema kustom di variabel CSS untuk Tailwind v4.
+   - **Komponen**: Bangun ulang komponen Bootstrap (card, button, alert, navbar) menggunakan kelas utilitas Tailwind untuk mencocokkan atau memperbaiki desain aslinya.
+4. **Interaktivitas dengan Alpine.js**:
+   - Hapus dependensi jQuery dan Bootstrap JS.
+   - Ganti komponen interaktif Bootstrap dengan data dan direktif Alpine.js.
+   - **Dropdown**: Gunakan `x-data="{ open: false }"` dan `@click="open = !open"`.
+   - **Modal**: Gunakan Alpine.js untuk mengelola state terbuka, overlay latar belakang, dan event klik di luar (`@click.outside`).
+   - **Tab**: Kelola state tab aktif dengan `x-data="{ tab: 'home' }"`.
+5. **Modernisasi UI/UX & Integrasi Skill**:
+   - JANGAN hanya menerjemahkan kelas Bootstrap 1:1. Tujuannya adalah meningkatkan kualitas desain.
+   - Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui-ux-expert`, `ui-ux-pro-max`, dan `hig`).
+   - Terapkan prinsip Human Interface Guidelines (HIG): Hierarchy, Harmony, dan Consistency.
+   - Gunakan warna cerah, mikro-animasi halus, glassmorphism (jika sesuai), dan tipografi modern untuk memberikan kesan "WOW" pada pengguna.
+6. **Quality Assurance**:
+   - Verifikasi bahwa desain responsif berfungsi dengan benar di semua breakpoint (`sm:`, `md:`, `lg:`).
+   - Pastikan komponen interaktif (modal, dropdown) terasa premium dengan transisi Alpine.js (`x-transition`).

package/skills/tanstack-query-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: tanstack-query-expert
 description: "Advanced TanStack Query (v5) expert. Covers useSuspenseQuery, infinite scrolling, optimistic mutations, SSR/React Server Components hydration, and advanced cache invalidation / Pakar manajemen state asinkron menggunakan TanStack Query (React Query) v5 dan Next.js App Router (SSR)."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # TanStack Query Expert (v5 + TanStack Router/Start Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Production-grade TanStack Query (v5) mastery for modern React (v18/19) and Next.js (App Router) applications. Covers declarative data fetching, advanced cache invalidation, optimistic UI updates, Suspense boundaries, SSR hydration, and the new **TanStack Router** + **TanStack Start** ecosystem for full-stack type-safe applications.
@@ -155,7 +156,7 @@ export default async function UsersPage() {
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Penguasaan TanStack Query (v5) tingkat produksi untuk aplikasi React modern (v18/19) dan Next.js (App Router). Mencakup data fetching deklaratif, invalidasi cache lanjutan, optimistic UI, Suspense boundaries, hidrasi SSR, serta ekosistem **TanStack Router** + **TanStack Start** untuk aplikasi full-stack yang type-safe.
@@ -202,4 +203,4 @@ Prefetch di Server Component, lalu wrap dengan `<HydrationBoundary>` agar data l
 ### Pemecahan Masalah
 - **Loop Fetching**: Query key tidak stabil atau `queryFn` yang melempar error tak tertangani.
 - **`staleTime` vs `gcTime`**: Jangan set `gcTime` lebih kecil dari `staleTime`.
-- **Hydration Mismatch**: Pastikan server dan client menghasilkan data awal yang identik.
+- **Hydration Mismatch**: Pastikan server dan client menghasilkan data awal yang identik.

package/skills/tauri-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: tauri-expert
 description: "Expert skill for Tauri (v2) development, Rust backend, IPC, and security / Panduan ahli untuk pengembangan Tauri v2, Rust backend, IPC, dan keamanan."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Tauri Expert
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 This skill provides best practice guidance for building cross-platform desktop and mobile applications using Tauri (specifically Tauri v2). It covers frontend integration with the Rust backend, Inter-Process Communication (IPC), state management, and security.
@@ -61,7 +62,7 @@ Active when:
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Skill ini memberikan panduan praktik terbaik (best practices) untuk membangun aplikasi desktop dan mobile lintas platform menggunakan Tauri (terutama Tauri v2). Skill ini mencakup integrasi frontend dengan backend Rust, Inter-Process Communication (IPC), manajemen state, serta keamanan.
@@ -100,4 +101,4 @@ Skill ini memberikan panduan praktik terbaik (best practices) untuk membangun ap
 Aktif saat:
 - Membangun, men-debug, atau melakukan *refactoring* pada aplikasi Tauri.
 - Menulis sistem IPC antara frontend (React/Svelte/Vue) dan backend Rust.
-- Mengonfigurasi keamanan (`tauri.conf.json`, capabilities, permission).
+- Mengonfigurasi keamanan (`tauri.conf.json`, capabilities, permission).

package/skills/typescript-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: typescript-expert
 description: "Expert guide for TypeScript 5.8+ advanced type system, strict mode, generics, utility types, branded types, inferred type predicates, isolated declarations, and type-safe architectural patterns / Panduan ahli untuk sistem tipe TypeScript 5.8+, mode strict, generics, utility types, branded types, inferred type predicates, isolated declarations, dan pola arsitektur type-safe."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # TypeScript Expert (TypeScript 5.8+ Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Expert-level TypeScript development covering the advanced type system, strict mode enforcement, generic programming, utility types, branded types, and type-safe patterns for production applications. Targets **TypeScript 5.8+** features including inferred type predicates, isolated declarations, `NoInfer`, `using` declarations, variadic tuple improvements, and `const` type parameters.
@@ -303,7 +304,7 @@ config.port.toFixed(2); // Works! Literal type preserved.
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan TypeScript level ahli mencakup sistem tipe tingkat lanjut, penerapan strict mode, pemrograman generik, utility types, branded types, dan pola type-safe untuk aplikasi produksi. Menargetkan fitur **TypeScript 5.8+** termasuk inferred type predicates, isolated declarations, `NoInfer`, deklarasi `using`, peningkatan variadic tuple, dan parameter tipe `const`.
@@ -327,4 +328,4 @@ Panduan TypeScript level ahli mencakup sistem tipe tingkat lanjut, penerapan str
 - **Zod**: Validasi data eksternal dan turunkan tipe TypeScript dari schema Zod.
 - **Hindari `as any`**: Gunakan `unknown` dengan narrowing atau Zod untuk data yang tidak diketahui tipenya.
 - **`satisfies` operator**: Validasi objek terhadap tipe tanpa melebarkan tipe yang diinferensi.
-- **`moduleResolution: Bundler`**: Gunakan untuk proyek Next.js/Vite; `NodeNext` untuk Node.js/Bun backend.
+- **`moduleResolution: Bundler`**: Gunakan untuk proyek Next.js/Vite; `NodeNext` untuk Node.js/Bun backend.

package/skills/ui-ux-pro-max/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: ui-ux-pro-max
 description: "Comprehensive design guide & BM25 search engine for web and mobile applications across 11 tech stacks / Panduan desain komprehensif & mesin pencari BM25 untuk aplikasi web dan mobile di 11 tech stack."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # UI/UX Pro Max - Design Intelligence System
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 UI/UX Pro Max is a comprehensive design intelligence engine equipped with an offline BM25 search index covering color palettes, typography, responsive patterns, icon sets, chart recommendations, UX guidelines, **Material Design 3 (M3)**, and stack-specific best practices across **11 technology stacks**.
@@ -59,6 +60,7 @@ python scripts/search.py "<query>" --domain <domain> --max-results 3
   - `react`: React & Next.js performance optimizations, re-render fixes & dynamic imports
   - `web`: Web interface guidelines (ARIA, focus traps, virtual list, form inputs)
   - `m3`: Material Design 3 specific design tokens, color roles, elevation, and component specs
+  - `preset-monday`: Monday.com spacious SaaS aesthetic (Vibrant Blue `#0073ea`, Clean White `#FFFFFF` + Light Grays `#F9F9F9`/`#F5F6F8`, Dark Footer `#111111`, Figtree/Inter fonts, 12-16px card radius, 80-120px vertical spacing)
 
 *Example:* `python scripts/search.py "fintech dark theme" --domain color`
 
@@ -116,7 +118,7 @@ python scripts/search.py "<query>" --stack <stack> --max-results 3
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 UI/UX Pro Max adalah mesin kecerdasan desain komprehensif yang dilengkapi indeks pencarian BM25 offline. Mencakup palet warna, tipografi, pola tata letak responsif, rekomendasi ikon, grafik visualisasi data, pedoman UX, **Material Design 3 (M3)**, serta praktik terbaik untuk **11 tumpukan teknologi (technology stacks)**.
@@ -160,6 +162,7 @@ python scripts/search.py "<kueri>" --domain <domain> --max-results 3
   - `react`: Optimasi performa React & Next.js, perbaikan re-render & dynamic import
   - `web`: Pedoman antarmuka web (ARIA, focus trap, virtual list, input form)
   - `m3`: Token desain spesifik Material Design 3, peran warna, elevasi, dan spesifikasi komponen
+  - `preset-monday`: Estetika SaaS lapang ala Monday.com (Biru Cerah `#0073ea`, Putih Bersih `#FFFFFF` + Abu-abu Terang `#F9F9F9`/`#F5F6F8`, Footer Gelap `#111111`, font Figtree/Inter, radius kartu 12-16px, jarak seksi vertikal 80-120px)
 
 *Contoh:* `python scripts/search.py "fintech dark theme" --domain color`
 
@@ -219,4 +222,4 @@ This generated image MUST be explicitly used as:
 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.
+Do not use placeholders for these assets. Generate and integrate them automatically.