vibes-plug 2.11.0 → 3.9.0

package/skills/micro-frontend-architect/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: micro-frontend-architect
 description: "Expert guide for designing Micro-Frontend architectures using Webpack Module Federation, Vite Federation, and Single-SPA for large scale Vue and React applications."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Micro-Frontend Architect
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Production-grade guidance for breaking down monolithic frontend applications into scalable, independently deployable **Micro-Frontends (MFE)**. Covers integration via **Webpack Module Federation**, **Vite Federation**, and run-time container orchestration using patterns suitable for massive Enterprise applications in Vue or React.
@@ -95,7 +96,7 @@ This skill works best when combined with:
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan arsitektur untuk memecah aplikasi frontend raksasa menjadi **Micro-Frontends (MFE)** yang terukur dan dapat di-deploy secara independen. Mencakup **Webpack Module Federation** dan **Vite Federation**.
@@ -109,4 +110,4 @@ Panduan arsitektur untuk memecah aplikasi frontend raksasa menjadi **Micro-Front
 - **Host vs Remote:** *Host* adalah cangkang (shell) utama aplikasi Anda, *Remote* adalah aplikasi kecil (fitur) yang dimuat oleh Host secara dinamis di runtime.
 - **Berbagi Dependensi (Shared):** Sangat krusial! Pastikan framework utama (`vue`, `react`, `pinia`, `vue-router`) ditandai sebagai `shared` (dan seringkali `singleton`). Jika tidak, aplikasi akan error karena ada 2 instance Vue/React yang berjalan bersamaan.
 - **Isolasi CSS:** Pastikan gaya CSS dari MFE A tidak merusak MFE B. Gunakan *CSS Modules* atau kapsulasi *Scoped CSS*.
-- **Komunikasi Data:** Hindari penggunaan Global State (Redux/Pinia) lintas MFE jika memungkinkan. Gunakan *Custom Event Listener* di `window` atau passing props/URL untuk menjaga tiap MFE tetap independen.
+- **Komunikasi Data:** Hindari penggunaan Global State (Redux/Pinia) lintas MFE jika memungkinkan. Gunakan *Custom Event Listener* di `window` atau passing props/URL untuk menjaga tiap MFE tetap independen.

package/skills/mobile-expo-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: mobile-expo-expert
 description: "Expert guide for React Native 0.79+ and Expo SDK 53+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.79+ dan Expo SDK 53+ untuk aplikasi mobile."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Expert guide for building production-grade cross-platform mobile applications using **React Native 0.79+** and **Expo SDK 53+**. Covers the New Architecture (stable), Expo Router v4, OTA updates, native modules, and modern state management patterns for iOS and Android.
@@ -136,7 +137,7 @@ Use **channels** to target specific user groups (production, staging, beta).
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan ahli untuk membangun aplikasi mobile cross-platform tingkat produksi menggunakan **React Native 0.79+** dan **Expo SDK 53+**. Mencakup New Architecture (stabil), Expo Router v4, OTA updates, native modules, dan pola state management modern untuk iOS dan Android.
@@ -189,4 +190,4 @@ Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan chan
 - **FlashList**: Pengganti FlatList yang jauh lebih cepat untuk daftar panjang.
 - **react-native-reanimated v3**: Animasi 60/120fps yang berjalan di UI thread.
 - **react-native-gesture-handler**: Pengenalan gesture di native thread.
-- **Hermes Engine**: Default di SDK 53 — startup lebih cepat, memori lebih sedikit.
+- **Hermes Engine**: Default di SDK 53 — startup lebih cepat, memori lebih sedikit.

package/skills/modern-css-native-expert/SKILL.md

