vibes-plug 1.0.0 → 2.11.0

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

@@ -1,186 +1,192 @@
----
-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."
+---
+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"
----
-
-# Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### 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.
-
-### Trigger Conditions
-- Building a new iOS/Android cross-platform mobile app.
-- Using Expo SDK 53+ or React Native 0.79+ with the New Architecture.
-- Implementing file-based routing with **Expo Router v4**.
-- Setting up OTA (Over-the-Air) updates with EAS Update.
-- Writing native modules using **JSI** (JavaScript Interface) or **Expo Modules API**.
-- Integrating device features: camera, biometrics, notifications, location.
-
-### What's New in 2026
-
-#### React Native 0.79 — New Architecture Stable
-The **New Architecture** (Fabric + JSI + TurboModules) is now **fully stable** and the default for all new Expo SDK 53 projects:
-- **Fabric**: New rendering engine — synchronous rendering, better animations.
-- **JSI (JavaScript Interface)**: Direct C++ bridge — no more async serialization for native calls.
-- **TurboModules**: Lazy-loaded native modules — significantly faster startup time.
-- **Concurrent React**: Full support for `useTransition`, `useDeferredValue`, and Suspense on mobile.
-
-#### Expo SDK 53 — Key Updates
-- **Expo Router v4**: File-based routing with typed routes, API routes (Expo functions), and universal links.
-- **Expo Camera v15**: Unified camera API for iOS and Android.
-- **Expo SQLite v15**: Full SQLite with WAL mode and `useSQLiteContext` hook.
-- **Expo Modules API v2**: Easier native module authoring with Swift/Kotlin.
-- **EAS Build**: Faster builds with M-series Mac runners.
-
-### Core Architecture Patterns
-
-#### 1. Project Setup (Expo SDK 53 + New Arch)
-```bash
-npx create-expo-app@latest MyApp --template tabs
-cd MyApp
-# New Architecture is enabled by default in SDK 53
-```
-
-#### 2. Expo Router v4 — File-Based Routing
-```
-app/
-  _layout.tsx          # Root layout (navigation + providers)
-  (tabs)/
-    _layout.tsx         # Tab navigator
-    index.tsx           # Home tab
-    profile.tsx         # Profile tab
-  (auth)/
-    login.tsx           # Login screen
-    register.tsx
-  modal.tsx             # Modal screen
-```
-
-Use **typed routes** for compile-time safety:
-```typescript
-import { Link, useRouter } from 'expo-router';
-
-// Typed navigation — TypeScript errors on invalid paths
-<Link href="/profile">Profile</Link>
-
-const router = useRouter();
-router.push('/modal');
-```
-
-#### 3. API Routes (Expo Functions)
-Expo Router v4 supports API routes for serverless backend logic:
-```typescript
-// app/api/user+api.ts
-export async function GET(request: Request) {
-  const user = await db.user.findFirst();
-  return Response.json(user);
-}
-```
-
-#### 4. State Management
-- **TanStack Query v5**: Primary choice for server state (`useQuery`, `useMutation`).
-- **Zustand**: Lightweight client state management (replace Context for complex state).
-- **MMKV**: Ultra-fast synchronous storage (replace AsyncStorage).
-- **Expo SQLite + Drizzle**: Local-first database with full SQL support.
-
-#### 5. Navigation Patterns
-```typescript
-// Deep linking & Universal Links configuration
-// app.json
-{
-  "expo": {
-    "scheme": "myapp",
-    "ios": { "associatedDomains": ["applinks:myapp.com"] },
-    "android": { "intentFilters": [{ "action": "VIEW", "data": [{ "scheme": "https", "host": "myapp.com" }] }] }
-  }
-}
-```
-
-#### 6. Native Modules — Expo Modules API v2
-```typescript
-// modules/my-sensor/src/MyModule.ts
-import { requireNativeModule } from 'expo-modules-core';
-const MyModule = requireNativeModule('MyModule');
-
-export function readSensor(): Promise<number> {
-  return MyModule.readSensor();
-}
-```
-
-#### 7. OTA Updates with EAS Update
-```bash
-# Push an instant OTA update (no App Store review)
-eas update --branch production --message "Fix critical bug"
-```
-Use **channels** to target specific user groups (production, staging, beta).
-
-#### 8. Performance Best Practices
-- Use **FlashList** (Shopify) instead of `FlatList` for large lists.
-- Use **react-native-reanimated v3** for 60/120fps animations that run on the UI thread.
-- Use **react-native-gesture-handler** for gesture recognition on the native thread.
-- Enable **Hermes** engine (default in SDK 53) for faster startup and reduced memory.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### 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.
-
-### Kondisi Pemicu
-- Membangun aplikasi mobile iOS/Android cross-platform baru.
-- Menggunakan Expo SDK 53+ atau React Native 0.79+ dengan New Architecture.
-- Mengimplementasikan routing berbasis file dengan **Expo Router v4**.
-- Menyiapkan OTA (Over-the-Air) updates dengan EAS Update.
-- Menulis native modules menggunakan JSI atau Expo Modules API v2.
-- Mengintegrasikan fitur perangkat: kamera, biometrik, notifikasi, lokasi.
-
-### Yang Baru di 2026
-
-#### React Native 0.79 — New Architecture Stabil
-**New Architecture** (Fabric + JSI + TurboModules) kini **sepenuhnya stabil** dan menjadi default untuk semua proyek baru Expo SDK 53:
-- **Fabric**: Engine rendering baru — rendering sinkron, animasi lebih baik.
-- **JSI**: Bridge C++ langsung — tidak ada lagi serialisasi async untuk panggilan native.
-- **TurboModules**: Modul native lazy-loaded — startup jauh lebih cepat.
-- **Concurrent React**: Dukungan penuh untuk `useTransition`, `useDeferredValue`, dan Suspense di mobile.
-
-#### Expo SDK 53 — Pembaruan Utama
-- **Expo Router v4**: Routing berbasis file dengan typed routes, API routes, dan universal links.
-- **Expo Camera v15**: API kamera terpadu untuk iOS dan Android.
-- **Expo SQLite v15**: SQLite lengkap dengan mode WAL dan hook `useSQLiteContext`.
-- **Expo Modules API v2**: Pembuatan modul native yang lebih mudah dengan Swift/Kotlin.
-- **EAS Build**: Build lebih cepat dengan runner Mac M-series.
-
-### Pola Arsitektur Inti
-
-#### 1. Routing Berbasis File (Expo Router v4)
-Expo Router menggunakan konvensi direktori `app/` untuk mendefinisikan semua layar dan navigasi. Gunakan **typed routes** untuk keamanan type-safe di waktu kompilasi.
-
-#### 2. API Routes (Expo Functions)
-Expo Router v4 mendukung API routes untuk logika backend serverless langsung di dalam proyek.
-
-#### 3. State Management
-- **TanStack Query v5**: Pilihan utama untuk server state.
-- **Zustand**: State klien yang ringan.
-- **MMKV**: Penyimpanan sinkron ultra-cepat (pengganti AsyncStorage).
-- **Expo SQLite + Drizzle**: Database lokal-first dengan dukungan SQL penuh.
-
-#### 4. Native Modules — Expo Modules API v2
-Gunakan Expo Modules API untuk membuat modul native kustom dengan Swift (iOS) dan Kotlin (Android) dengan boilerplate minimal.
-
-#### 5. OTA Updates dengan EAS Update
-Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan channel (`production`, `staging`, `beta`) untuk menargetkan kelompok pengguna tertentu.
-
-#### 6. Praktik Terbaik Performa
-- **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.
+---
+
+# Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
+
+[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
+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.
+
+### Trigger Conditions
+- Building a new iOS/Android cross-platform mobile app.
+- Using Expo SDK 53+ or React Native 0.79+ with the New Architecture.
+- Implementing file-based routing with **Expo Router v4**.
+- Setting up OTA (Over-the-Air) updates with EAS Update.
+- Writing native modules using **JSI** (JavaScript Interface) or **Expo Modules API**.
+- Integrating device features: camera, biometrics, notifications, location.
+
+### What's New in 2026
+
+#### React Native 0.79 — New Architecture Stable
+The **New Architecture** (Fabric + JSI + TurboModules) is now **fully stable** and the default for all new Expo SDK 53 projects:
+- **Fabric**: New rendering engine — synchronous rendering, better animations.
+- **JSI (JavaScript Interface)**: Direct C++ bridge — no more async serialization for native calls.
+- **TurboModules**: Lazy-loaded native modules — significantly faster startup time.
+- **Concurrent React**: Full support for `useTransition`, `useDeferredValue`, and Suspense on mobile.
+
+#### Expo SDK 53 — Key Updates
+- **Expo Router v4**: File-based routing with typed routes, API routes (Expo functions), and universal links.
+- **Expo Camera v15**: Unified camera API for iOS and Android.
+- **Expo SQLite v15**: Full SQLite with WAL mode and `useSQLiteContext` hook.
+- **Expo Modules API v2**: Easier native module authoring with Swift/Kotlin.
+- **EAS Build**: Faster builds with M-series Mac runners.
+
+### Core Architecture Patterns
+
+#### 1. Project Setup (Expo SDK 53 + New Arch)
+```bash
+npx create-expo-app@latest MyApp --template tabs
+cd MyApp
+# New Architecture is enabled by default in SDK 53
+```
+
+#### 2. Expo Router v4 — File-Based Routing
+```
+app/
+  _layout.tsx          # Root layout (navigation + providers)
+  (tabs)/
+    _layout.tsx         # Tab navigator
+    index.tsx           # Home tab
+    profile.tsx         # Profile tab
+  (auth)/
+    login.tsx           # Login screen
+    register.tsx
+  modal.tsx             # Modal screen
+```
+
+Use **typed routes** for compile-time safety:
+```typescript
+import { Link, useRouter } from 'expo-router';
+
+// Typed navigation — TypeScript errors on invalid paths
+<Link href="/profile">Profile</Link>
+
+const router = useRouter();
+router.push('/modal');
+```
+
+#### 3. API Routes (Expo Functions)
+Expo Router v4 supports API routes for serverless backend logic:
+```typescript
+// app/api/user+api.ts
+export async function GET(request: Request) {
+  const user = await db.user.findFirst();
+  return Response.json(user);
+}
+```
+
+#### 4. State Management
+- **TanStack Query v5**: Primary choice for server state (`useQuery`, `useMutation`).
+- **Zustand**: Lightweight client state management (replace Context for complex state).
+- **MMKV**: Ultra-fast synchronous storage (replace AsyncStorage).
+- **Expo SQLite + Drizzle**: Local-first database with full SQL support.
+
+#### 5. Navigation Patterns
+```typescript
+// Deep linking & Universal Links configuration
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "ios": { "associatedDomains": ["applinks:myapp.com"] },
+    "android": { "intentFilters": [{ "action": "VIEW", "data": [{ "scheme": "https", "host": "myapp.com" }] }] }
+  }
+}
+```
+
+#### 6. Native Modules — Expo Modules API v2
+```typescript
+// modules/my-sensor/src/MyModule.ts
+import { requireNativeModule } from 'expo-modules-core';
+const MyModule = requireNativeModule('MyModule');
+
+export function readSensor(): Promise<number> {
+  return MyModule.readSensor();
+}
+```
+
+#### 7. OTA Updates with EAS Update
+```bash
+# Push an instant OTA update (no App Store review)
+eas update --branch production --message "Fix critical bug"
+```
+Use **channels** to target specific user groups (production, staging, beta).
+
+#### 8. Performance Best Practices
+- Use **FlashList** (Shopify) instead of `FlatList` for large lists.
+- Use **react-native-reanimated v3** for 60/120fps animations that run on the UI thread.
+- Use **react-native-gesture-handler** for gesture recognition on the native thread.
+- Enable **Hermes** engine (default in SDK 53) for faster startup and reduced memory.
+
+---
+
+<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.
+
+### Kondisi Pemicu
+- Membangun aplikasi mobile iOS/Android cross-platform baru.
+- Menggunakan Expo SDK 53+ atau React Native 0.79+ dengan New Architecture.
+- Mengimplementasikan routing berbasis file dengan **Expo Router v4**.
+- Menyiapkan OTA (Over-the-Air) updates dengan EAS Update.
+- Menulis native modules menggunakan JSI atau Expo Modules API v2.
+- Mengintegrasikan fitur perangkat: kamera, biometrik, notifikasi, lokasi.
+
+### Yang Baru di 2026
+
+#### React Native 0.79 — New Architecture Stabil
+**New Architecture** (Fabric + JSI + TurboModules) kini **sepenuhnya stabil** dan menjadi default untuk semua proyek baru Expo SDK 53:
+- **Fabric**: Engine rendering baru — rendering sinkron, animasi lebih baik.
+- **JSI**: Bridge C++ langsung — tidak ada lagi serialisasi async untuk panggilan native.
+- **TurboModules**: Modul native lazy-loaded — startup jauh lebih cepat.
+- **Concurrent React**: Dukungan penuh untuk `useTransition`, `useDeferredValue`, dan Suspense di mobile.
+
+#### Expo SDK 53 — Pembaruan Utama
+- **Expo Router v4**: Routing berbasis file dengan typed routes, API routes, dan universal links.
+- **Expo Camera v15**: API kamera terpadu untuk iOS dan Android.
+- **Expo SQLite v15**: SQLite lengkap dengan mode WAL dan hook `useSQLiteContext`.
+- **Expo Modules API v2**: Pembuatan modul native yang lebih mudah dengan Swift/Kotlin.
+- **EAS Build**: Build lebih cepat dengan runner Mac M-series.
+
+### Pola Arsitektur Inti
+
+#### 1. Routing Berbasis File (Expo Router v4)
+Expo Router menggunakan konvensi direktori `app/` untuk mendefinisikan semua layar dan navigasi. Gunakan **typed routes** untuk keamanan type-safe di waktu kompilasi.
+
+#### 2. API Routes (Expo Functions)
+Expo Router v4 mendukung API routes untuk logika backend serverless langsung di dalam proyek.
+
+#### 3. State Management
+- **TanStack Query v5**: Pilihan utama untuk server state.
+- **Zustand**: State klien yang ringan.
+- **MMKV**: Penyimpanan sinkron ultra-cepat (pengganti AsyncStorage).
+- **Expo SQLite + Drizzle**: Database lokal-first dengan dukungan SQL penuh.
+
+#### 4. Native Modules — Expo Modules API v2
+Gunakan Expo Modules API untuk membuat modul native kustom dengan Swift (iOS) dan Kotlin (Android) dengan boilerplate minimal.
+
+#### 5. OTA Updates dengan EAS Update
+Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan channel (`production`, `staging`, `beta`) untuk menargetkan kelompok pengguna tertentu.
+
+#### 6. Praktik Terbaik Performa
+- **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.

package/skills/mobile-push-notification-expert/SKILL.md

@@ -0,0 +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."
+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;
+}
+```
+
+### 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`.