vibes-plug 1.0.0 → 2.5.0

package/skills/graphql-apollo-expert/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: graphql-apollo-expert
+description: "Expert guide for designing and consuming GraphQL APIs. Covers Apollo Server/Client, NestJS GraphQL (Code-First & Schema-First), TypeGraphQL, caching, and N+1 query optimization."
+author: "Roedy Rustam"
+---
+
+# GraphQL & Apollo Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Production-grade guidance for building and consuming **GraphQL APIs**. Focuses on the **Apollo** ecosystem (Apollo Server, Apollo Client, Federation), **NestJS GraphQL** integration, and solving common performance pitfalls like the N+1 query problem using DataLoaders.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Setting up a GraphQL server with NestJS, Express, or Apollo Server.
+- Using `@apollo/client` or `@vue/apollo-composable` on the frontend.
+- Deciding between Code-First vs. Schema-First GraphQL design.
+- Optimizing backend database queries triggered by GraphQL resolvers (N+1 problem).
+- Implementing GraphQL Subscriptions via WebSockets.
+
+### Core Concepts
+
+#### 1. Code-First vs Schema-First (NestJS)
+- **Code-First (Recommended for TypeScript):** Define resolvers and object types using TS decorators. The schema `.gql` file is automatically generated. Ensures a single source of truth.
+- **Schema-First:** Write raw `.gql` files and use tools to generate TypeScript interfaces.
+
+```typescript
+// NestJS Code-First Example
+import { ObjectType, Field, Int } from '@nestjs/graphql';
+
+@ObjectType()
+export class User {
+  @Field(() => Int)
+  id: number;
+
+  @Field()
+  email: string;
+}
+
+import { Resolver, Query } from '@nestjs/graphql';
+
+@Resolver(() => User)
+export class UserResolver {
+  @Query(() => [User])
+  async users(): Promise<User[]> {
+    return [{ id: 1, email: 'user@example.com' }];
+  }
+}
+```
+
+#### 2. The N+1 Problem & DataLoader
+GraphQL's resolver architecture easily causes the N+1 query problem (e.g., querying authors and their posts results in 1 query for authors, and N queries for each author's posts).
+**Solution:** Always use `DataLoader` to batch and cache database requests within a single GraphQL execution tick.
+
+#### 3. Apollo Client (Frontend)
+Use Apollo Client for robust caching and normalized state management on the frontend.
+```tsx
+import { useQuery, gql } from '@apollo/client';
+
+const GET_USERS = gql`
+  query GetUsers {
+    users {
+      id
+      email
+    }
+  }
+`;
+
+function UserList() {
+  const { loading, error, data } = useQuery(GET_USERS);
+  if (loading) return <p>Loading...</p>;
+  return <div>{data.users[0].email}</div>;
+}
+```
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `js-backend-expert` — For setting up the underlying Node.js/NestJS server architecture.
+- `database-orm-expert` — For connecting Prisma/Drizzle ORM directly to GraphQL resolvers and DataLoaders.
+- `senior-frontend` / `vue-frontend-expert` — For integrating Apollo Client into React or Vue applications.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "API Design & Contracts".
+- `zero-to-prod-orchestrator` — Phase 4 (Backend APIs).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan produksi untuk membangun dan mengkonsumsi API **GraphQL**. Mencakup ekosistem **Apollo**, **NestJS GraphQL**, dan teknik optimasi performa seperti *DataLoader*.
+
+### Kondisi Pemicu
+- Saat mengkonfigurasi server GraphQL menggunakan NestJS atau Apollo.
+- Saat menggunakan Apollo Client di aplikasi React atau Vue.
+- Saat menghadapi masalah performa N+1 query pada resolusi data.
+
+### Panduan Singkat
+- **Pilih Code-First di TypeScript:** Di NestJS atau TypeScript murni, gunakan pendekatan *Code-First* (`@nestjs/graphql` atau TypeGraphQL) agar Anda tidak perlu mengelola file `.gql` dan *interface* TS secara terpisah.
+- **Gunakan DataLoader Wajib:** Jangan pernah melakukan *query* database langsung di dalam resolver yang mengembalikan *list of objects* bersarang. Gunakan `DataLoader` dari Facebook untuk mengumpulkan (batching) request database.
+- **Frontend Caching:** Manfaatkan normalisasi *cache* bawaan Apollo Client agar Anda tidak perlu menggunakan Redux atau state manager lain untuk menyimpan data dari server.

package/skills/hig/SKILL.md

