vibes-plug 2.5.0 → 2.14.1

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

@@ -1,106 +1,112 @@
----
-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."
+---
+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"
----
-
-# Micro-Frontend Architect
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### 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.
-
-### Trigger Conditions
-Activate this skill when the user is:
-- Splitting a large frontend codebase into multiple smaller apps (Host and Remotes).
-- Configuring Webpack Module Federation (`ModuleFederationPlugin`).
-- Setting up Vite with `@originjs/vite-plugin-federation`.
-- Asking about sharing dependencies (e.g., sharing a single instance of Vue, React, or Pinia across apps).
-- Designing a cross-team frontend deployment strategy.
-
-### Core Concepts
-
-#### 1. Module Federation Concept
-Module federation allows a JavaScript application to dynamically load code from another application at runtime.
-- **Host (Shell):** The main container application that loads remote modules.
-- **Remote:** The micro-frontend application exposing components or logic.
-
-#### 2. Vite Federation Example
-```javascript
-// vite.config.js (Remote App)
-import federation from '@originjs/vite-plugin-federation'
-
-export default {
-  plugins: [
-    federation({
-      name: 'remote_app',
-      filename: 'remoteEntry.js',
-      exposes: {
-        './Button': './src/components/Button.vue',
-      },
-      shared: ['vue', 'pinia'] // Critical: Share core dependencies!
-    })
-  ]
-}
-
-// vite.config.js (Host App)
-import federation from '@originjs/vite-plugin-federation'
-
-export default {
-  plugins: [
-    federation({
-      name: 'host_app',
-      remotes: {
-        remote_app: 'http://localhost:5001/assets/remoteEntry.js',
-      },
-      shared: ['vue', 'pinia']
-    })
-  ]
-}
-```
-
-#### 3. State Management Across MFEs
-- **Avoid Global State if Possible:** Micro-frontends should ideally not share business state. Communicate via custom DOM events, URL parameters, or a thin Event Bus.
-- **Shared Store (Pinia/Zustand):** If state sharing is absolutely required, the Host app should instantiate the store and share the dependency instance via Federation.
-
-### Best Practices
-- **Strict Dependency Sharing:** Always mark core libraries (`react`, `react-dom`, `vue`, `vue-router`) as `singleton: true` and `shared` to prevent the browser from downloading and running multiple instances of the framework.
-- **CSS Isolation:** Ensure CSS from one Micro-Frontend does not bleed into another. Use CSS Modules, scoped CSS, or Shadow DOM.
-- **Independent Deployments:** The core value of MFE is that Team A can deploy the Remote App without requiring Team B to rebuild the Host App.
-
----
-
-### Integration with Other Skills (MANDATORY)
-This skill works best when combined with:
-- `vue-frontend-expert` / `senior-frontend` — For building the individual micro-apps.
-- `design-system-architect` — For ensuring all MFEs consume a shared, versioned UI component library.
-- `monorepo-architect` — For managing the codebases of multiple MFEs in a single Turborepo/pnpm workspace.
-
-### Referenced By Orchestrators (MANDATORY)
-- `brainstorming` — Add to "Architecture & Scale".
-- `zero-to-prod-orchestrator` — Phase 2 (Architecture Strategy).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### 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**.
-
-### Kondisi Pemicu
-- Memecah aplikasi (monolith) Vue atau React menjadi beberapa sub-aplikasi.
-- Mengkonfigurasi plugin *Module Federation*.
-- Mencari cara untuk membagi *dependency* (seperti Vue atau React) agar tidak di-download dua kali oleh browser.
-
-### Panduan Singkat
-- **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.
+---
+
+# Micro-Frontend Architect
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` 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.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Splitting a large frontend codebase into multiple smaller apps (Host and Remotes).
+- Configuring Webpack Module Federation (`ModuleFederationPlugin`).
+- Setting up Vite with `@originjs/vite-plugin-federation`.
+- Asking about sharing dependencies (e.g., sharing a single instance of Vue, React, or Pinia across apps).
+- Designing a cross-team frontend deployment strategy.
+
+### Core Concepts
+
+#### 1. Module Federation Concept
+Module federation allows a JavaScript application to dynamically load code from another application at runtime.
+- **Host (Shell):** The main container application that loads remote modules.
+- **Remote:** The micro-frontend application exposing components or logic.
+
+#### 2. Vite Federation Example
+```javascript
+// vite.config.js (Remote App)
+import federation from '@originjs/vite-plugin-federation'
+
+export default {
+  plugins: [
+    federation({
+      name: 'remote_app',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Button': './src/components/Button.vue',
+      },
+      shared: ['vue', 'pinia'] // Critical: Share core dependencies!
+    })
+  ]
+}
+
+// vite.config.js (Host App)
+import federation from '@originjs/vite-plugin-federation'
+
+export default {
+  plugins: [
+    federation({
+      name: 'host_app',
+      remotes: {
+        remote_app: 'http://localhost:5001/assets/remoteEntry.js',
+      },
+      shared: ['vue', 'pinia']
+    })
+  ]
+}
+```
+
+#### 3. State Management Across MFEs
+- **Avoid Global State if Possible:** Micro-frontends should ideally not share business state. Communicate via custom DOM events, URL parameters, or a thin Event Bus.
+- **Shared Store (Pinia/Zustand):** If state sharing is absolutely required, the Host app should instantiate the store and share the dependency instance via Federation.
+
+### Best Practices
+- **Strict Dependency Sharing:** Always mark core libraries (`react`, `react-dom`, `vue`, `vue-router`) as `singleton: true` and `shared` to prevent the browser from downloading and running multiple instances of the framework.
+- **CSS Isolation:** Ensure CSS from one Micro-Frontend does not bleed into another. Use CSS Modules, scoped CSS, or Shadow DOM.
+- **Independent Deployments:** The core value of MFE is that Team A can deploy the Remote App without requiring Team B to rebuild the Host App.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `vue-frontend-expert` / `senior-frontend` — For building the individual micro-apps.
+- `design-system-architect` — For ensuring all MFEs consume a shared, versioned UI component library.
+- `monorepo-architect` — For managing the codebases of multiple MFEs in a single Turborepo/pnpm workspace.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "Architecture & Scale".
+- `zero-to-prod-orchestrator` — Phase 2 (Architecture Strategy).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## 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.
+
+### 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**.
+
+### Kondisi Pemicu
+- Memecah aplikasi (monolith) Vue atau React menjadi beberapa sub-aplikasi.
+- Mengkonfigurasi plugin *Module Federation*.
+- Mencari cara untuk membagi *dependency* (seperti Vue atau React) agar tidak di-download dua kali oleh browser.
+
+### Panduan Singkat
+- **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.

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

@@ -1,7 +1,7 @@
 ---
 name: mobile-expo-expert
-description: "Expert guide for React Native 0.76+ and Expo SDK 52+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.76+ dan Expo SDK 52+ untuk aplikasi mobile."
-author: "Roedy Rustam"
+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"
 ---
 
 # Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` 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.
 
