vibes-plug 1.0.0

package/skills/typescript-expert/SKILL.md

@@ -0,0 +1,279 @@
+---
+name: typescript-expert
+description: "Expert guide for TypeScript 5.x advanced type system, strict mode, generics, utility types, branded types, and type-safe architectural patterns / Panduan ahli untuk sistem tipe TypeScript 5.x, mode strict, generics, utility types, branded types, dan pola arsitektur type-safe."
+author: "Roedy Rustam"
+---
+
+# TypeScript Expert (TypeScript 5.x Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.4+** features including `NoInfer`, `using` declarations, variadic tuple improvements, and `const` type parameters.
+
+### Trigger Conditions
+- Writing TypeScript with advanced generic constraints.
+- Enforcing strict type safety in existing codebases.
+- Designing type-safe API contracts (REST, tRPC, Zod schemas).
+- Implementing branded types for domain modeling.
+- Resolving complex type errors or `any` pollution.
+- Setting up `tsconfig.json` for strict projects.
+- Writing TypeScript utility types or type helpers.
+
+---
+
+### TypeScript 5.x — Key Features
+
+#### `using` Declarations (Explicit Resource Management, TS 5.2)
+```typescript
+// Automatically calls [Symbol.dispose] on scope exit
+function processFile(path: string) {
+  using handle = openFile(path); // disposed when function exits
+  handle.write('data');
+}
+
+// Async version with [Symbol.asyncDispose]
+async function processDatabase() {
+  await using conn = await getConnection();
+  await conn.query('SELECT 1');
+} // conn.close() called automatically
+```
+
+#### `NoInfer<T>` Utility Type (TS 5.4)
+```typescript
+// Prevents unintended type widening in generic inference
+function createState<T>(initial: T, fallback: NoInfer<T>): T {
+  return initial ?? fallback;
+}
+
+// TS now errors if fallback type doesn't match initial
+createState('hello', 42); // Error: Argument of type 'number' is not assignable to type 'string'
+```
+
+#### `const` Type Parameters (TS 5.0)
+```typescript
+// Infer literal types from generic arguments
+function identity<const T>(value: T): T { return value; }
+
+const a = identity(['a', 'b', 'c']); // type: readonly ["a", "b", "c"]
+const b = identity({ x: 10 });        // type: { readonly x: 10 }
+```
+
+---
+
+### Strict Mode Configuration
+
+```json
+// tsconfig.json — recommended strict config for production
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": false
+  }
+}
+```
+
+---
+
+### Advanced Type Patterns
+
+#### Branded Types for Domain Modeling
+```typescript
+// Prevent mixing semantically different primitives
+type Brand<T, B extends string> = T & { readonly __brand: B };
+
+type UserId   = Brand<string, 'UserId'>;
+type PostId   = Brand<string, 'PostId'>;
+type Email    = Brand<string, 'Email'>;
+
+// Constructor functions with validation
+function createUserId(id: string): UserId {
+  if (!id.startsWith('user_')) throw new Error('Invalid user ID format');
+  return id as UserId;
+}
+
+function getUser(id: UserId): Promise<User> { /* ... */ }
+
+const postId = 'post_abc' as PostId;
+getUser(postId); // Compile error: PostId is not assignable to UserId
+```
+
+#### Discriminated Unions for State Machines
+```typescript
+type ApiState<T> =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success'; data: T }
+  | { status: 'error'; error: Error };
+
+function render<T>(state: ApiState<T>) {
+  switch (state.status) {
+    case 'idle':    return 'Idle';
+    case 'loading': return 'Loading...';
+    case 'success': return `Data: ${JSON.stringify(state.data)}`;
+    case 'error':   return `Error: ${state.error.message}`;
+    // TypeScript enforces exhaustive matching
+  }
+}
+```
+
+#### Template Literal Types
+```typescript
+type EventName = 'click' | 'focus' | 'blur';
+type HandlerName = `on${Capitalize<EventName>}`;
+// Result: 'onClick' | 'onFocus' | 'onBlur'
+
+type DeepReadonly<T> = {
+  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
+};
+
+type Paths<T, Prefix extends string = ''> = {
+  [K in keyof T & string]: T[K] extends object
+    ? Paths<T[K], `${Prefix}${K}.`>
+    : `${Prefix}${K}`;
+}[keyof T & string];
+
+// Paths<{ user: { name: string; age: number } }> = "user.name" | "user.age"
+```
+
+#### Conditional Types and `infer`
+```typescript
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+type ArrayElement<T> = T extends (infer U)[] ? U : never;
+type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
+
+// Extract function parameter types
+type Parameters<T extends (...args: any) => any> =
+  T extends (...args: infer P) => any ? P : never;
+```
+
+---
+
+### Type-Safe Patterns
+
+#### Zod Schema + TypeScript Integration
+```typescript
+import { z } from 'zod';
+
+const UserSchema = z.object({
+  id: z.string().cuid(),
+  email: z.string().email(),
+  role: z.enum(['USER', 'ADMIN']),
+  createdAt: z.coerce.date(),
+});
+
+type User = z.infer<typeof UserSchema>; // Derive type from schema
+
+// Type-safe parsing with error handling
+function parseUser(data: unknown): User {
+  return UserSchema.parse(data); // throws ZodError on failure
+}
+
+const safeResult = UserSchema.safeParse(data);
+if (safeResult.success) {
+  console.log(safeResult.data.email); // fully typed
+}
+```
+
+#### Type-Safe Environment Variables
+```typescript
+// env.ts — validate env at startup
+import { z } from 'zod';
+
+const envSchema = z.object({
+  DATABASE_URL:    z.string().url(),
+  NEXTAUTH_SECRET: z.string().min(32),
+  NODE_ENV:        z.enum(['development', 'test', 'production']),
+  PORT:            z.coerce.number().default(3000),
+});
+
+export const env = envSchema.parse(process.env);
+// env.PORT is now type `number`, not `string | undefined`
+```
+
+#### Generic Repository Pattern
+```typescript
+interface Repository<T, TId> {
+  findById(id: TId): Promise<T | null>;
+  findMany(filter?: Partial<T>): Promise<T[]>;
+  create(data: Omit<T, 'id' | 'createdAt' | 'updatedAt'>): Promise<T>;
+  update(id: TId, data: Partial<Omit<T, 'id'>>): Promise<T>;
+  delete(id: TId): Promise<void>;
+}
+
+class UserRepository implements Repository<User, UserId> {
+  async findById(id: UserId) { /* ... */ }
+  // TypeScript enforces all interface methods are implemented
+}
+```
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Problem | Solution |
+|---|---|---|
+| `as any` | Disables type checking | Use `unknown` + narrowing or Zod |
+| `as Type` (unsafe cast) | Bypasses structural checking | Use type guards or `satisfies` |
+| `// @ts-ignore` | Silences real errors | Fix the root type issue |
+| `!` non-null assertion | Runtime errors if null | Use optional chaining + nullish coalescing |
+| `Object` / `{}` type | Accepts anything non-null | Use specific types or `Record<string, unknown>` |
+| Implicit `any` in callbacks | Breaks type inference | Always type function parameters |
+
+---
+
+### The `satisfies` Operator (TS 4.9+)
+```typescript
+// Validates against a type without widening the inferred type
+const config = {
+  port: 3000,
+  host: 'localhost',
+  debug: true,
+} satisfies Record<string, string | number | boolean>;
+
+// config.port is still inferred as `3000` (literal), not `number`
+config.port.toFixed(2); // Works! Literal type preserved.
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.4+** termasuk `NoInfer`, deklarasi `using`, peningkatan variadic tuple, dan parameter tipe `const`.
+
+### Kondisi Pemicu
+- Menulis TypeScript dengan generic constraints tingkat lanjut.
+- Menerapkan type safety ketat di codebase yang ada.
+- Merancang kontrak API type-safe (REST, tRPC, Zod schema).
+- Mengimplementasikan branded types untuk pemodelan domain.
+- Menyelesaikan type error kompleks atau polusi `any`.
+- Menyiapkan `tsconfig.json` untuk proyek strict.
+- Menulis utility types atau type helpers TypeScript.
+
+### Panduan Singkat
+
+- **Aktifkan strict mode**: Selalu gunakan `"strict": true` ditambah `noUncheckedIndexedAccess` dan `exactOptionalPropertyTypes`.
+- **Branded Types**: Cegah pencampuran primitif yang berbeda secara semantis (UserId vs PostId).
+- **Discriminated Union**: Gunakan untuk state machine dan variant data yang terbatas.
+- **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.

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

@@ -0,0 +1,63 @@
+---
+name: ui-components-expert
+description: Expert guide for checking and improving the 4 main pillars of UI components: input controls, navigation, information, and containers. / Panduan ahli untuk memeriksa dan meningkatkan 4 pilar utama komponen UI: kontrol input, navigasi, informasi, dan kontainer.
+---
+
+# 🎨 UI Components 4 Pillars Expert
+
+Skill ini memberikan panduan komprehensif untuk mengevaluasi, mengaudit, dan meningkatkan 4 pilar utama komponen User Interface (UI). Tujuannya adalah memastikan setiap komponen tidak hanya terlihat indah secara visual (Aesthetics), tetapi juga berfungsi secara intuitif (Usability), dapat diakses oleh semua pengguna (Accessibility/a11y), dan konsisten dengan sistem desain.
+
+## 🎯 4 Pilar Utama Komponen UI
+
+### 1. Kontrol Input (Input Controls)
+Komponen yang memungkinkan pengguna berinteraksi dan memasukkan data.
+*Contoh: Buttons, Checkboxes, Radio Buttons, Text Fields, Toggles/Switches, Dropdowns.*
+
+**✅ Checklist & Best Practices:**
+- **State Visual yang Jelas:** Pastikan ada perbedaan visual yang jelas untuk state `Default`, `Hover`, `Active/Pressed`, `Focus` (untuk aksesibilitas keyboard), dan `Disabled`.
+- **Ukuran Target Sentuh (Touch Target):** Minimal 44x44 pixel (berdasarkan standar HIG/Material) untuk kenyamanan pengguna mobile.
+- **Feedback Langsung:** Berikan umpan balik instan saat input berinteraksi (misalnya riak/ripple effect, perubahan warna, animasi transisi).
+- **Validasi & Error Handling:** Tampilkan pesan error yang spesifik dan inline pada form input, gunakan warna merah dan ikon peringatan, jangan hanya mengandalkan warna.
+- **Aksesibilitas (a11y):** Gunakan tag label yang terhubung ke input (misal `htmlFor`), sertakan atribut `aria-invalid` jika ada error.
+
+### 2. Navigasi (Navigation)
+Komponen yang membantu pengguna bergerak di dalam struktur aplikasi atau situs web.
+*Contoh: Menus, Tabs, Breadcrumbs, Pagination, Sidebars, Bottom Navigation.*
+
+**✅ Checklist & Best Practices:**
+- **Indikasi Lokasi Saat Ini (Active State):** Pengguna harus selalu tahu di mana mereka berada. Highlight menu atau tab yang sedang aktif dengan warna kontras, garis bawah, atau background tebal.
+- **Hierarki yang Logis:** Kelompokkan item navigasi berdasarkan kepentingannya. Jangan tampilkan terlalu banyak opsi (prinsip Hick's Law).
+- **Responsivitas:** Gunakan *Hamburger Menu* atau *Bottom Navigation* di perangkat mobile, pertahankan tab yang bisa digeser (swipeable/scrollable).
+- **Breadcrumbs:** Gunakan breadcrumbs untuk hierarki yang lebih dalam dari 2 level agar pengguna bisa dengan mudah kembali ke halaman induk.
+
+### 3. Informasi (Information)
+Komponen yang menyampaikan status, panduan, atau peringatan kepada pengguna.
+*Contoh: Notifications (Toasts), Tooltips, Badges, Alerts, Progress Bars, Spinners.*
+
+**✅ Checklist & Best Practices:**
+- **Pewarnaan Kontekstual:** Gunakan warna standar untuk status: Hijau (Sukses), Merah (Error), Kuning/Oranye (Peringatan), Biru (Informasi).
+- **Kemudahan Menutup (Dismissibility):** Berikan opsi (tombol X) untuk menutup notifikasi persisten. Untuk toast notifikasi sukses/info, berikan *auto-dismiss* (misalnya setelah 3-5 detik).
+- **Tooltips:** Hanya muncul saat di-*hover* (desktop) atau ditekan lama (mobile). Jangan gunakan tooltips untuk informasi kritis yang wajib dibaca, gunakan teks bantuan inline.
+- **Animasi Transisi:** Notifikasi harus muncul dan menghilang dengan animasi yang halus (slide in/out, fade in/out) agar tidak mengejutkan pengguna.
+
+### 4. Kontainer (Containers)
+Komponen yang mengelompokkan konten terkait menjadi unit visual yang terstruktur.
+*Contoh: Cards, Modals (Dialogs), Accordions, Drawers/Bottom Sheets, Carousels.*
+
+**✅ Checklist & Best Practices:**
+- **Visual Hierarchy & Depth:** Gunakan *Drop Shadows* atau batas tipis (borders) untuk membedakan kontainer dari background utama. Bedakan elevasi (z-index) antara Card biasa dan Modal yang melayang.
+- **Fokus Manajemen pada Modal:** Saat modal terbuka, background harus digelapkan (overlay/backdrop), *scroll* halaman di belakang harus dikunci (body `overflow: hidden`), dan fokus keyboard harus "terperangkap" (trap focus) di dalam modal. Bisa ditutup dengan tombol Escape (ESC) atau mengklik di luar area modal (backdrop click).
+- **Padding dan Whitespace:** Berikan ruang bernapas (padding) yang cukup di dalam kontainer. Hindari teks atau elemen yang terlalu menempel pada tepi *Card*.
+- **Clear Call to Action (CTA):** Pada Modal atau Card interaktif, pastikan tombol aksi utama (misal: "Simpan", "Beli") jelas dan ditempatkan secara logis (biasanya di kanan bawah atau bawah tengah).
+
+## 🛠 Panduan Penggunaan Skill
+
+Ketika Anda diminta untuk memeriksa atau meningkatkan UI aplikasi:
+
+1. **Identifikasi Komponen:** Kategorikan setiap komponen yang ada di halaman tersebut ke dalam 4 pilar di atas.
+2. **Audit Berdasarkan Checklist:** Jalankan checklist di atas pada komponen yang sedang direview. Cari kekurangan dalam *state*, aksesibilitas, responsivitas, dan umpan balik (feedback).
+3. **Usulkan Peningkatan Konkret:**
+   - **Perbaikan CSS/Tailwind:** Usulkan penambahan class seperti `focus:ring-2 focus:outline-none`, `hover:bg-gray-100`, atau transisi yang mulus `transition-colors duration-200`.
+   - **Peningkatan Aksesibilitas (a11y):** Berikan kode ARIA role atau atribut pendukung.
+   - **Interaksi JavaScript (opsional):** Jika diperlukan untuk modal atau tab, usulkan struktur state yang menangkap interaksi pengguna dengan benar.
+4. **Fokus pada Detail "Micro-interactions":** Peningkatan kecil pada *hover state* atau animasi *toast* berdampak besar pada impresi kualitas UI.

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

@@ -0,0 +1,201 @@
+---
+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`.

package/skills/ui-ux-pro-max/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click