@@ -1,188 +1,188 @@
----
-name: hig
-description: "Applies Human Interface Guidelines (HIG) principles — Hierarchy, Harmony, and Consistency — to UI/UX designs to ensure intuitive and cohesive interfaces / Menerapkan prinsip Human Interface Guidelines (HIG) — Hierarchy, Harmony, dan Consistency — pada desain UI/UX untuk memastikan antarmuka yang intuitif dan kohesif."
-author: "Roedy Rustam"
----
-
-# Human Interface Guidelines (HIG) Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Applies Human Interface Guidelines (HIG) principles to web and mobile UI/UX designs. Covers the core triad (Hierarchy, Harmony, Consistency), Apple's HIG 2025 updates, Google Material Design 3, spatial design for Apple Vision Pro, and modern accessibility requirements.
-
-### Trigger Conditions
-- Reviewing or critiquing a UI design for HIG violations.
-- Making design decisions about typography scale, color usage, or layout hierarchy.
-- Designing for multiple platforms (iOS, Android, web) with consistent patterns.
-- Evaluating whether a UI feels "premium" or "amateur".
-- Ensuring UI components follow platform conventions (button placement, nav patterns).
-
-### The Core HIG Triad
-
-#### 1. Hierarchy — Guide the User's Eye
-Visual hierarchy controls where the user looks first and how they navigate information.
-
-**Typography Hierarchy:**
-```css
-/* Clear hierarchy with size and weight — 4 levels max */
-.h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
-.h2 { font-size: 1.5rem;  font-weight: 600; letter-spacing: -0.01em; }
-.h3 { font-size: 1.25rem; font-weight: 600; }
-.body { font-size: 1rem;    font-weight: 400; }
-.caption { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); }
-```
-
-**Spatial Hierarchy (Z-axis):**
-- Surface level: cards, panels — `shadow-sm`
-- Raised level: dropdowns, tooltips — `shadow-md`
-- Overlay level: modals, drawers — `shadow-xl`
-- Floating level: toasts, command palette — `shadow-2xl`
-
-**Color Hierarchy:**
-- Primary action: brand color (1 per screen)
-- Secondary action: muted/ghost variant
-- Destructive action: red — far from primary CTA
-
-#### 2. Harmony — Visual Cohesion
-All elements should feel like they belong to the same family.
-
-**Spacing Scale (8pt Grid):**
-```
-4px   → xs gaps (icon padding, tight list items)
-8px   → sm (between related elements)
-16px  → md (card padding, section spacing)
-24px  → lg (between sections)
-32px  → xl (between major blocks)
-48px  → 2xl (page-level separation)
-```
-
-**Border Radius Consistency:**
-- Small elements (badges, chips): `rounded-full` or `rounded-sm`
-- Medium elements (inputs, buttons): `rounded-md`
-- Large elements (cards, modals): `rounded-xl`
-- Never mix `rounded-none` with `rounded-2xl` in the same screen
-
-**Color Harmony:**
-```
-Analogous:     Brand + ±30° hue neighbors (natural, calm)
-Complementary: Brand + 180° (high contrast, CTAs)
-Triadic:       Brand + 120°/240° (vibrant, use sparingly)
-Monochromatic: Single hue, varying lightness (professional)
-```
-
-#### 3. Consistency — Reduce Cognitive Load
-Users should never wonder "how does this work?" — patterns should be predictable.
-
-**Platform Conventions (Web):**
-- Primary CTA: top-right (desktop nav) or bottom-center (mobile)
-- Destructive actions: always require confirmation dialogs
-- Form submission: Enter key submits, Escape cancels/closes
-- Navigation: Breadcrumbs for 3+ depth levels
-- Empty states: Always provide an actionable CTA
-
-**Component Consistency Checklist:**
-- [ ] All buttons use the same radius (`rounded-md` everywhere).
-- [ ] All modals have the same padding (`p-6`) and close behavior (Escape key).
-- [ ] All form inputs have the same height (`h-9`) and focus ring style.
-- [ ] All error messages appear in the same position (below the input field).
-- [ ] All tables use the same row height and hover style.
-
-### Apple HIG 2025 Updates
-
-#### Spatial Design (Vision Pro)
-- Use **depth** as an organizational tool — foreground elements are more important.
-- Avoid placing interactive elements outside comfortable viewing angles (±45° center).
-- Use **glass morphism** (`backdrop-blur`) for panels to maintain spatial context.
-- Prefer indirect input (gaze + pinch) over precise pointer interactions.
-
-#### iOS 18 Design Patterns
-- **Liquid Glass**: Full glass-morphism on navigation bars and toolbars.
-- **Adaptive layouts**: Single codebase adapts from iPhone to iPad to Mac.
-- **Symbols**: SF Symbols 6 with variable rendering (multicolor, hierarchical).
-- **Menu patterns**: Context menus replace modal bottom sheets where possible.
-
-### Material Design 3 (Google)
-
-#### Dynamic Color (M3)
-Generate a full color system from a single seed color:
-```typescript
-import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
-
-const theme = themeFromSourceColor(argbFromHex('#6750A4'));
-// Generates: primary, secondary, tertiary, error + all tonal palettes
-```
-
-#### Key M3 Components
-- **Cards**: 3 variants — Elevated (shadow), Filled (surface variant), Outlined (border)
-- **Chips**: Filter, Input, Suggestion, Assist — each with distinct purpose
-- **Navigation**: Bottom bar (≤5 items), Rail (tablet), Drawer (desktop)
-
-### HIG Audit Protocol
-When reviewing a design, check:
-1. **Hierarchy**: Is the primary action immediately obvious? Is text contrast sufficient?
-2. **Harmony**: Is spacing consistent (8pt grid)? Are border radii uniform?
-3. **Consistency**: Do interactive elements follow platform conventions?
-4. **Accessibility**: Does it pass WCAG 2.2? Are touch targets ≥ 24×24px?
-5. **Platform fit**: Does it feel native to its target platform?
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Menerapkan prinsip Human Interface Guidelines (HIG) pada desain UI/UX web dan mobile. Mencakup triad inti (Hierarchy, Harmony, Consistency), pembaruan Apple HIG 2025, Google Material Design 3, desain spasial untuk Apple Vision Pro, dan persyaratan aksesibilitas modern.
-
-### Kondisi Pemicu
-- Meninjau atau mengkritik desain UI untuk pelanggaran HIG.
-- Membuat keputusan desain tentang skala tipografi, penggunaan warna, atau hierarki tata letak.
-- Merancang untuk berbagai platform (iOS, Android, web) dengan pola yang konsisten.
-- Mengevaluasi apakah UI terasa "premium" atau "amatir".
-- Memastikan komponen UI mengikuti konvensi platform.
-
-### Triad HIG Inti
-
-#### 1. Hierarki — Pandu Mata Pengguna
-Hierarki visual mengontrol di mana pengguna melihat pertama dan bagaimana mereka menavigasi informasi.
-- **Hierarki tipografi**: 4 level maksimal — H1 (2.25rem, 700), H2 (1.5rem, 600), H3 (1.25rem, 600), body (1rem, 400).
-- **Hierarki spasial (sumbu-Z)**: Surface (shadow-sm), Raised (shadow-md), Overlay (shadow-xl), Floating (shadow-2xl).
-- **Hierarki warna**: Satu warna brand per layar, aksi sekunder dengan varian muted/ghost, aksi destruktif dengan merah — jauh dari CTA utama.
-
-#### 2. Harmoni — Kohesi Visual
-Semua elemen harus terasa seperti milik keluarga yang sama.
-- **Skala spacing (grid 8pt)**: 4px, 8px, 16px, 24px, 32px, 48px.
-- **Konsistensi border radius**: Elemen kecil (rounded-full), sedang (rounded-md), besar (rounded-xl). Jangan campurkan rounded-none dengan rounded-2xl di layar yang sama.
-- **Harmoni warna**: Analogis, komplementer, triadik, atau monokromatik — pilih satu skema dan patuhi.
-
-#### 3. Konsistensi — Kurangi Beban Kognitif
-Pengguna tidak pernah bertanya-tanya "bagaimana cara ini bekerja?" — pola harus dapat diprediksi.
-- Konvensi platform: CTA utama di kanan atas (nav desktop) atau bawah tengah (mobile).
-- Aksi destruktif selalu memerlukan dialog konfirmasi.
-- Semua komponen sejenis menggunakan radius, padding, dan perilaku yang sama.
-
-### Pembaruan Apple HIG 2025
-
-#### Desain Spasial (Vision Pro)
-Gunakan kedalaman sebagai alat organisasi. Gunakan glass-morphism (`backdrop-blur`) untuk panel. Hindari elemen interaktif di luar sudut pandang yang nyaman.
-
-#### Pola iOS 18
-Liquid Glass untuk navigation bar. Tata letak adaptif dari iPhone ke iPad ke Mac. SF Symbols 6 dengan rendering variabel.
-
-### Material Design 3 (Google)
-
-#### Warna Dinamis (M3)
-Hasilkan sistem warna penuh dari satu warna seed menggunakan `@material/material-color-utilities`.
-
-#### Komponen M3 Utama
-- **Kartu**: Elevated (bayangan), Filled (varian permukaan), Outlined (batas).
-- **Chip**: Filter, Input, Saran, Bantuan — masing-masing dengan tujuan berbeda.
-- **Navigasi**: Bottom bar (≤5 item), Rail (tablet), Drawer (desktop).
-
-### Protokol Audit HIG
-Saat meninjau desain, periksa: Hierarki (apakah aksi utama langsung terlihat jelas?), Harmoni (apakah spacing konsisten?), Konsistensi (apakah elemen interaktif mengikuti konvensi platform?), Aksesibilitas (lulus WCAG 2.2? Target sentuh ≥ 24×24px?), dan Kesesuaian Platform (apakah terasa native untuk platform target?).
+---
+name: hig
+description: "Applies Human Interface Guidelines (HIG) principles — Hierarchy, Harmony, and Consistency — to UI/UX designs to ensure intuitive and cohesive interfaces / Menerapkan prinsip Human Interface Guidelines (HIG) — Hierarchy, Harmony, dan Consistency — pada desain UI/UX untuk memastikan antarmuka yang intuitif dan kohesif."
+author: "Roedy Rustam"
+---
+
+# Human Interface Guidelines (HIG) Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Applies Human Interface Guidelines (HIG) principles to web and mobile UI/UX designs. Covers the core triad (Hierarchy, Harmony, Consistency), Apple's HIG 2025 updates, Google Material Design 3, spatial design for Apple Vision Pro, and modern accessibility requirements.
+
+### Trigger Conditions
+- Reviewing or critiquing a UI design for HIG violations.
+- Making design decisions about typography scale, color usage, or layout hierarchy.
+- Designing for multiple platforms (iOS, Android, web) with consistent patterns.
+- Evaluating whether a UI feels "premium" or "amateur".
+- Ensuring UI components follow platform conventions (button placement, nav patterns).
+
+### The Core HIG Triad
+
+#### 1. Hierarchy — Guide the User's Eye
+Visual hierarchy controls where the user looks first and how they navigate information.
+
+**Typography Hierarchy:**
+```css
+/* Clear hierarchy with size and weight — 4 levels max */
+.h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
+.h2 { font-size: 1.5rem;  font-weight: 600; letter-spacing: -0.01em; }
+.h3 { font-size: 1.25rem; font-weight: 600; }
+.body { font-size: 1rem;    font-weight: 400; }
+.caption { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); }
+```
+
+**Spatial Hierarchy (Z-axis):**
+- Surface level: cards, panels — `shadow-sm`
+- Raised level: dropdowns, tooltips — `shadow-md`
+- Overlay level: modals, drawers — `shadow-xl`
+- Floating level: toasts, command palette — `shadow-2xl`
+
+**Color Hierarchy:**
+- Primary action: brand color (1 per screen)
+- Secondary action: muted/ghost variant
+- Destructive action: red — far from primary CTA
+
+#### 2. Harmony — Visual Cohesion
+All elements should feel like they belong to the same family.
+
+**Spacing Scale (8pt Grid):**
+```
+4px   → xs gaps (icon padding, tight list items)
+8px   → sm (between related elements)
+16px  → md (card padding, section spacing)
+24px  → lg (between sections)
+32px  → xl (between major blocks)
+48px  → 2xl (page-level separation)
+```
+
+**Border Radius Consistency:**
+- Small elements (badges, chips): `rounded-full` or `rounded-sm`
+- Medium elements (inputs, buttons): `rounded-md`
+- Large elements (cards, modals): `rounded-xl`
+- Never mix `rounded-none` with `rounded-2xl` in the same screen
+
+**Color Harmony:**
+```
+Analogous:     Brand + ±30° hue neighbors (natural, calm)
+Complementary: Brand + 180° (high contrast, CTAs)
+Triadic:       Brand + 120°/240° (vibrant, use sparingly)
+Monochromatic: Single hue, varying lightness (professional)
+```
+
+#### 3. Consistency — Reduce Cognitive Load
+Users should never wonder "how does this work?" — patterns should be predictable.
+
+**Platform Conventions (Web):**
+- Primary CTA: top-right (desktop nav) or bottom-center (mobile)
+- Destructive actions: always require confirmation dialogs
+- Form submission: Enter key submits, Escape cancels/closes
+- Navigation: Breadcrumbs for 3+ depth levels
+- Empty states: Always provide an actionable CTA
+
+**Component Consistency Checklist:**
+- [ ] All buttons use the same radius (`rounded-md` everywhere).
+- [ ] All modals have the same padding (`p-6`) and close behavior (Escape key).
+- [ ] All form inputs have the same height (`h-9`) and focus ring style.
+- [ ] All error messages appear in the same position (below the input field).
+- [ ] All tables use the same row height and hover style.
+
+### Apple HIG 2025 Updates
+
+#### Spatial Design (Vision Pro)
+- Use **depth** as an organizational tool — foreground elements are more important.
+- Avoid placing interactive elements outside comfortable viewing angles (±45° center).
+- Use **glass morphism** (`backdrop-blur`) for panels to maintain spatial context.
+- Prefer indirect input (gaze + pinch) over precise pointer interactions.
+
+#### iOS 18 Design Patterns
+- **Liquid Glass**: Full glass-morphism on navigation bars and toolbars.
+- **Adaptive layouts**: Single codebase adapts from iPhone to iPad to Mac.
+- **Symbols**: SF Symbols 6 with variable rendering (multicolor, hierarchical).
+- **Menu patterns**: Context menus replace modal bottom sheets where possible.
+
+### Material Design 3 (Google)
+
+#### Dynamic Color (M3)
+Generate a full color system from a single seed color:
+```typescript
+import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
+
+const theme = themeFromSourceColor(argbFromHex('#6750A4'));
+// Generates: primary, secondary, tertiary, error + all tonal palettes
+```
+
+#### Key M3 Components
+- **Cards**: 3 variants — Elevated (shadow), Filled (surface variant), Outlined (border)
+- **Chips**: Filter, Input, Suggestion, Assist — each with distinct purpose
+- **Navigation**: Bottom bar (≤5 items), Rail (tablet), Drawer (desktop)
+
+### HIG Audit Protocol
+When reviewing a design, check:
+1. **Hierarchy**: Is the primary action immediately obvious? Is text contrast sufficient?
+2. **Harmony**: Is spacing consistent (8pt grid)? Are border radii uniform?
+3. **Consistency**: Do interactive elements follow platform conventions?
+4. **Accessibility**: Does it pass WCAG 2.2? Are touch targets ≥ 24×24px?
+5. **Platform fit**: Does it feel native to its target platform?
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Menerapkan prinsip Human Interface Guidelines (HIG) pada desain UI/UX web dan mobile. Mencakup triad inti (Hierarchy, Harmony, Consistency), pembaruan Apple HIG 2025, Google Material Design 3, desain spasial untuk Apple Vision Pro, dan persyaratan aksesibilitas modern.
+
+### Kondisi Pemicu
+- Meninjau atau mengkritik desain UI untuk pelanggaran HIG.
+- Membuat keputusan desain tentang skala tipografi, penggunaan warna, atau hierarki tata letak.
+- Merancang untuk berbagai platform (iOS, Android, web) dengan pola yang konsisten.
+- Mengevaluasi apakah UI terasa "premium" atau "amatir".
+- Memastikan komponen UI mengikuti konvensi platform.
+
+### Triad HIG Inti
+
+#### 1. Hierarki — Pandu Mata Pengguna
+Hierarki visual mengontrol di mana pengguna melihat pertama dan bagaimana mereka menavigasi informasi.
+- **Hierarki tipografi**: 4 level maksimal — H1 (2.25rem, 700), H2 (1.5rem, 600), H3 (1.25rem, 600), body (1rem, 400).
+- **Hierarki spasial (sumbu-Z)**: Surface (shadow-sm), Raised (shadow-md), Overlay (shadow-xl), Floating (shadow-2xl).
+- **Hierarki warna**: Satu warna brand per layar, aksi sekunder dengan varian muted/ghost, aksi destruktif dengan merah — jauh dari CTA utama.
+
+#### 2. Harmoni — Kohesi Visual
+Semua elemen harus terasa seperti milik keluarga yang sama.
+- **Skala spacing (grid 8pt)**: 4px, 8px, 16px, 24px, 32px, 48px.
+- **Konsistensi border radius**: Elemen kecil (rounded-full), sedang (rounded-md), besar (rounded-xl). Jangan campurkan rounded-none dengan rounded-2xl di layar yang sama.
+- **Harmoni warna**: Analogis, komplementer, triadik, atau monokromatik — pilih satu skema dan patuhi.
+
+#### 3. Konsistensi — Kurangi Beban Kognitif
+Pengguna tidak pernah bertanya-tanya "bagaimana cara ini bekerja?" — pola harus dapat diprediksi.
+- Konvensi platform: CTA utama di kanan atas (nav desktop) atau bawah tengah (mobile).
+- Aksi destruktif selalu memerlukan dialog konfirmasi.
+- Semua komponen sejenis menggunakan radius, padding, dan perilaku yang sama.
+
+### Pembaruan Apple HIG 2025
+
+#### Desain Spasial (Vision Pro)
+Gunakan kedalaman sebagai alat organisasi. Gunakan glass-morphism (`backdrop-blur`) untuk panel. Hindari elemen interaktif di luar sudut pandang yang nyaman.
+
+#### Pola iOS 18
+Liquid Glass untuk navigation bar. Tata letak adaptif dari iPhone ke iPad ke Mac. SF Symbols 6 dengan rendering variabel.
+
+### Material Design 3 (Google)
+
+#### Warna Dinamis (M3)
+Hasilkan sistem warna penuh dari satu warna seed menggunakan `@material/material-color-utilities`.
+
+#### Komponen M3 Utama
+- **Kartu**: Elevated (bayangan), Filled (varian permukaan), Outlined (batas).
+- **Chip**: Filter, Input, Saran, Bantuan — masing-masing dengan tujuan berbeda.
+- **Navigasi**: Bottom bar (≤5 item), Rail (tablet), Drawer (desktop).
+
+### Protokol Audit HIG
+Saat meninjau desain, periksa: Hierarki (apakah aksi utama langsung terlihat jelas?), Harmoni (apakah spacing konsisten?), Konsistensi (apakah elemen interaktif mengikuti konvensi platform?), Aksesibilitas (lulus WCAG 2.2? Target sentuh ≥ 24×24px?), dan Kesesuaian Platform (apakah terasa native untuk platform target?).