@@ -132,6 +135,9 @@ Use **channels** to target specific user groups (production, staging, beta).
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### 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.
 

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

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

package/skills/monorepo-architect/SKILL.md

@@ -1,7 +1,7 @@
 ---
 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"
 ---
 
 # Monorepo Architect (Turborepo 2.x / Moon Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` 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.
 
@@ -190,6 +193,9 @@ tasks:
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### 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.
 

package/skills/mpa-orchestrator/SKILL.md

@@ -1,7 +1,7 @@
 ---
 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: "Antigravity"
+author: "Roedy Rustam"
 ---
 
 # Multi-Page Application (MPA) Orchestrator (2026 Edition)
@@ -13,6 +13,9 @@ author: "Antigravity"
 <a name="english"></a>
 ## 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.
+
 ### 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.
 
@@ -47,6 +50,7 @@ A structured approach for building and orchestrating Multi-Page Application (MPA
 | React MPA with SSR | **Next.js 15** Pages Router or App Router |
 
 ### Orchestration Guidelines
+- **With `modern-web-guidance`**: MUST execute FIRST before any HTML/CSS task to ensure modern frontend standards.
 - **With `mvc-expert`**: Enforce MVC pattern — Controllers handle logic, Views handle rendering.
 - **With `saas-multi-tenant`**: Integrate tenant identification in core routing middleware — every page load initializes `tenant_id` context securely.
 - **With `senior-frontend` / `ui-ux-pro-max`**: Enhance with Alpine.js for reactive UI or HTMX 2 for HTML-driven partial updates — no heavy client-side bundles.
@@ -65,6 +69,9 @@ A structured approach for building and orchestrating Multi-Page Application (MPA
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### 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**.
 
@@ -87,6 +94,7 @@ Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page
 | React MPA dengan SSR | **Next.js 15** Pages Router atau App Router |
 
 ### Panduan Orkestrasi
+- **Dengan `modern-web-guidance`**: WAJIB dieksekusi PERTAMA KALI sebelum tugas HTML/CSS untuk memastikan standar frontend modern.
 - **Dengan `mvc-expert`**: Pastikan MPA mengikuti pola MVC secara ketat.
 - **Dengan `saas-multi-tenant`**: Integrasikan identifikasi tenant di middleware routing inti.
 - **Dengan `senior-frontend` / `ui-ux-pro-max`**: Tingkatkan dengan Alpine.js atau HTMX 2 untuk interaksi tanpa bundle berat.
@@ -99,3 +107,14 @@ Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page
 - Membangun situs konten, halaman marketing, atau aplikasi kritis SEO.
 - Menggunakan Astro 5 untuk situs statis atau konten-berat dengan island interaktif opsional.
 - Menambahkan interaktivitas ke halaman server-rendered dengan HTMX 2 tanpa menulis ulang ke SPA.
+
+---
+### 📄 Standard Pages Mandate (CRITICAL)
+**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
+1. **About Page** (`/about`)
+2. **Profile Page** (`/profile`)
+3. **Contact Page** (`/contact`)
+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.