vibes-plug 2.5.0 → 2.11.0

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/mobile-push-notification-expert/SKILL.md

@@ -1,51 +1,71 @@
----
-name: mobile-push-notification-expert
-description: "Expert guide for Cross-Platform Push Notifications (Expo Push, FCM, APNs, Web Push), iOS Live Activities, and background payload handling / Panduan ahli notifikasi push mobile, FCM, APNs, dan Live Activities."
+---
+name: mobile-push-notification-expert
+description: "Expert guide for Cross-Platform Push Notifications (Expo Push, FCM, APNs, Web Push), iOS Live Activities, and background payload handling / Panduan ahli notifikasi push mobile, FCM, APNs, dan Live Activities."
 author: "Roedy Rustam"
----
-
-# Mobile Push Notification & Live Activities Expert
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Purpose & Overview
-Comprehensive guide for configuring cross-platform push notifications (Expo Push API, Firebase Cloud Messaging FCM, Apple APNs, Web Push API), iOS Live Activities / ActivityKit, background payload handlers, deep-linking routing, and push token lifecycle management.
-
-### Key Capabilities
-- **Expo & FCM Push**: Sending batched push notifications with rich media, actions, and custom data payloads.
-- **iOS Live Activities**: Real-time status updates on iOS Dynamic Island and Lock Screen.
-- **Deep Linking**: Routing push notification taps directly to targeted screens within Expo Router / React Native.
-
-```typescript
-import * as Notifications from 'expo-notifications';
-
-export async function registerForPushNotificationsAsync() {
-  const { status: existingStatus } = await Notifications.getPermissionsAsync();
-  let finalStatus = existingStatus;
-  if (existingStatus !== 'granted') {
-    const { status } = await Notifications.requestPermissionsAsync();
-    finalStatus = status;
-  }
-  if (finalStatus !== 'granted') return null;
-  const token = (await Notifications.getExpoPushTokenAsync()).data;
-  return token;
-}
-```
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan komprehensif untuk konfigurasi push notification lintas platform (Expo Push, FCM, APNs, Web Push), iOS Live Activities / ActivityKit, penanganan payload background, routing deep-linking, dan manajemen siklus token push.
-
-### Fitur Utama
-- **Expo & FCM Push**: Pengiriman push notification masal dengan media kaya, tombol aksi, dan payload kustom.
-- **iOS Live Activities**: Update status real-time di Dynamic Island dan Lock Screen iOS.
-- **Deep Linking**: Mengarahkan ketukan notifikasi secara langsung ke layar target di Expo Router / React Native.
+---
+
+# Mobile Push Notification & Live Activities Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Comprehensive guide for configuring cross-platform push notifications (Expo Push API, Firebase Cloud Messaging FCM, Apple APNs, Web Push API), iOS Live Activities / ActivityKit, background payload handlers, deep-linking routing, and push token lifecycle management.
+
+### Key Capabilities
+- **Expo & FCM Push**: Sending batched push notifications with rich media, actions, and custom data payloads.
+- **iOS Live Activities**: Real-time status updates on iOS Dynamic Island and Lock Screen.
+- **Deep Linking**: Routing push notification taps directly to targeted screens within Expo Router / React Native.
+
+```typescript
+import * as Notifications from 'expo-notifications';
+
+export async function registerForPushNotificationsAsync() {
+  const { status: existingStatus } = await Notifications.getPermissionsAsync();
+  let finalStatus = existingStatus;
+  if (existingStatus !== 'granted') {
+    const { status } = await Notifications.requestPermissionsAsync();
+    finalStatus = status;
+  }
+  if (finalStatus !== 'granted') return null;
+  const token = (await Notifications.getExpoPushTokenAsync()).data;
+  return token;
+}
+```
+
+### Implementation Checklist
+- [ ] Configure Apple Developer Account (APNs Key) and Google Firebase (FCM Service Account).
+- [ ] Request push notification permissions explicitly from the user after they understand the value proposition.
+- [ ] Save the device's Push Token to the database, associated with the user's ID.
+- [ ] Handle token refresh events when the user uninstalls/reinstalls the app or changes devices.
+- [ ] Set up background event handlers to process incoming messages when the app is killed.
+
+## Orchestration & Integration
+- Integrates with: `mobile-expo-expert`, `event-driven-architect`, `database-orm-expert`.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan komprehensif untuk konfigurasi push notification lintas platform (Expo Push, FCM, APNs, Web Push), iOS Live Activities / ActivityKit, penanganan payload background, routing deep-linking, dan manajemen siklus token push.
+
+### Fitur Utama
+- **Expo & FCM Push**: Pengiriman push notification masal dengan media kaya, tombol aksi, dan payload kustom.
+- **iOS Live Activities**: Update status real-time di Dynamic Island dan Lock Screen iOS.
+- **Deep Linking**: Mengarahkan ketukan notifikasi secara langsung ke layar target di Expo Router / React Native.
+
+### Checklist Implementasi
+- [ ] Konfigurasi Akun Developer Apple (Kunci APNs) dan Google Firebase (Service Account FCM).
+- [ ] Minta izin notifikasi push secara eksplisit dari pengguna setelah mereka memahami nilai gunanya.
+- [ ] Simpan Push Token perangkat ke database, yang terkait dengan ID pengguna.
+- [ ] Tangani event penyegaran token saat pengguna menghapus/menginstal ulang aplikasi atau mengganti perangkat.
+- [ ] Siapkan handler event background untuk memproses pesan masuk saat aplikasi ditutup (killed).
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `mobile-expo-expert`, `event-driven-architect`, `database-orm-expert`.

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/monday-design-aesthetic/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: monday-design-aesthetic
 description: "Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Monday.com Design Aesthetic
@@ -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
 This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.
 
@@ -42,6 +45,9 @@ Use this when the user asks for:
 <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
 Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.
 

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.