package/skills/hyper-context-synthesizer/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: hyper-context-synthesizer
+description: "Cross-project episodic memory. Synthesizes bug fixes and architectural choices from previous tasks to bypass zero-shot limitations / Memori episodik lintas proyek. Menyintesis perbaikan bug dan pilihan arsitektur dari tugas sebelumnya untuk melampaui batasan zero-shot."
+author: vibes-plug-swarm
+---
+
+# Hyper-Context Synthesizer (Cross-Project Episodic Memory)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Transforms the AI from a stateless engine into a senior teammate with persistent, cross-project memory. It maintains a centralized vector or semantic knowledge graph (in the user's root environment) of complex bug fixes, architectural decisions, and personal coding styles across ALL projects the user has worked on. When a new project encounters a familiar problem, the synthesizer retrieves the exact context and applies the historical fix, bypassing zero-shot limitations and repetitive prompt engineering.
+
+### Trigger Conditions
+- During Phase 1 (Discovery & PRD) to load historical preferences and avoid past mistakes.
+- When facing complex, obscure bugs that were solved in a different repository or earlier conversation.
+- When standard coding attempts fail and require deep historical experiential retrieval.
+
+### Operating Protocol
+1. **Continuous Capture**: When a difficult problem is solved, it extracts the root cause, solution code, and rationale, storing it in the global knowledge graph.
+2. **Contextual Retrieval**: On new sessions, it queries the memory graph against the current task intent.
+3. **Synthesis & Injection**: Injects the historical context directly into the current execution loop, stating explicitly: *"I remember we solved this architectural issue in Project X using technique Y. Applying the same proven pattern here."*
+
+## Orchestration & Integration
+- Enhances `self-evolving-memory-graph` by elevating it from single-repo memory to cross-workspace episodic memory.
+- Feeds crucial background context into `brainstorming` and `zero-to-prod-orchestrator` during the ideation phase.
+- Prevents recurring regressions during `autonomous-tdd-debugger` loops.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Mengubah AI dari mesin yang melupakan konteks (*stateless*) menjadi rekan setim senior yang memiliki memori episodik lintas-proyek yang persisten. Agen ini memelihara grafik pengetahuan semantik atau vektor terpusat (di lingkungan root pengguna) tentang perbaikan bug yang kompleks, keputusan arsitektural, dan gaya penulisan kode pribadi di SELURUH proyek yang pernah dikerjakan pengguna. Ketika sebuah proyek baru menghadapi masalah yang tidak asing, agen ini akan mengambil konteks yang tepat dan menerapkan perbaikan historis tersebut, melampaui batasan *zero-shot* dan meminimalisir manipulasi *prompt* yang berulang.
+
+### Kondisi Pemicu
+- Saat Fase 1 (Penemuan & PRD) untuk memuat preferensi historis dan menghindari kesalahan di masa lalu.
+- Ketika menghadapi bug yang kompleks dan tidak lazim yang pernah diselesaikan di repositori lain atau di percakapan sebelumnya.
+- Ketika upaya koding standar gagal dan membutuhkan pencarian pengalaman historis yang mendalam.
+
+### Protokol Operasi
+1. **Penangkapan Berkelanjutan**: Ketika masalah sulit berhasil dipecahkan, agen ini mengekstrak akar masalah, kode solusi, dan alasan logisnya, lalu menyimpannya di grafik pengetahuan global.
+2. **Pencarian Kontekstual**: Pada sesi baru, ia melakukan *query* ke grafik memori berdasarkan tujuan tugas saat ini.
+3. **Sintesis & Injeksi**: Menyuntikkan konteks historis langsung ke dalam loop eksekusi saat ini, dan secara eksplisit menyatakan: *"Saya ingat kita pernah menyelesaikan masalah arsitektural ini di Proyek X menggunakan teknik Y. Saya akan menerapkan pola terbukti yang sama di sini."*
+
+## Integrasi Orkestrasi
+- Memperkuat `self-evolving-memory-graph` dengan meningkatkannya dari sekadar memori repositori tunggal menjadi memori episodik lintas-workspace.
+- Memasok konteks latar belakang krusial ke dalam `brainstorming` dan `zero-to-prod-orchestrator` selama fase ideasi.
+- Mencegah regresi berulang selama *loop* `autonomous-tdd-debugger`.