@@ -1,189 +1,190 @@
----
-name: modern-css-native-expert
-description: "Expert guide for cutting-edge Native CSS (2026 Standard) — CSS Anchor Positioning, @starting-style, View Transitions Level 2, Container Queries, and :has() / Panduan ahli fitur CSS native modern 2026."
-author: "Roedy Rustam"
----
-
-# Modern Native CSS Expert (2026 Standard & Primitives)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Purpose & Overview
-Production-grade engineering guide for modern **Native CSS features (2026 Edition)** that replace cumbersome JavaScript libraries with pure browser-native primitives. Covers the **CSS Anchor Positioning API** for tooltips/popovers, **`@starting-style`** for smooth entry/exit animations on top-layer elements (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, and the **`:has()`** relational selector.
-
-### Key Capabilities
-1. **CSS Anchor Positioning**: Eliminating Floating UI / Popper.js dependencies. Tether tooltips, menus, and popovers to trigger elements natively with auto-flip fallbacks (`position-try-fallbacks`).
-2. **Smooth Top-Layer Transitions**: Animating `<dialog>` and `[popover]` elements from `display: none` to visible with `@starting-style` and `transition-behavior: allow-discrete`.
-3. **Container Queries (`@container`)**: Component-level responsive design based on parent container dimensions rather than viewport width.
-4. **Relational `:has()` Selector**: Styling parent containers or sibling trees based on nested child states without React/JS state overhead.
-5. **Native CSS Nesting & `@layer`**: Structuring clean, zero-build styles with cascade priority layers.
-
----
-
-### Production Implementation Recipes
-
-#### Recipe 1: Pure Native Anchor Positioning for Tooltips & Dropdowns (No JS)
-```css
-/* Define the anchor trigger button */
-.anchor-trigger {
-  anchor-name: --my-dropdown-anchor;
-}
-
-/* Tether the popover menu to the anchor trigger */
-.dropdown-menu {
-  position: fixed;
-  position-anchor: --my-dropdown-anchor;
-  
-  /* Place below the anchor by default */
-  top: anchor(bottom);
-  left: anchor(left);
-  margin-top: 8px;
-
-  /* Automatic flip to top if screen boundary is reached */
-  position-try-fallbacks: flip-block;
-}
-```
-
-#### Recipe 2: Smooth `<dialog>` Entry/Exit Animation with `@starting-style`
-```css
-/* Dialog element with discrete transition support */
-dialog {
-  opacity: 0;
-  transform: scale(0.95) translateY(10px);
-  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
-}
-
-/* Open state */
-dialog[open] {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-/* Starting style when transitioning from display: none to open */
-@starting-style {
-  dialog[open] {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-}
-
-/* Backdrop smooth fade */
-dialog::backdrop {
-  background-color: rgb(0 0 0 / 0%);
-  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
-}
-
-dialog[open]::backdrop {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-@starting-style {
-  dialog[open]::backdrop {
-    background-color: rgb(0 0 0 / 0%);
-  }
-}
-```
-
----
-
-### Implementation Checklist
-- [ ] Replace JS positioning libraries (Popper, Floating UI) with native `anchor-name` and `position-anchor`.
-- [ ] Use `@starting-style` and `transition-behavior: allow-discrete` for animating modals and popovers without JavaScript timers.
-- [ ] Use `@container` on modular components to allow seamless reuse across sidebars, grids, and modals.
-- [ ] Organize design tokens and reset styles into `@layer` (e.g. `@layer base, components, utilities;`).
-
-## Orchestration & Integration
-- Integrates with: `design-system-architect`, `ui-components-expert`, `tailwind-expert`, `senior-frontend`.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Tujuan & Gambaran Umum
-Panduan rekayasa tingkat produksi untuk memanfaatkan **Fitur CSS Native Modern (Standar 2026)** yang menggantikan pustaka JavaScript berukuran besar dengan fitur asli browser. Mencakup **CSS Anchor Positioning API** untuk tooltip dan popover, **`@starting-style`** untuk animasi masuk dan keluar yang mulus pada elemen *top-layer* (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, dan selektor relasional **`:has()`**.
-
-### Kemampuan Utama
-1. **CSS Anchor Positioning**: Menghapus ketergantungan pada pustaka seperti Floating UI atau Popper.js. Mengikat tooltip, menu, dan popover ke tombol pemicu secara native dengan pembalikan posisi otomatis (`position-try-fallbacks`).
-2. **Animasi Mulus Top-Layer**: Menganimasikan dialog dari status `display: none` ke tampil menggunakan `@starting-style` dan `transition-behavior: allow-discrete`.
-3. **Container Queries (`@container`)**: Desain responsif berbasis ukuran kontainer induk, bukan lebar layar viewport.
-4. **Selektor Relasional `:has()`**: Menata gaya elemen induk berdasarkan status elemen anak di dalamnya tanpa membutuhkan *state* JavaScript.
-5. **Nesting Native & `@layer`**: Mengatur hierarki gaya CSS tanpa alat build dan mengontrol urutan spesifisitas secara terstruktur.
-
----
-
-### Resep Implementasi Produksi
-
-#### Resep 1: Anchor Positioning Murni untuk Menu Dropdown (Tanpa JavaScript)
-```css
-/* Definisikan tombol pemicu sebagai jangkar (anchor) */
-.tombol-pemicu {
-  anchor-name: --jangkar-menu;
-}
-
-/* Hubungkan menu popover ke tombol pemicu */
-.menu-dropdown {
-  position: fixed;
-  position-anchor: --jangkar-menu;
-  
-  /* Posisikan di bawah tombol pemicu */
-  top: anchor(bottom);
-  left: anchor(left);
-  margin-top: 8px;
-
-  /* Balik posisi ke atas jika terpotong batas layar */
-  position-try-fallbacks: flip-block;
-}
-```
-
-#### Resep 2: Animasi Modal `<dialog>` dengan `@starting-style`
-```css
-dialog {
-  opacity: 0;
-  transform: scale(0.95) translateY(10px);
-  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
-}
-
-dialog[open] {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-@starting-style {
-  dialog[open] {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-}
-
-dialog::backdrop {
-  background-color: rgb(0 0 0 / 0%);
-  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
-}
-
-dialog[open]::backdrop {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-@starting-style {
-  dialog[open]::backdrop {
-    background-color: rgb(0 0 0 / 0%);
-  }
-}
-```
-
----
-
-### Checklist Implementasi
-- [ ] Ganti library positioning pihak ketiga dengan CSS `anchor-name` dan `position-anchor`.
-- [ ] Gunakan `@starting-style` dan `transition-behavior: allow-discrete` untuk animasi modal tanpa jeda JavaScript.
-- [ ] Gunakan `@container` pada komponen reusable agar adaptif di semua layout.
-- [ ] Tata arsitektur CSS menggunakan `@layer base, components, utilities;`.
-
-## Integrasi Orkestrasi
-- Terintegrasi dengan: `design-system-architect`, `ui-components-expert`, `tailwind-expert`, `senior-frontend`.
+---
+name: modern-css-native-expert
+description: "Expert guide for cutting-edge Native CSS (2026 Standard) — CSS Anchor Positioning, @starting-style, View Transitions Level 2, Container Queries, and :has() / Panduan ahli fitur CSS native modern 2026."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Modern Native CSS Expert (2026 Standard & Primitives)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Production-grade engineering guide for modern **Native CSS features (2026 Edition)** that replace cumbersome JavaScript libraries with pure browser-native primitives. Covers the **CSS Anchor Positioning API** for tooltips/popovers, **`@starting-style`** for smooth entry/exit animations on top-layer elements (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, and the **`:has()`** relational selector.
+
+### Key Capabilities
+1. **CSS Anchor Positioning**: Eliminating Floating UI / Popper.js dependencies. Tether tooltips, menus, and popovers to trigger elements natively with auto-flip fallbacks (`position-try-fallbacks`).
+2. **Smooth Top-Layer Transitions**: Animating `<dialog>` and `[popover]` elements from `display: none` to visible with `@starting-style` and `transition-behavior: allow-discrete`.
+3. **Container Queries (`@container`)**: Component-level responsive design based on parent container dimensions rather than viewport width.
+4. **Relational `:has()` Selector**: Styling parent containers or sibling trees based on nested child states without React/JS state overhead.
+5. **Native CSS Nesting & `@layer`**: Structuring clean, zero-build styles with cascade priority layers.
+
+---
+
+### Production Implementation Recipes
+
+#### Recipe 1: Pure Native Anchor Positioning for Tooltips & Dropdowns (No JS)
+```css
+/* Define the anchor trigger button */
+.anchor-trigger {
+  anchor-name: --my-dropdown-anchor;
+}
+
+/* Tether the popover menu to the anchor trigger */
+.dropdown-menu {
+  position: fixed;
+  position-anchor: --my-dropdown-anchor;
+  
+  /* Place below the anchor by default */
+  top: anchor(bottom);
+  left: anchor(left);
+  margin-top: 8px;
+
+  /* Automatic flip to top if screen boundary is reached */
+  position-try-fallbacks: flip-block;
+}
+```
+
+#### Recipe 2: Smooth `<dialog>` Entry/Exit Animation with `@starting-style`
+```css
+/* Dialog element with discrete transition support */
+dialog {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
+}
+
+/* Open state */
+dialog[open] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* Starting style when transitioning from display: none to open */
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+}
+
+/* Backdrop smooth fade */
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 0%);
+  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
+}
+
+dialog[open]::backdrop {
+  background-color: rgb(0 0 0 / 50%);
+}
+
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0%);
+  }
+}
+```
+
+---
+
+### Implementation Checklist
+- [ ] Replace JS positioning libraries (Popper, Floating UI) with native `anchor-name` and `position-anchor`.
+- [ ] Use `@starting-style` and `transition-behavior: allow-discrete` for animating modals and popovers without JavaScript timers.
+- [ ] Use `@container` on modular components to allow seamless reuse across sidebars, grids, and modals.
+- [ ] Organize design tokens and reset styles into `@layer` (e.g. `@layer base, components, utilities;`).
+
+## Orchestration & Integration
+- Integrates with: `design-system-architect`, `design-system-architect, senior-frontend`, `tailwind-expert`, `senior-frontend`.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Tujuan & Gambaran Umum
+Panduan rekayasa tingkat produksi untuk memanfaatkan **Fitur CSS Native Modern (Standar 2026)** yang menggantikan pustaka JavaScript berukuran besar dengan fitur asli browser. Mencakup **CSS Anchor Positioning API** untuk tooltip dan popover, **`@starting-style`** untuk animasi masuk dan keluar yang mulus pada elemen *top-layer* (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, dan selektor relasional **`:has()`**.
+
+### Kemampuan Utama
+1. **CSS Anchor Positioning**: Menghapus ketergantungan pada pustaka seperti Floating UI atau Popper.js. Mengikat tooltip, menu, dan popover ke tombol pemicu secara native dengan pembalikan posisi otomatis (`position-try-fallbacks`).
+2. **Animasi Mulus Top-Layer**: Menganimasikan dialog dari status `display: none` ke tampil menggunakan `@starting-style` dan `transition-behavior: allow-discrete`.
+3. **Container Queries (`@container`)**: Desain responsif berbasis ukuran kontainer induk, bukan lebar layar viewport.
+4. **Selektor Relasional `:has()`**: Menata gaya elemen induk berdasarkan status elemen anak di dalamnya tanpa membutuhkan *state* JavaScript.
+5. **Nesting Native & `@layer`**: Mengatur hierarki gaya CSS tanpa alat build dan mengontrol urutan spesifisitas secara terstruktur.
+
+---
+
+### Resep Implementasi Produksi
+
+#### Resep 1: Anchor Positioning Murni untuk Menu Dropdown (Tanpa JavaScript)
+```css
+/* Definisikan tombol pemicu sebagai jangkar (anchor) */
+.tombol-pemicu {
+  anchor-name: --jangkar-menu;
+}
+
+/* Hubungkan menu popover ke tombol pemicu */
+.menu-dropdown {
+  position: fixed;
+  position-anchor: --jangkar-menu;
+  
+  /* Posisikan di bawah tombol pemicu */
+  top: anchor(bottom);
+  left: anchor(left);
+  margin-top: 8px;
+
+  /* Balik posisi ke atas jika terpotong batas layar */
+  position-try-fallbacks: flip-block;
+}
+```
+
+#### Resep 2: Animasi Modal `<dialog>` dengan `@starting-style`
+```css
+dialog {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
+}
+
+dialog[open] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+}
+
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 0%);
+  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
+}
+
+dialog[open]::backdrop {
+  background-color: rgb(0 0 0 / 50%);
+}
+
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0%);
+  }
+}
+```
+
+---
+
+### Checklist Implementasi
+- [ ] Ganti library positioning pihak ketiga dengan CSS `anchor-name` dan `position-anchor`.
+- [ ] Gunakan `@starting-style` dan `transition-behavior: allow-discrete` untuk animasi modal tanpa jeda JavaScript.
+- [ ] Gunakan `@container` pada komponen reusable agar adaptif di semua layout.
+- [ ] Tata arsitektur CSS menggunakan `@layer base, components, utilities;`.
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `design-system-architect`, `design-system-architect, senior-frontend`, `tailwind-expert`, `senior-frontend`.

package/skills/monorepo-architect/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: monorepo-architect
 description: "Expert guide for designing and managing scalable monorepos using Turborepo, pnpm workspaces, and shared packages / Panduan ahli untuk merancang dan mengelola monorepo skalabel menggunakan Turborepo dan pnpm workspaces."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Monorepo Architect (Turborepo 2.x / Moon Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Expert guide for designing and managing scalable monorepos. Covers **Turborepo 2.x** (the 2026 standard for JS/TS monorepos), **moon** (polyglot task runner for teams mixing JS + Rust + Go), **pnpm workspaces**, shared package design, incremental builds, remote caching, and CI/CD pipeline optimization.
@@ -194,7 +195,7 @@ tasks:
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan ahli untuk merancang dan mengelola monorepo yang skalabel. Mencakup **Turborepo 2.x** (standar 2026 untuk monorepo JS/TS), **moon** (task runner poliglot untuk tim yang memadukan JS + Rust + Go), **pnpm workspaces**, desain shared package, incremental build, remote caching, dan optimasi pipeline CI/CD.
@@ -230,4 +231,4 @@ Arahkan `exports` langsung ke file sumber TypeScript — Turborepo mengkompilasi
 Moon mendukung proyek dalam bahasa yang berbeda (Go, Rust, JS) dalam satu workspace, masing-masing dengan konfigurasi `moon.yml`-nya sendiri.
 
 ### Optimasi CI/CD
-Gunakan flag `--filter="...[origin/main]"` Turborepo untuk hanya membangun dan menguji package yang berubah sejak commit terakhir. Gunakan remote cache Vercel atau self-hosted untuk berbagi cache antar runner CI.
+Gunakan flag `--filter="...[origin/main]"` Turborepo untuk hanya membangun dan menguji package yang berubah sejak commit terakhir. Gunakan remote cache Vercel atau self-hosted untuk berbagi cache antar runner CI.

package/skills/mpa-orchestrator/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: mpa-orchestrator
 description: "Orchestrates Multi-Page Application (MPA) architecture within a single repository, integrating with relevant skills / Mengorkestrasi arsitektur Multi-Page Application (MPA) dalam satu repositori, terintegrasi dengan skill relevan lainnya."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Multi-Page Application (MPA) Orchestrator (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 A structured approach for building and orchestrating Multi-Page Application (MPA) architectures within a single repository. Acts as an orchestrator connecting MPA principles with specialized skills (like `mvc-expert`, `saas-multi-tenant`, `senior-frontend`) to deliver cohesive, server-rendered applications. In 2026, MPAs are increasingly built with **Astro 5** for content-heavy sites or **traditional server frameworks** (Laravel, Django, Go) augmented with **HTMX 2** or **Alpine.js** for interactivity.
@@ -39,6 +40,33 @@ A structured approach for building and orchestrating Multi-Page Application (MPA
 6. **Asset Management**: Centralize static assets in `public/`. Implement cache-busting for production.
 7. **Session-based State**: Use secure HTTP-only cookies and server sessions for auth, tenant context, and flash messages.
 
+### Bundler & Multi-Entry Configuration
+In a modern frontend context (especially for MPAs), define multiple entry points in the bundler configuration. This generates separate, optimized JavaScript and CSS bundles for the public site versus the complex admin dashboard, drastically reducing overall payload sizes for general users.
+
+**Implementation Checklist:**
+- [ ] Create separate HTML entry points in the root/public directory (e.g., `index.html`, `admin.html`).
+- [ ] Configure the frontend bundler (Vite/Webpack) to output multiple bundles.
+- [ ] Set up server-side routing (Nginx or Node.js) to serve the correct entry HTML based on the URL path.
+- [ ] Ensure shared components and utilities are properly tree-shaken and split into common chunks.
+
+**Example: Vite Config for Multiple Entries**
+```javascript
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        admin: resolve(__dirname, 'admin.html'),
+        app: resolve(__dirname, 'app.html')
+      }
+    }
+  }
+});
+```
+
 ### Framework Selection Guide
 
 | Need | Recommended Stack |
@@ -70,7 +98,7 @@ A structured approach for building and orchestrating Multi-Page Application (MPA
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page Application (MPA) di dalam satu repositori. Bertindak sebagai orkestrator yang menghubungkan prinsip MPA dengan skill spesialis lain untuk menghasilkan aplikasi server-rendered yang kohesif dan modern. Di 2026, MPA semakin banyak dibangun dengan **Astro 5** untuk situs konten-berat atau framework server tradisional yang diperkuat dengan **HTMX 2** atau **Alpine.js**.
@@ -83,6 +111,15 @@ Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page
 5. **Ekosistem UI Bersama**: Direktori `layouts/` dan `components/` untuk elemen UI yang dapat digunakan kembali.
 6. **State Berbasis Session**: Cookie HTTP-only dan session sisi server untuk autentikasi dan konteks tenant.
 
+### Konfigurasi Bundler & Multi-Entry
+Dalam konteks frontend modern (khususnya untuk MPA), tentukan beberapa *entry points* pada konfigurasi *bundler*. Ini akan menghasilkan bundel JavaScript dan CSS yang terpisah dan optimal antara situs publik dan dashboard admin, sehingga secara drastis mengurangi ukuran *payload* bagi pengguna umum.
+
+**Checklist Implementasi:**
+- [ ] Buat titik entri HTML terpisah di direktori utama/publik (misal: `index.html`, `admin.html`).
+- [ ] Konfigurasi bundler frontend (Vite/Webpack) untuk menghasilkan multiple bundle.
+- [ ] Siapkan routing di sisi server (Nginx atau Node.js) untuk menyajikan HTML entri yang benar berdasarkan path URL.
+- [ ] Pastikan komponen dan utilitas yang dipakai bersama dioptimalkan (tree-shaking) dan dipisah ke dalam *common chunks*.
+
 ### Panduan Pemilihan Framework
 
 | Kebutuhan | Stack yang Direkomendasikan |
@@ -117,4 +154,4 @@ Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page
 4. **Terms of Reference / Terms of Service** (`/terms`)
 5. **Privacy Policy** (`/privacy-policy`)
 
-These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.
+These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.