vibes-plug 1.0.0 → 2.5.0

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

@@ -1,201 +1,202 @@
----
-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"
----
-
-# UI/UX Pro Max - Design Intelligence System
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### 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, and stack-specific best practices across **11 technology stacks**.
-
-### Trigger Conditions
-Reference these guidelines or run the CLI search engine when:
-- Designing new UI components, landing pages, or dashboards.
-- Choosing color schemes, font pairings, and design tokens.
-- Generating a complete design system recommendation for a project.
-- Auditing code for UX, accessibility (a11y), or performance issues.
-- Needing stack-specific code patterns (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).
-
----
-
-### Python BM25 Search CLI Integration
-
-The skill includes a fast Python search engine in `scripts/search.py` that queries 12 domain CSV datasets and 11 tech-stack CSV datasets.
-
-#### 1. Generate Complete Design System Recommendation
-Run this before starting design/coding to get an aggregated design system spec:
-```bash
-python scripts/search.py "<project/topic query>" --design-system -p "Project Name" -f markdown
-```
-*Example:* `python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown`
-
-#### 2. Domain-Specific Search
-Search specific design domains:
-```bash
-python scripts/search.py "<query>" --domain <domain> --max-results 3
-```
-- **Available Domains (`--domain`)**:
-  - `style`: Visual design styles (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, etc.)
-  - `prompt`: Copy-paste ready AI prompts & CSS implementation checklists
-  - `color`: Hex color palettes tailored by product type (Primary, Secondary, CTA, Background, Text)
-  - `chart`: Chart type recommendations, library suggestions, accessibility & color guidance
-  - `landing`: High-converting landing page layouts, section orders & CTA placement
-  - `product`: Product-type specific design system blueprints (SaaS, E-commerce, Fintech, Crypto, etc.)
-  - `ux`: UX anti-patterns, usability best practices, severity, and good/bad code examples
-  - `typography`: Google font pairings, heading/body recommendations, mood keywords & CSS imports
-  - `icons`: Icon usage guidance, SVG libraries (Lucide, Heroicons), and code imports
-  - `react`: React & Next.js performance optimizations, re-render fixes & dynamic imports
-  - `web`: Web interface guidelines (ARIA, focus traps, virtual list, form inputs)
-
-*Example:* `python scripts/search.py "fintech dark theme" --domain color`
-
-#### 3. Stack-Specific Guidelines Search
-Search guidelines tailored to your exact tech stack:
-```bash
-python scripts/search.py "<query>" --stack <stack> --max-results 3
-```
-- **Supported Stacks (`--stack`)**:
-  - `html-tailwind` | `react` | `nextjs` | `vue` | `nuxtjs` | `nuxt-ui` | `svelte` | `swiftui` | `react-native` | `flutter` | `shadcn`
-
-*Example:* `python scripts/search.py "virtualized list performance" --stack react`
-
----
-
-### Quick Reference for Professional Rules
-
-#### 1. Accessibility (WCAG 2.2) - CRITICAL
-- **Color Contrast**: Minimum 4.5:1 ratio for normal text, 3:1 for large text/UI components.
-- **Focus States**: Visible focus rings (`focus-visible:ring-2 focus-visible:ring-offset-2`) during keyboard navigation.
-- **Alt Text & ARIA**: Descriptive alt text for imagery; proper `aria-expanded`, `aria-controls`, and semantic HTML tags.
-
-#### 2. Touch & Interaction - CRITICAL
-- **Touch Target Size**: Minimum 44x44px for mobile devices.
-- **Loading & State**: Disable buttons during async requests to prevent duplicate submissions; show subtle spinners or skeleton loaders.
-- **Cursor Pointer**: Always add `cursor-pointer` to clickable/interactive elements.
-
-#### 3. Performance & Animation - HIGH / MEDIUM
-- **Image & Assets**: Use WebP/AVIF formats, `srcset`, explicit `width`/`height` attributes, and `loading="lazy"`.
-- **Micro-interactions**: Keep transition durations between 150ms–300ms (`ease-in-out`) for fast and responsive UI feel.
-- **Reduced Motion**: Respect `prefers-reduced-motion: reduce`.
-
-#### 4. Light/Dark Mode Contrast
-- **Light Mode**: High-contrast text (e.g. Slate-900 `#0F172A`); avoid pale grays for primary text. Ensure borders (`border-slate-200`) remain visible.
-- **Dark Mode**: High contrast foreground elements over dark slate/gray backgrounds; avoid pure black `#000000` text containers unless requested.
-
-#### 5. Dashboard & Information Hierarchy
-- **Layout Flow**: KPI summary cards top -> Trend charts middle -> Detailed data tables bottom.
-- **Visual Grid**: Consistent gaps/padding (16px / 24px). Clean subtle borders instead of heavy black dividers.
-- **Data Viz**: Maximum 3–5 coordinated colors in graphs. Responsive tooltips and legend alignment.
-
----
-
-### UI/UX Design Pre-Delivery Checklist
-- [ ] **Visual Quality**: No emojis used as UI icons (use SVG icons from Lucide/Heroicons). Hover states do not cause layout shifts.
-- [ ] **Interaction**: `cursor-pointer` applied to all interactive elements. Smooth 150–300ms transitions.
-- [ ] **Contrast**: Text contrast ratio >= 4.5:1 in light mode. Visible borders in both light and dark modes.
-- [ ] **Layout & Responsive**: Tested across 375px, 768px, 1024px, 1440px breakpoints. No unintentional horizontal scrolling on mobile.
-- [ ] **Accessibility**: All images have meaningful `alt` text. Form inputs have explicitly connected `<label>` elements or `aria-label`.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### 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, serta praktik terbaik untuk **11 tumpukan teknologi (technology stacks)**.
-
-### Kondisi Pemicu
-Gunakan pedoman ini atau jalankan mesin pencari CLI ketika:
-- Mendesain komponen UI baru, landing page, atau dashboard.
-- Memilih skema warna, pasangan font, dan token desain.
-- Menghasilkan rekomendasi sistem desain (design system) lengkap untuk proyek.
-- Mengaudit kode untuk masalah UX, aksesibilitas (a11y), atau kinerja.
-- Membutuhkan pola kode spesifik stack (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).
-
----
-
-### Integrasi CLI Pencarian Python BM25
-
-Skill ini dilengkapi mesin pencari Python cepat di `scripts/search.py` yang dapat mengueri 12 dataset CSV domain dan 11 dataset CSV tech-stack.
-
-#### 1. Generasi Rekomendasi Sistem Desain Lengkap
-Jalankan ini sebelum memulai desain/coding untuk mendapatkan spesifikasi sistem desain terintegrasi:
-```bash
-python scripts/search.py "<kueri proyek/topik>" --design-system -p "Nama Proyek" -f markdown
-```
-*Contoh:* `python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown`
-
-#### 2. Pencarian Berdasarkan Domain
-Cari domain desain tertentu:
-```bash
-python scripts/search.py "<kueri>" --domain <domain> --max-results 3
-```
-- **Domain yang Tersedia (`--domain`)**:
-  - `style`: Gaya desain visual (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, dll.)
-  - `prompt`: Prompt AI siap pakai & checklist implementasi CSS
-  - `color`: Palet warna Hex sesuai jenis produk (Utama, Sekunder, CTA, Background, Teks)
-  - `chart`: Rekomendasi jenis grafik, pustaka grafik, panduan kontras & aksesibilitas
-  - `landing`: Tata letak landing page konversi tinggi, urutan seksi & penempatan CTA
-  - `product`: Cetak biru sistem desain spesifik jenis produk (SaaS, E-commerce, Fintech, Crypto, dll.)
-  - `ux`: Anti-pattern UX, praktik terbaik kegunaan, tingkat keparahan, serta contoh kode baik/buruk
-  - `typography`: Pasangan font Google Fonts, rekomendasi font judul/isi, mood & CSS import
-  - `icons`: Panduan penggunaan ikon, pustaka SVG (Lucide, Heroicons), & import kode
-  - `react`: Optimasi performa React & Next.js, perbaikan re-render & dynamic import
-  - `web`: Pedoman antarmuka web (ARIA, focus trap, virtual list, input form)
-
-*Contoh:* `python scripts/search.py "fintech dark theme" --domain color`
-
-#### 3. Pencarian Pedoman Spesifik Tech Stack
-Cari pedoman yang disesuaikan persis dengan tech stack proyek:
-```bash
-python scripts/search.py "<kueri>" --stack <stack> --max-results 3
-```
-- **Tech Stack yang Didukung (`--stack`)**:
-  - `html-tailwind` | `react` | `nextjs` | `vue` | `nuxtjs` | `nuxt-ui` | `svelte` | `swiftui` | `react-native` | `flutter` | `shadcn`
-
-*Contoh:* `python scripts/search.py "virtualized list performance" --stack react`
-
----
-
-### Acuan Cepat Aturan Profesional
-
-#### 1. Aksesibilitas (WCAG 2.2) - KRITIS
-- **Kontras Warna**: Rasio kontras minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar/komponen UI.
-- **Focus States**: Tampilkan cincin fokus yang jelas (`focus-visible:ring-2 focus-visible:ring-offset-2`) saat menggunakan navigasi keyboard.
-- **Alt Text & ARIA**: Sediakan alt text deskriptif pada gambar; gunakan atribut `aria-expanded`, `aria-controls`, serta elemen HTML semantik.
-
-#### 2. Sentuhan & Interaksi - KRITIS
-- **Touch Target Size**: Ukuran area sentuh minimal 44x44px untuk perangkat mobile.
-- **Loading & State**: Nonaktifkan tombol selama operasi asinkron agar tidak terjadi submit ganda; tampilkan spinner halus atau skeleton loader.
-- **Cursor Pointer**: Wajib menambahkan `cursor-pointer` pada elemen interaktif yang dapat diklik.
-
-#### 3. Performa & Animasi - TINGGI / MENENGAH
-- **Aset Gambar**: Gunakan format WebP/AVIF, atribut `srcset`, dimensi `width`/`height` eksplisit, serta `loading="lazy"`.
-- **Mikro-interaksi**: Durasi transisi antara 150ms–300ms (`ease-in-out`) agar antarmuka terasa cepat dan responsif.
-- **Reduced Motion**: Hormati preferensi `prefers-reduced-motion: reduce`.
-
-#### 4. Kontras Mode Terang & Gelap
-- **Mode Terang**: Teks gelap kontras tinggi (misal Slate-900 `#0F172A`); hindari teks abu-abu pudar. Pastikan batas/border (`border-slate-200`) tetap terlihat.
-- **Mode Gelap**: Kontras tinggi antara elemen latar depan dengan latar belakang gelap; hindari kontainer teks serba hitam pekat `#000000` kecuali diminta khusus.
-
-#### 5. Dashboard & Hierarki Informasi
-- **Alur Tata Letak**: Kartu ringkasan KPI di atas -> Grafik tren di tengah -> Tabel detail data di bawah.
-- **Grid Visual**: Konsistensi gap/padding (16px / 24px). Gunakan border halus daripada pembatas tebal hitam.
-- **Visualisasi Data**: Maksimal 3–5 warna terkoordinasi dalam grafik. Tooltip responsif & perataan legenda yang rapi.
-
----
-
-### Checklist Desain UI/UX Sebelum Delivery
-- [ ] **Visual**: Tidak menggunakan emoji sebagai ikon UI (gunakan ikon SVG seperti Lucide/Heroicons). Efek hover tidak menggeser tata letak.
-- [ ] **Interaksi**: `cursor-pointer` diterapkan pada semua elemen interaktif. Transisi halus 150–300ms.
-- [ ] **Kontras**: Rasio kontras teks minimal 4.5:1 pada mode terang. Border terlihat di kedua mode (terang & gelap).
-- [ ] **Tata Letak & Responsif**: Diuji pada breakpoint 375px, 768px, 1024px, 1440px. Tidak ada scroll horizontal tak disengaja pada perangkat mobile.
-- [ ] **Aksesibilitas**: Semua gambar memiliki `alt` text yang bermakna. Form input memiliki `<label>` terhubung atau `aria-label`.
+---
+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"
+---
+
+# UI/UX Pro Max - Design Intelligence System
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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, and stack-specific best practices across **11 technology stacks**.
+
+### Trigger Conditions
+Reference these guidelines or run the CLI search engine when:
+- Designing new UI components, landing pages, or dashboards.
+- Choosing color schemes, font pairings, and design tokens.
+- Learning, reverse-engineering, or cloning website design templates & components directly from a target URL (Combine with `website-design-cloner`).
+- Generating a complete design system recommendation for a project.
+- Auditing code for UX, accessibility (a11y), or performance issues.
+- Needing stack-specific code patterns (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).
+
+---
+
+### Python BM25 Search CLI Integration
+
+The skill includes a fast Python search engine in `scripts/search.py` that queries 12 domain CSV datasets and 11 tech-stack CSV datasets.
+
+#### 1. Generate Complete Design System Recommendation
+Run this before starting design/coding to get an aggregated design system spec:
+```bash
+python scripts/search.py "<project/topic query>" --design-system -p "Project Name" -f markdown
+```
+*Example:* `python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown`
+
+#### 2. Domain-Specific Search
+Search specific design domains:
+```bash
+python scripts/search.py "<query>" --domain <domain> --max-results 3
+```
+- **Available Domains (`--domain`)**:
+  - `style`: Visual design styles (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, Spatial UI, WebGL 3D elements, etc.)
+  - `prompt`: Copy-paste ready AI prompts & CSS implementation checklists
+  - `color`: Hex color palettes tailored by product type (Primary, Secondary, CTA, Background, Text)
+  - `chart`: Chart type recommendations, library suggestions, accessibility & color guidance
+  - `landing`: High-converting landing page layouts, section orders & CTA placement
+  - `product`: Product-type specific design system blueprints (SaaS, E-commerce, Fintech, Crypto, AI-Native Chat Interfaces, etc.)
+  - `ux`: UX anti-patterns, usability best practices, severity, and good/bad code examples
+  - `typography`: Google font pairings, heading/body recommendations, mood keywords & CSS imports
+  - `icons`: Icon usage guidance, SVG libraries (Lucide, Heroicons), and code imports
+  - `react`: React & Next.js performance optimizations, re-render fixes & dynamic imports
+  - `web`: Web interface guidelines (ARIA, focus traps, virtual list, form inputs)
+
+*Example:* `python scripts/search.py "fintech dark theme" --domain color`
+
+#### 3. Stack-Specific Guidelines Search
+Search guidelines tailored to your exact tech stack:
+```bash
+python scripts/search.py "<query>" --stack <stack> --max-results 3
+```
+- **Supported Stacks (`--stack`)**:
+  - `html-tailwind` | `react` | `nextjs` | `vue` | `nuxtjs` | `nuxt-ui` | `svelte` | `swiftui` | `react-native` | `flutter` | `shadcn`
+
+*Example:* `python scripts/search.py "virtualized list performance" --stack react`
+
+---
+
+### Quick Reference for Professional Rules
+
+#### 1. Accessibility (WCAG 2.2) - CRITICAL
+- **Color Contrast**: Minimum 4.5:1 ratio for normal text, 3:1 for large text/UI components.
+- **Focus States**: Visible focus rings (`focus-visible:ring-2 focus-visible:ring-offset-2`) during keyboard navigation.
+- **Alt Text & ARIA**: Descriptive alt text for imagery; proper `aria-expanded`, `aria-controls`, and semantic HTML tags.
+
+#### 2. Touch & Interaction - CRITICAL
+- **Touch Target Size**: Minimum 44x44px for mobile devices.
+- **Loading & State**: Disable buttons during async requests to prevent duplicate submissions; show subtle spinners or skeleton loaders.
+- **Cursor Pointer**: Always add `cursor-pointer` to clickable/interactive elements.
+
+#### 3. Performance & Animation - HIGH / MEDIUM
+- **Image & Assets**: Use WebP/AVIF formats, `srcset`, explicit `width`/`height` attributes, and `loading="lazy"`.
+- **Micro-interactions**: Keep transition durations between 150ms–300ms (`ease-in-out`) for fast and responsive UI feel.
+- **Reduced Motion**: Respect `prefers-reduced-motion: reduce`.
+
+#### 4. Light/Dark Mode Contrast
+- **Light Mode**: High-contrast text (e.g. Slate-900 `#0F172A`); avoid pale grays for primary text. Ensure borders (`border-slate-200`) remain visible.
+- **Dark Mode**: High contrast foreground elements over dark slate/gray backgrounds; avoid pure black `#000000` text containers unless requested.
+
+#### 5. Dashboard & Information Hierarchy
+- **Layout Flow**: KPI summary cards top -> Trend charts middle -> Detailed data tables bottom.
+- **Visual Grid**: Consistent gaps/padding (16px / 24px). Clean subtle borders instead of heavy black dividers.
+- **Data Viz**: Maximum 3–5 coordinated colors in graphs. Responsive tooltips and legend alignment.
+
+---
+
+### UI/UX Design Pre-Delivery Checklist
+- [ ] **Visual Quality**: No emojis used as UI icons (use SVG icons from Lucide/Heroicons). Hover states do not cause layout shifts.
+- [ ] **Interaction**: `cursor-pointer` applied to all interactive elements. Smooth 150–300ms transitions.
+- [ ] **Contrast**: Text contrast ratio >= 4.5:1 in light mode. Visible borders in both light and dark modes.
+- [ ] **Layout & Responsive**: Tested across 375px, 768px, 1024px, 1440px breakpoints. No unintentional horizontal scrolling on mobile.
+- [ ] **Accessibility**: All images have meaningful `alt` text. Form inputs have explicitly connected `<label>` elements or `aria-label`.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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, serta praktik terbaik untuk **11 tumpukan teknologi (technology stacks)**.
+
+### Kondisi Pemicu
+Gunakan pedoman ini atau jalankan mesin pencari CLI ketika:
+- Mendesain komponen UI baru, landing page, atau dashboard.
+- Memilih skema warna, pasangan font, dan token desain.
+- Menghasilkan rekomendasi sistem desain (design system) lengkap untuk proyek.
+- Mengaudit kode untuk masalah UX, aksesibilitas (a11y), atau kinerja.
+- Membutuhkan pola kode spesifik stack (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).
+
+---
+
+### Integrasi CLI Pencarian Python BM25
+
+Skill ini dilengkapi mesin pencari Python cepat di `scripts/search.py` yang dapat mengueri 12 dataset CSV domain dan 11 dataset CSV tech-stack.
+
+#### 1. Generasi Rekomendasi Sistem Desain Lengkap
+Jalankan ini sebelum memulai desain/coding untuk mendapatkan spesifikasi sistem desain terintegrasi:
+```bash
+python scripts/search.py "<kueri proyek/topik>" --design-system -p "Nama Proyek" -f markdown
+```
+*Contoh:* `python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown`
+
+#### 2. Pencarian Berdasarkan Domain
+Cari domain desain tertentu:
+```bash
+python scripts/search.py "<kueri>" --domain <domain> --max-results 3
+```
+- **Domain yang Tersedia (`--domain`)**:
+  - `style`: Gaya desain visual (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, Spatial UI, elemen WebGL 3D, dll.)
+  - `prompt`: Prompt AI siap pakai & checklist implementasi CSS
+  - `color`: Palet warna Hex sesuai jenis produk (Utama, Sekunder, CTA, Background, Teks)
+  - `chart`: Rekomendasi jenis grafik, pustaka grafik, panduan kontras & aksesibilitas
+  - `landing`: Tata letak landing page konversi tinggi, urutan seksi & penempatan CTA
+  - `product`: Cetak biru sistem desain spesifik jenis produk (SaaS, E-commerce, Fintech, Crypto, Antarmuka Chat AI-Native, dll.)
+  - `ux`: Anti-pattern UX, praktik terbaik kegunaan, tingkat keparahan, serta contoh kode baik/buruk
+  - `typography`: Pasangan font Google Fonts, rekomendasi font judul/isi, mood & CSS import
+  - `icons`: Panduan penggunaan ikon, pustaka SVG (Lucide, Heroicons), & import kode
+  - `react`: Optimasi performa React & Next.js, perbaikan re-render & dynamic import
+  - `web`: Pedoman antarmuka web (ARIA, focus trap, virtual list, input form)
+
+*Contoh:* `python scripts/search.py "fintech dark theme" --domain color`
+
+#### 3. Pencarian Pedoman Spesifik Tech Stack
+Cari pedoman yang disesuaikan persis dengan tech stack proyek:
+```bash
+python scripts/search.py "<kueri>" --stack <stack> --max-results 3
+```
+- **Tech Stack yang Didukung (`--stack`)**:
+  - `html-tailwind` | `react` | `nextjs` | `vue` | `nuxtjs` | `nuxt-ui` | `svelte` | `swiftui` | `react-native` | `flutter` | `shadcn`
+
+*Contoh:* `python scripts/search.py "virtualized list performance" --stack react`
+
+---
+
+### Acuan Cepat Aturan Profesional
+
+#### 1. Aksesibilitas (WCAG 2.2) - KRITIS
+- **Kontras Warna**: Rasio kontras minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar/komponen UI.
+- **Focus States**: Tampilkan cincin fokus yang jelas (`focus-visible:ring-2 focus-visible:ring-offset-2`) saat menggunakan navigasi keyboard.
+- **Alt Text & ARIA**: Sediakan alt text deskriptif pada gambar; gunakan atribut `aria-expanded`, `aria-controls`, serta elemen HTML semantik.
+
+#### 2. Sentuhan & Interaksi - KRITIS
+- **Touch Target Size**: Ukuran area sentuh minimal 44x44px untuk perangkat mobile.
+- **Loading & State**: Nonaktifkan tombol selama operasi asinkron agar tidak terjadi submit ganda; tampilkan spinner halus atau skeleton loader.
+- **Cursor Pointer**: Wajib menambahkan `cursor-pointer` pada elemen interaktif yang dapat diklik.
+
+#### 3. Performa & Animasi - TINGGI / MENENGAH
+- **Aset Gambar**: Gunakan format WebP/AVIF, atribut `srcset`, dimensi `width`/`height` eksplisit, serta `loading="lazy"`.
+- **Mikro-interaksi**: Durasi transisi antara 150ms–300ms (`ease-in-out`) agar antarmuka terasa cepat dan responsif.
+- **Reduced Motion**: Hormati preferensi `prefers-reduced-motion: reduce`.
+
+#### 4. Kontras Mode Terang & Gelap
+- **Mode Terang**: Teks gelap kontras tinggi (misal Slate-900 `#0F172A`); hindari teks abu-abu pudar. Pastikan batas/border (`border-slate-200`) tetap terlihat.
+- **Mode Gelap**: Kontras tinggi antara elemen latar depan dengan latar belakang gelap; hindari kontainer teks serba hitam pekat `#000000` kecuali diminta khusus.
+
+#### 5. Dashboard & Hierarki Informasi
+- **Alur Tata Letak**: Kartu ringkasan KPI di atas -> Grafik tren di tengah -> Tabel detail data di bawah.
+- **Grid Visual**: Konsistensi gap/padding (16px / 24px). Gunakan border halus daripada pembatas tebal hitam.
+- **Visualisasi Data**: Maksimal 3–5 warna terkoordinasi dalam grafik. Tooltip responsif & perataan legenda yang rapi.
+
+---
+
+### Checklist Desain UI/UX Sebelum Delivery
+- [ ] **Visual**: Tidak menggunakan emoji sebagai ikon UI (gunakan ikon SVG seperti Lucide/Heroicons). Efek hover tidak menggeser tata letak.
+- [ ] **Interaksi**: `cursor-pointer` diterapkan pada semua elemen interaktif. Transisi halus 150–300ms.
+- [ ] **Kontras**: Rasio kontras teks minimal 4.5:1 pada mode terang. Border terlihat di kedua mode (terang & gelap).
+- [ ] **Tata Letak & Responsif**: Diuji pada breakpoint 375px, 768px, 1024px, 1440px. Tidak ada scroll horizontal tak disengaja pada perangkat mobile.
+- [ ] **Aksesibilitas**: Semua gambar memiliki `alt` text yang bermakna. Form input memiliki `<label>` terhubung atau `aria-label`.