package/skills/js-backend-expert/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: js-backend-expert
-description: "Expert-level skill for Node.js 22+, Bun 1.2+, and Deno 2.x backend development. Covers Express 5, Fastify 5, Hono, NestJS, Prisma 6, Drizzle ORM, WebSockets, and microservices in English and Indonesian."
+description: "Expert-level skill for Node.js 24+ (LTS), Bun 1.2+, and Deno 2.x backend development. Covers Express 5, Fastify 5, Hono v4, NestJS, Prisma 6, Drizzle ORM, WebSockets, BullMQ, OpenTelemetry, and microservices in English and Indonesian."
 author: "Roedy Rustam"
 ---
 
-# JS Backend Expert (Node.js 24 / Bun 1.2 / Deno 2.x Edition)
+# JS Backend Expert (Node.js 24 LTS / Bun 1.2 / Deno 2.x Edition)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -92,10 +92,16 @@ const res = await client.users.$post({ json: { name: 'Alice', email: 'alice@exam
 const user = await res.json(); // Fully typed!
 ```
 
-#### 3. Express 5
-Express 5 natively catches rejected promises in async route handlers — eliminating the need for `express-async-errors`. It's ideal for teams already familiar with Express.
+#### 3. NestJS (Enterprise Architecture)
+Use NestJS for large-scale, enterprise-grade applications. It enforces a strict modular architecture (Controllers, Providers, Modules) inspired by Angular.
+- **Dependency Injection**: Leverage built-in DI for testable, loosely coupled services.
+- **TypeScript First**: Decorators (`@Controller()`, `@Get()`) provide clean, declarative routing.
+- **Under the Hood**: By default uses Express, but can be switched to Fastify for higher performance using `platform-fastify`.
 
-#### 4. Edge Runtime (Cloudflare Workers / Vercel Edge)
+#### 4. Express 5
+Express 5 natively catches rejected promises in async route handlers — eliminating the need for `express-async-errors`. While less opinionated than NestJS and slower than Fastify, its ecosystem is unparalleled. Ideal for teams migrating legacy apps.
+
+#### 5. Edge Runtime (Cloudflare Workers / Vercel Edge)
 For ultra-low latency at the edge, use **Hono** (runs natively on all edge platforms):
 ```typescript
 // Cloudflare Worker