package/skills/ui_ux_expert/SKILL.md

@@ -34,11 +34,12 @@ Active when the user requests help with:
 - **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 (Inspired by Monday.com)
-- **Visual Aesthetic**: Spacious, highly structured, clean white (`#FFFFFF`) or light gray (`#F9F9F9`) backgrounds with vibrant brand accents (e.g., `#0073ea` blue). 
+### 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`).
+- **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
@@ -87,10 +88,10 @@ Aktif ketika pengguna meminta bantuan terkait:
 - **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 (Terinspirasi Monday.com)
-- **Estetika Visual**: Luas, terstruktur, bersih dengan latar belakang putih (`#FFFFFF`) atau abu-abu terang (`#F9F9F9`), dipadukan dengan aksen merek yang cerah (mis. biru `#0073ea`).
+### 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 sangat halus (`shadow-sm`).
+- **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
@@ -112,3 +113,13 @@ Aktif ketika pengguna meminta bantuan terkait:
   - 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/vector-db-rag-expert/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: vector-db-rag-expert
+description: "Expert guide for high-performance Vector Databases, RAG architectures, pgvector HNSW indexing, hybrid search (Dense + BM25), and semantic chunking / Panduan ahli Vector DB, arsitektur RAG, pgvector HNSW, dan hybrid search."
+author: "Roedy Rustam"
+---
+
+# Vector DB & Deep RAG Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Production-grade guidelines for Vector Databases (pgvector, Qdrant, Pinecone, Milvus), RAG indexing strategies, HNSW vector search, hybrid retrieval (dense vector embeddings + BM25 sparse keyword ranking), semantic document chunking, and RAG evaluation frameworks.
+
+### Key Capabilities
+- **pgvector & Hybrid Search**: PostgreSQL `pgvector` HNSW indexing, cosine/L2 distance metric tuning, and BM25 hybrid re-ranking.
+- **RAG Architecture**: Parent-Document retrieval, Hypothetical Document Embeddings (HyDE), and contextual compression.
+- **RAG Evaluation**: Automated retrieval quality scoring using Ragas and TruLens.
+
+```typescript
+import { sql } from 'drizzle-orm';
+
+// Hybrid Search: Vector Cosine Similarity + Full Text Search
+export async function hybridSearch(queryVector: number[], queryText: string, limit = 10) {
+  const result = await db.execute(sql`
+    SELECT id, title, content,
+           (1 - (embedding <=> ${JSON.stringify(queryVector)}::vector)) * 0.7 +
+           ts_rank(fts, websearch_to_tsquery('english', ${queryText})) * 0.3 AS score
+    FROM documents
+    ORDER BY score DESC
+    LIMIT ${limit};
+  `);
+  return result;
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan tingkat produksi untuk Vector Database (pgvector, Qdrant, Pinecone, Milvus), arsitektur RAG, indeks pgvector HNSW, hybrid search (dense + BM25 sparse re-ranking), semantic chunking, dan evaluasi RAG.
+
+### Fitur Utama
+- **pgvector & Hybrid Search**: PostgreSQL `pgvector` HNSW indexing, tuning jarak cosine/L2, dan re-ranking BM25.
+- **Arsitektur RAG**: Retrieval Parent-Document, HyDE (Hypothetical Document Embeddings), dan kompresi kontekstual.
+- **Evaluasi RAG**: Scoring kualitas retrieval otomatis menggunakan Ragas dan TruLens.