@@ -146,13 +152,21 @@ process.on('SIGTERM', () => shutdown('SIGTERM'));
 process.on('SIGINT', () => shutdown('SIGINT'));
 ```
 
+### Skill Orchestration & Handoff
+- **Upstream Orchestrator**: Executes during **Phase 4** of `zero-to-prod-orchestrator` or after backend decision lock in `brainstorming`.
+- **API Contracts & Specs**: Delegate OpenAPI / GraphQL / gRPC design to `api-design-expert` and TypeScript type generation to `typescript-expert`.
+- **Database & ORM Layer**: Delegate schema design, migrations, and pooling to `database-orm-expert` and `supabase-migration`.
+- **Authentication & Security**: Delegate JWT/OAuth2 flows to `authentication-identity-expert` and environment secret security to `zero-trust-secret-vault`.
+- **Durable Async Jobs**: Delegate fault-tolerant long-running workflows to `async-queue-temporal-expert`.
+- **Automated Testing & Docs**: Delegate integration testing to `e2e-testing-expert` and update change logs via `auto-doc-updater`.
+
 ---
 
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
 ### Deskripsi
-Panduan tingkat produksi untuk membangun API backend JavaScript/TypeScript yang cepat, skalabel, dan tangguh di lingkungan **Node.js 24 (LTS)**, **Bun 1.2+**, dan **Deno 2.x**. Mencakup framework berkinerja tinggi (Fastify 5, Hono, Express 5, NestJS), ORM type-safe (Drizzle, Prisma 6), **Hono RPC** untuk komunikasi full-stack type-safe, pola Edge Runtime, WebSocket, background jobs (BullMQ), dan penanganan *graceful shutdown*.
+Panduan tingkat produksi untuk membangun API backend JavaScript/TypeScript yang cepat, skalabel, dan tangguh di lingkungan **Node.js 24 LTS**, **Bun 1.2+**, dan **Deno 2.x**. Mencakup framework berkinerja tinggi (Fastify 5, Hono v4, Express 5, NestJS), ORM type-safe (Drizzle, Prisma 6), **Hono RPC** untuk komunikasi full-stack type-safe, pola Edge Runtime, WebSocket, background jobs (BullMQ), OpenTelemetry, dan penanganan *graceful shutdown*.
 
 ### Kondisi Pemicu
 - Merancang atau merefaktor aplikasi backend Node.js, Bun, atau Deno.
@@ -174,10 +188,13 @@ Gunakan untuk REST API dengan throughput tinggi. Selalu validasi input menggunak
 #### 2. Hono & Hono RPC — Multi-Runtime & Type-Safe Full-Stack
 Hono berjalan di Node.js, Bun, Cloudflare Workers, dan Deno. **Hono RPC** adalah fitur unggulan 2026 — panggilan API end-to-end yang fully type-safe tanpa code generation. Klien mendapatkan tipe yang tepat dari definisi server secara otomatis.
 
-#### 3. Express 5
-Express 5 otomatis menangkap rejected promises di async route handler tanpa butuh library tambahan.
+#### 3. NestJS — Arsitektur Enterprise
+Gunakan NestJS untuk aplikasi skala besar tingkat *enterprise*. NestJS memaksakan arsitektur modular yang ketat dengan Dependency Injection dan Decorators. NestJS menggunakan Express secara bawaan, namun dapat dialihkan ke Fastify untuk performa lebih tinggi.
 
-#### 4. Edge Runtime (Cloudflare Workers / Vercel Edge)
+#### 4. Express 5
+Express 5 otomatis menangkap rejected promises di async route handler tanpa butuh library tambahan. Sangat cocok untuk tim yang sudah familiar dengan ekosistem Express.
+
+#### 5. Edge Runtime (Cloudflare Workers / Vercel Edge)
 Gunakan Hono untuk latensi ultra-rendah di edge. Batasan edge: tanpa built-in Node.js (`fs`, `path`), memori terbatas, tanpa proses long-running. Gunakan `fetch`, Web Crypto API, dan Cloudflare KV/D1/R2.
 
 ### Lapisan Data Type-Safe
@@ -190,3 +207,11 @@ Gunakan BullMQ dengan Redis untuk pemrosesan tugas latar belakang yang andal den
 
 ### Graceful Shutdown
 Jangan hentikan proses secara mendadak. Bersihkan connection pool, HTTP server, dan worker queue sebelum keluar.
+
+### Orkestrasi Skill & Serah Terima
+- **Orkestrator Utama**: Dieksekusi pada **Fase 4** dari `zero-to-prod-orchestrator` atau setelah finalisasi backend di `brainstorming`.
+- **Kontrak & Spesifikasi API**: Delegasikan desain OpenAPI / GraphQL / gRPC ke `api-design-expert` dan tipe TypeScript ke `typescript-expert`.
+- **Database & ORM**: Delegasikan desain skema, migrasi, dan pooling ke `database-orm-expert` dan `supabase-migration`.
+- **Autentikasi & Keamanan**: Delegasikan alur JWT/OAuth2 ke `authentication-identity-expert` dan keamanan kredensial ke `zero-trust-secret-vault`.
+- **Pekerjaan Asinkron Tahan Gagal**: Delegasikan workflow kompleks ke `async-queue-temporal-expert`.
+- **Pengujian & Dokumentasi**: Delegasikan pengujian integrasi ke `e2e-testing-expert` dan perbarui catatan perubahan via `auto-doc-updater`.