vibes-plug 2.5.0 → 2.14.1

package/skills/website-design-cloner/SKILL.md

@@ -1,174 +1,180 @@
----
-name: website-design-cloner
-description: "Analyzes and reverse-engineers website designs directly from a target URL, extracting layout structures, design tokens (colors, typography, spacing), component hierarchies, visual assets, and responsive behaviors to enable full 1:1 duplication into modern code (Tailwind CSS v4, React/Next.js, HTML/CSS). / Mempelajari dan merekayasa balik desain situs web langsung dari URL target, mengekstrak struktur layout, design token (warna, tipografi, spacing), hierarki komponen, aset visual, dan perilaku responsif untuk duplikasi 1:1 penuh ke kode modern."
+---
+name: website-design-cloner
+description: "Analyzes and reverse-engineers website designs directly from a target URL, extracting layout structures, design tokens (colors, typography, spacing), component hierarchies, visual assets, and responsive behaviors to enable full 1:1 duplication into modern code (Tailwind CSS v4, React/Next.js, HTML/CSS). / Mempelajari dan merekayasa balik desain situs web langsung dari URL target, mengekstrak struktur layout, design token (warna, tipografi, spacing), hierarki komponen, aset visual, dan perilaku responsif untuk duplikasi 1:1 penuh ke kode modern."
 author: "Roedy Rustam"
----
-
-# Website Design Cloner & Reverse Engineering Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-`website-design-cloner` is an advanced URL-to-Code visual reverse engineering skill. It enables AI agents to inspect any target website URL, analyze its visual aesthetic, layout grid, CSS design tokens (OKLCH/HEX colors, typography system, container bounds, shadow tiers, border-radii), DOM structure, and interactive components, and synthesize production-ready code (Tailwind CSS v4, React 19, Next.js 15, HTML5/Vanilla CSS) to achieve a full 1:1 duplication.
-
-### Trigger Conditions
-- Replicating or cloning a website layout, landing page, or web application directly from a target URL.
-- Extracting design systems (color palettes, typography scales, container grids, component patterns) from a reference link.
-- Re-creating complex UI components (Hero banners, Bento grids, navbar drawers, pricing tables, footers) based on live URLs.
-- Auditing and reverse-engineering third-party website layouts for component scaffolding.
-
----
-
-### 5-Step URL-to-Code Reverse Engineering Methodology
-
-```mermaid
-graph TD
-    A["Target URL"] --> B["Phase 1: URL Inspection & DOM Scraping"]
-    B --> C["Phase 2: Design Tokens & CSS Extraction"]
-    C --> D["Phase 3: Component Hierarchy Breakdown"]
-    D --> E["Phase 4: 1:1 Code Synthesis (Tailwind v4 + React 19)"]
-    E --> F["Phase 5: Visual Verification & Polish"]
-```
-
-#### Phase 1: URL Inspection & Asset Discovery
-1. **Content Fetching**: Retrieve raw DOM, inline CSS, stylesheet links (`<link rel="stylesheet">`), and font imports using `read_url_content`, Firecrawl, Jina Reader API (`https://r.jina.ai/<URL>`), or Playwright browser automation.
-2. **Visual Viewport Inspection**: Capture layout snapshots across break-points:
-   - Mobile (`375px`)
-   - Tablet (`768px`)
-   - Desktop (`1440px+`)
-3. **Asset Mining**: Extract SVG icons (Lucide/Heroicons equivalents), image asset URLs, logo vectors, and background gradients.
-
-#### Phase 2: Design Tokens & CSS Harvester
-Harvest computed styles and synthesize them into Tailwind CSS v4 `@theme` tokens:
-
-| Token Category | Extracted Properties | Tailwind CSS v4 Mapping |
-|---|---|---|
-| **Color System** | Primary, Secondary, Background, Neutral slate, Surface, Borders | `--color-primary`, `--color-background`, `--color-surface` |
-| **Typography** | Font Family (Google Fonts link), Headings (`h1`-`h6`), Body, Font Weights | `--font-sans`, `--font-mono`, `--text-4xl`, `--font-bold` |
-| **Spacing Scale** | Section Padding (`py-16`/`py-24`), Container Max-Width (`1280px`), Gap scale | `--spacing-16`, `--max-width-7xl`, `gap-6` |
-| **Borders & Radii** | Card Border Radius (`16px`), Pill Radius (`9999px`), Border Colors | `--radius-xl`, `--color-border` |
-| **Effects** | Backdrop Blur (`backdrop-blur-md`), Glassmorphism, Drop Shadows | `shadow-xl shadow-brand/10`, `backdrop-blur-lg` |
-
-#### Phase 3: Component Hierarchy Breakdown
-Deconstruct the target web page into modular, reusable UI components:
-- **`HeaderNav`**: Brand logo, navigation menu links, dynamic CTA button, mobile drawer toggle.
-- **`HeroSection`**: Eye-catching headline, subheading, action buttons, hero image/video/mockup.
-- **`FeatureBento`**: Bento grid containers, icon badges, feature titles, micro-copy.
-- **`TestimonialGrid`**: Avatar image, quote text, author metadata, star ratings.
-- **`PricingSection`**: Tier cards, billing toggle (Monthly/Annual), highlighted popular badge, feature checklists.
-- **`FooterNav`**: Category columns, newsletter subscription form, copyright & social icons.
-
-#### Phase 4: 1:1 Code Synthesis (Tailwind v4 + React 19)
-Synthesize clean, accessible, modern code matching the extracted structure.
-
-##### Example: Extracted Tailwind CSS v4 Theme (`tokens.css`)
-```css
-@import "tailwindcss";
-
-@theme {
-  --font-sans: "Outfit", "Inter", system-ui, sans-serif;
-  --font-mono: "Fira Code", monospace;
-
-  /* Extracted OKLCH Palette */
-  --color-brand-primary: oklch(58% 0.23 255);
-  --color-brand-accent:  oklch(68% 0.19 160);
-  --color-surface-dark:  oklch(14% 0.02 255);
-  --color-surface-card:  oklch(18% 0.03 255 / 80%);
-
-  --radius-card: 1.25rem;
-}
-```
-
-##### Example: Recreated Hero Component (`HeroSection.tsx`)
-```tsx
-import React from 'react';
-
-export function HeroSection() {
-  return (
-    <section className="relative overflow-hidden bg-surface-dark py-24 text-white">
-      {/* Background Glow */}
-      <div className="absolute top-1/4 left-1/2 -z-10 h-96 w-96 -translate-x-1/2 rounded-full bg-brand-primary/20 blur-3xl" />
-      
-      <div className="mx-auto max-w-7xl px-6 text-center">
-        <span className="inline-block rounded-full bg-brand-primary/10 px-4 py-1.5 text-xs font-semibold text-brand-accent backdrop-blur-md">
-          ✨ Replicated Design Template
-        </span>
-        
-        <h1 className="mt-6 font-sans text-5xl font-extrabold tracking-tight sm:text-6xl">
-          Duplicated Full-Fidelity <span className="bg-gradient-to-r from-brand-primary to-brand-accent bg-clip-text text-transparent">Website Layout</span>
-        </h1>
-        
-        <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-300">
-          Extracted directly from URL using website-design-cloner. Includes precise typography, exact color tokens, and responsive component structure.
-        </p>
-
-        <div className="mt-8 flex justify-center gap-4">
-          <button className="rounded-card bg-brand-primary px-6 py-3.5 font-medium text-white shadow-lg shadow-brand-primary/25 transition-all hover:scale-105">
-            Get Started
-          </button>
-          <button className="rounded-card border border-slate-700 bg-slate-800/50 px-6 py-3.5 font-medium text-slate-200 backdrop-blur-md hover:bg-slate-800">
-            View Live Demo
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-#### Phase 5: Visual Verification & Polish
-- Ensure color contrast passes WCAG 2.2 AAA standard (4.5:1 ratio).
-- Validate full responsiveness on mobile viewports.
-- Replace broken image assets with synthesized visual placeholders using `generate_image`.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-`website-design-cloner` adalah skill rekayasa balik (*reverse engineering*) visual dari URL ke kode. Skill ini memungkinkan agen AI mempelajari situs web target dari URL, mengaudit estetika visual, grid layout, design token CSS (warna OKLCH/HEX, sistem tipografi, batas kontainer, bayangan, radius border), struktur DOM, dan komponen interaktif, lalu merekonstruksi kode siap produksi (Tailwind CSS v4, React 19, Next.js 15, HTML5/CSS3) untuk mencapai duplikasi 1:1 penuh.
-
-### Kondisi Pemicu
-- Merekapitulasi atau menduplikasi tata letak situs web, landing page, atau aplikasi web dari URL target.
-- Mengekstrak design system (skema warna, skala tipografi, grid kontainer, pola komponen) dari tautan referensi.
-- Membangun kembali komponen UI kompleks (banner Hero, Bento grid, drawer navigasi, tabel harga, footer) berdasarkan URL langsung.
-- Mempelajari struktur visual dan rekayasa balik situs web pihak ketiga untuk template baru.
-
----
-
-### Metodologi 5-Langkah Duplikasi URL-ke-Kode
-
-1. **Tahap 1: Inspeksi URL & Penemuan Aset**:
-   - Mengambil HTML mentah, inline CSS, tautan stylesheet, dan font melalui `read_url_content`, Firecrawl, Jina Reader API (`https://r.jina.ai/<URL>`), atau otomatisasi browser Playwright.
-   - Mengambil snapshot tampilan visual pada breakpoint Mobile (`375px`), Tablet (`768px`), dan Desktop (`1440px`).
-   - Ekstraksi ikon SVG, URL gambar, logo, dan gradien latar belakang.
-
-2. **Tahap 2: Ekstraksi Design Token & CSS**:
-   - Mengekstrak properti CSS computed dan menyintesisnya ke dalam token `@theme` Tailwind CSS v4 (sistem warna OKLCH/HEX, tipografi Google Fonts, skala spacing, border radius, dan efek shadow/glassmorphism).
-
-3. **Tahap 3: Pembongkaran Hierarki Komponen**:
-   - Membagi halaman web target menjadi komponen modular: `HeaderNav`, `HeroSection`, `FeatureBento`, `TestimonialGrid`, `PricingSection`, dan `FooterNav`.
-
-4. **Tahap 4: Sintesis Kode Presisi 1:1**:
-   - Menyusun kode bersih dan modular dalam React 19 / Next.js 15 / HTML+CSS modern yang menggunakan token `@theme` Tailwind CSS v4.
-
-5. **Tahap 5: Verifikasi Visual & Polishing**:
-   - Memastikan rasio kontras WCAG 2.2, tes responsivitas mobile, dan membuat aset gambar pengganti presisi dengan tool `generate_image`.
-
----
-
-### Matriks Orkestrasi & Handoff Skill
-
-| Skill Terkait | Peran & Integrasi Handoff |
-|---|---|
-| `web-scraper` | Mengambil HTML mentah, CSS, dan Markdown dari URL via Jina Reader / Firecrawl API. |
-| `design-system-architect` | Menyusun token visual hasil ekstraksi ke dalam design system enterprise berbasis OKLCH & Radix/Base UI. |
-| `ui-ux-pro-max` | Memberikan acuan BM25 visual style, pasangan font Google Fonts, dan checklist aksesibilitas WCAG 2.2. |
-| `senior-frontend` | Mengimplementasikan kode komponen React 19 / Next.js 15 App Router siap produksi. |
-| `tailwind-expert` | Mengatur konfigurasi Tailwind CSS v4 `@theme` dan utilitas responsif. |
+---
+
+# Website Design Cloner & Reverse Engineering Expert (2026 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
+`website-design-cloner` is an advanced URL-to-Code visual reverse engineering skill. It enables AI agents to inspect any target website URL, analyze its visual aesthetic, layout grid, CSS design tokens (OKLCH/HEX colors, typography system, container bounds, shadow tiers, border-radii), DOM structure, and interactive components, and synthesize production-ready code (Tailwind CSS v4, React 19, Next.js 15, HTML5/Vanilla CSS) to achieve a full 1:1 duplication.
+
+### Trigger Conditions
+- Replicating or cloning a website layout, landing page, or web application directly from a target URL.
+- Extracting design systems (color palettes, typography scales, container grids, component patterns) from a reference link.
+- Re-creating complex UI components (Hero banners, Bento grids, navbar drawers, pricing tables, footers) based on live URLs.
+- Auditing and reverse-engineering third-party website layouts for component scaffolding.
+
+---
+
+### 5-Step URL-to-Code Reverse Engineering Methodology
+
+```mermaid
+graph TD
+    A["Target URL"] --> B["Phase 1: URL Inspection & DOM Scraping"]
+    B --> C["Phase 2: Design Tokens & CSS Extraction"]
+    C --> D["Phase 3: Component Hierarchy Breakdown"]
+    D --> E["Phase 4: 1:1 Code Synthesis (Tailwind v4 + React 19)"]
+    E --> F["Phase 5: Visual Verification & Polish"]
+```
+
+#### Phase 1: URL Inspection & Asset Discovery
+1. **Content Fetching**: Retrieve raw DOM, inline CSS, stylesheet links (`<link rel="stylesheet">`), and font imports using `read_url_content`, Firecrawl, Jina Reader API (`https://r.jina.ai/<URL>`), or Playwright browser automation.
+2. **Visual Viewport Inspection**: Capture layout snapshots across break-points:
+   - Mobile (`375px`)
+   - Tablet (`768px`)
+   - Desktop (`1440px+`)
+3. **Asset Mining**: Extract SVG icons (Lucide/Heroicons equivalents), image asset URLs, logo vectors, and background gradients.
+
+#### Phase 2: Design Tokens & CSS Harvester
+Harvest computed styles and synthesize them into Tailwind CSS v4 `@theme` tokens:
+
+| Token Category | Extracted Properties | Tailwind CSS v4 Mapping |
+|---|---|---|
+| **Color System** | Primary, Secondary, Background, Neutral slate, Surface, Borders | `--color-primary`, `--color-background`, `--color-surface` |
+| **Typography** | Font Family (Google Fonts link), Headings (`h1`-`h6`), Body, Font Weights | `--font-sans`, `--font-mono`, `--text-4xl`, `--font-bold` |
+| **Spacing Scale** | Section Padding (`py-16`/`py-24`), Container Max-Width (`1280px`), Gap scale | `--spacing-16`, `--max-width-7xl`, `gap-6` |
+| **Borders & Radii** | Card Border Radius (`16px`), Pill Radius (`9999px`), Border Colors | `--radius-xl`, `--color-border` |
+| **Effects** | Backdrop Blur (`backdrop-blur-md`), Glassmorphism, Drop Shadows | `shadow-xl shadow-brand/10`, `backdrop-blur-lg` |
+
+#### Phase 3: Component Hierarchy Breakdown
+Deconstruct the target web page into modular, reusable UI components:
+- **`HeaderNav`**: Brand logo, navigation menu links, dynamic CTA button, mobile drawer toggle.
+- **`HeroSection`**: Eye-catching headline, subheading, action buttons, hero image/video/mockup.
+- **`FeatureBento`**: Bento grid containers, icon badges, feature titles, micro-copy.
+- **`TestimonialGrid`**: Avatar image, quote text, author metadata, star ratings.
+- **`PricingSection`**: Tier cards, billing toggle (Monthly/Annual), highlighted popular badge, feature checklists.
+- **`FooterNav`**: Category columns, newsletter subscription form, copyright & social icons.
+
+#### Phase 4: 1:1 Code Synthesis (Tailwind v4 + React 19)
+Synthesize clean, accessible, modern code matching the extracted structure.
+
+##### Example: Extracted Tailwind CSS v4 Theme (`tokens.css`)
+```css
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Outfit", "Inter", system-ui, sans-serif;
+  --font-mono: "Fira Code", monospace;
+
+  /* Extracted OKLCH Palette */
+  --color-brand-primary: oklch(58% 0.23 255);
+  --color-brand-accent:  oklch(68% 0.19 160);
+  --color-surface-dark:  oklch(14% 0.02 255);
+  --color-surface-card:  oklch(18% 0.03 255 / 80%);
+
+  --radius-card: 1.25rem;
+}
+```
+
+##### Example: Recreated Hero Component (`HeroSection.tsx`)
+```tsx
+import React from 'react';
+
+export function HeroSection() {
+  return (
+    <section className="relative overflow-hidden bg-surface-dark py-24 text-white">
+      {/* Background Glow */}
+      <div className="absolute top-1/4 left-1/2 -z-10 h-96 w-96 -translate-x-1/2 rounded-full bg-brand-primary/20 blur-3xl" />
+      
+      <div className="mx-auto max-w-7xl px-6 text-center">
+        <span className="inline-block rounded-full bg-brand-primary/10 px-4 py-1.5 text-xs font-semibold text-brand-accent backdrop-blur-md">
+          ✨ Replicated Design Template
+        </span>
+        
+        <h1 className="mt-6 font-sans text-5xl font-extrabold tracking-tight sm:text-6xl">
+          Duplicated Full-Fidelity <span className="bg-gradient-to-r from-brand-primary to-brand-accent bg-clip-text text-transparent">Website Layout</span>
+        </h1>
+        
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-300">
+          Extracted directly from URL using website-design-cloner. Includes precise typography, exact color tokens, and responsive component structure.
+        </p>
+
+        <div className="mt-8 flex justify-center gap-4">
+          <button className="rounded-card bg-brand-primary px-6 py-3.5 font-medium text-white shadow-lg shadow-brand-primary/25 transition-all hover:scale-105">
+            Get Started
+          </button>
+          <button className="rounded-card border border-slate-700 bg-slate-800/50 px-6 py-3.5 font-medium text-slate-200 backdrop-blur-md hover:bg-slate-800">
+            View Live Demo
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+#### Phase 5: Visual Verification & Polish
+- Ensure color contrast passes WCAG 2.2 AAA standard (4.5:1 ratio).
+- Validate full responsiveness on mobile viewports.
+- Replace broken image assets with synthesized visual placeholders using `generate_image`.
+
+---
+
+<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
+`website-design-cloner` adalah skill rekayasa balik (*reverse engineering*) visual dari URL ke kode. Skill ini memungkinkan agen AI mempelajari situs web target dari URL, mengaudit estetika visual, grid layout, design token CSS (warna OKLCH/HEX, sistem tipografi, batas kontainer, bayangan, radius border), struktur DOM, dan komponen interaktif, lalu merekonstruksi kode siap produksi (Tailwind CSS v4, React 19, Next.js 15, HTML5/CSS3) untuk mencapai duplikasi 1:1 penuh.
+
+### Kondisi Pemicu
+- Merekapitulasi atau menduplikasi tata letak situs web, landing page, atau aplikasi web dari URL target.
+- Mengekstrak design system (skema warna, skala tipografi, grid kontainer, pola komponen) dari tautan referensi.
+- Membangun kembali komponen UI kompleks (banner Hero, Bento grid, drawer navigasi, tabel harga, footer) berdasarkan URL langsung.
+- Mempelajari struktur visual dan rekayasa balik situs web pihak ketiga untuk template baru.
+
+---
+
+### Metodologi 5-Langkah Duplikasi URL-ke-Kode
+
+1. **Tahap 1: Inspeksi URL & Penemuan Aset**:
+   - Mengambil HTML mentah, inline CSS, tautan stylesheet, dan font melalui `read_url_content`, Firecrawl, Jina Reader API (`https://r.jina.ai/<URL>`), atau otomatisasi browser Playwright.
+   - Mengambil snapshot tampilan visual pada breakpoint Mobile (`375px`), Tablet (`768px`), dan Desktop (`1440px`).
+   - Ekstraksi ikon SVG, URL gambar, logo, dan gradien latar belakang.
+
+2. **Tahap 2: Ekstraksi Design Token & CSS**:
+   - Mengekstrak properti CSS computed dan menyintesisnya ke dalam token `@theme` Tailwind CSS v4 (sistem warna OKLCH/HEX, tipografi Google Fonts, skala spacing, border radius, dan efek shadow/glassmorphism).
+
+3. **Tahap 3: Pembongkaran Hierarki Komponen**:
+   - Membagi halaman web target menjadi komponen modular: `HeaderNav`, `HeroSection`, `FeatureBento`, `TestimonialGrid`, `PricingSection`, dan `FooterNav`.
+
+4. **Tahap 4: Sintesis Kode Presisi 1:1**:
+   - Menyusun kode bersih dan modular dalam React 19 / Next.js 15 / HTML+CSS modern yang menggunakan token `@theme` Tailwind CSS v4.
+
+5. **Tahap 5: Verifikasi Visual & Polishing**:
+   - Memastikan rasio kontras WCAG 2.2, tes responsivitas mobile, dan membuat aset gambar pengganti presisi dengan tool `generate_image`.
+
+---
+
+### Matriks Orkestrasi & Handoff Skill
+
+| Skill Terkait | Peran & Integrasi Handoff |
+|---|---|
+| `web-scraper` | Mengambil HTML mentah, CSS, dan Markdown dari URL via Jina Reader / Firecrawl API. |
+| `design-system-architect` | Menyusun token visual hasil ekstraksi ke dalam design system enterprise berbasis OKLCH & Radix/Base UI. |
+| `ui-ux-pro-max` | Memberikan acuan BM25 visual style, pasangan font Google Fonts, dan checklist aksesibilitas WCAG 2.2. |
+| `senior-frontend` | Mengimplementasikan kode komponen React 19 / Next.js 15 App Router siap produksi. |
+| `tailwind-expert` | Mengatur konfigurasi Tailwind CSS v4 `@theme` dan utilitas responsif. |

package/skills/webxr-ar-vr-expert/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: webxr-ar-vr-expert
-description: "Expert guide for WebXR (Web-based Virtual and Augmented Reality) development using Babylon.js and Three.js. Covers device compatibility, immersive sessions, controllers, and hit-testing."
-author: "Roedy Rustam"
+description: "Expert guide for WebXR spatial computing, Web-based Virtual Reality (VR), Mixed Reality (MR), and Augmented Reality (AR) using Babylon.js and Three.js. Covers Apple Vision Pro, Meta Quest 3, hand tracking, and hit-testing / Panduan ahli WebXR spatial computing (VR/AR/MR)."
+author: "vibes-plug-swarm"
 ---
 
-# WebXR AR/VR Expert
+# WebXR Spatial Computing Expert (VR, AR & MR)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -13,59 +13,101 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills:
+- `web-3d-graphics-expert` — WebGPU/WebGL 3D scene rendering, lighting, and model optimization.
+- `web-game-engine-expert` — Spatial physics, grabbing interactions, and fixed-timestep motion.
+- `apple-ecosystem-expert` — Apple Vision Pro visionOS Safari WebXR features and spatial guidelines.
+- `glsl-shader-expert` — Passthrough blending and spatial holographic shaders.
+- `performance-web-vitals` — Maintaining rock-solid 72/90/120 FPS to prevent simulator sickness.
+
 ### Description
-Production-grade guidance for building immersive **Augmented Reality (AR)** and **Virtual Reality (VR)** experiences in the browser using the **WebXR Device API**. Focuses on implementation via **Babylon.js** (which has industry-leading WebXR support) and **Three.js** / React Three Fiber.
+Production-grade guidance for architecting immersive **Virtual Reality (VR)**, **Mixed Reality (MR)**, and **Augmented Reality (AR)** in the browser via the **WebXR Device API**. Covers modern head-mounted displays (**Meta Quest 3/3S**, **Apple Vision Pro**) and mobile AR, focusing on Babylon.js and Three.js with `@react-three/xr`.
 
 ### Trigger Conditions
 Activate this skill when the user is:
-- Building AR/VR experiences for Oculus/Meta Quest, Apple Vision Pro, or mobile AR devices.
-- Setting up an `immersive-vr` or `immersive-ar` WebXR session.
-- Implementing controller tracking, hand tracking, or teleportation in 3D space.
-- Using AR Hit-Testing to place digital objects on physical surfaces (floors/tables).
+- Developing spatial computing web applications or immersive web experiences.
+- Setting up WebXR sessions (`immersive-vr`, `immersive-ar`).
+- Implementing Hand Tracking (joint poses, pinch gestures) or spatial controller interactions.
+- Adding Mixed Reality passthrough or depth sensing.
+- Implementing AR Hit-Testing to snap 3D models onto real-world planes (floors, walls, tabletops).
+- Optimizing XR framerates (fixed foveated rendering) to eliminate motion sickness.
+
+---
+
+### Key Capabilities & Headset Targets (2026)
+
+| Target Platform | Session Mode | Key Features |
+| :--- | :--- | :--- |
+| **Meta Quest 3 / 3S** | `immersive-vr`, `immersive-ar` | Full-color stereo passthrough, high-precision hand tracking, fixed foveation levels 0-3. |
+| **Apple Vision Pro (visionOS)** | `immersive-vr`, `immersive-ar` | Eye-gaze + pinch interaction, 90/120Hz display refresh, strict privacy hand tracking. |
+| **Mobile AR (Android / iOS WebKit)** | `immersive-ar` | Surface hit-testing, ambient light estimation, instant plane detection. |
+
+---
 
-### Core Concepts
+### 1. Babylon.js WebXR Setup (Gold Standard)
+
+Babylon.js provides the most comprehensive out-of-the-box WebXR implementation with integrated teleportation, controller profiles, and physics:
 
-#### 1. Babylon.js WebXR Setup
-Babylon.js provides the most robust default WebXR experience.
 ```typescript
-import { Scene, FreeCamera, Vector3, Engine } from '@babylonjs/core';
+import { Scene, WebXRExperienceHelper, WebXRFeatureName } from '@babylonjs/core';
 
-async function setupXR(scene: Scene) {
-  // Initialize default WebXR experience
-  // This automatically adds the "Enter VR/AR" button, teleportation, and controller models
+export async function initBabylonXR(scene: Scene) {
   const xr = await scene.createDefaultXRExperienceAsync({
     uiOptions: {
-      sessionMode: 'immersive-vr', // or 'immersive-ar'
+      sessionMode: 'immersive-ar', // Fallback to 'immersive-vr' if AR is unsupported
+      referenceSpaceType: 'local-floor'
     },
-    optionalFeatures: true
-  });
-  
-  // Example: Listen for controller input
-  xr.input.onControllerAddedObservable.add((controller) => {
-    controller.onMotionControllerInitObservable.add((motionController) => {
-      // Handle button presses
-    });
+    optionalFeatures: ['hit-test', 'hand-tracking', 'anchors', 'plane-detection']
   });
+
+  // Enable Fixed Foveated Rendering to reclaim 20-30% GPU performance on Quest
+  const foveation = xr.baseExperience.featuresManager.enableFeature(
+    WebXRFeatureName.FOVEATION,
+    'latest',
+    { foveationLevel: 2 }
+  );
+
+  // Listen for Hand Tracking
+  const handTracking = xr.baseExperience.featuresManager.enableFeature(
+    WebXRFeatureName.HAND_TRACKING,
+    'latest',
+    { xrInput: xr.input }
+  );
+
+  return xr;
 }
 ```
 
-#### 2. Three.js / React Three Fiber Setup
-In R3F, use `@react-three/xr`.
+---
+
+### 2. React Three Fiber Setup (`@react-three/xr`)
+
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { XR, createXRStore } from '@react-three/xr';
+import { XR, createXRStore, Hands, Controllers } from '@react-three/xr';
 
-const store = createXRStore();
+const store = createXRStore({
+  foveation: 1,
+  handTracking: true
+});
 
-export default function App() {
+export function SpatialApp() {
   return (
     <>
-      <button onClick={() => store.enterVR()}>Enter VR</button>
+      <button className="xr-btn" onClick={() => store.enterAR()}>
+        Enter Mixed Reality
+      </button>
       <Canvas>
         <XR store={store}>
-          <mesh>
-            <boxGeometry />
-            <meshBasicMaterial color="red" />
+          <ambientLight intensity={0.8} />
+          <directionalLight position={[5, 10, 5]} />
+          <Controllers />
+          <Hands />
+          {/* Spatial 3D Objects */}
+          <mesh position={[0, 1.2, -1]}>
+            <boxGeometry args={[0.3, 0.3, 0.3]} />
+            <meshStandardMaterial color="royalblue" />
           </mesh>
         </XR>
       </Canvas>
@@ -74,44 +116,47 @@ export default function App() {
 }
 ```
 
-#### 3. AR Hit-Testing
-In AR mode, "Hit-Testing" allows you to detect real-world surfaces.
-- Ensure `immersive-ar` is used.
-- Request the `hit-test` feature when initializing the session.
-- Use the hit-test results (a matrix/position) to place a reticle or object.
-
-### Best Practices
-- **Performance is Critical:** VR requires a consistent 72 to 90 FPS (or 120 FPS on Apple Vision Pro). Dropped frames cause motion sickness.
-- **Polycount:** Keep polygon counts and draw calls low.
-- **UI in XR:** Standard HTML UI will not work in immersive mode. You must use 3D UI (e.g., Babylon's GUI 3D system or Three.js spatial HTML layers if supported).
-
 ---
 
-### Integration with Other Skills (MANDATORY)
-This skill works best when combined with:
-- `web-3d-graphics-expert` — For building the 3D scene that XR will visualize.
-- `apple-ecosystem-expert` — For optimizing WebXR compatibility with iOS (Safari) and visionOS.
-- `web-game-engine-expert` — For adding physics to VR interactions (e.g., throwing objects).
-
-### Referenced By Orchestrators (MANDATORY)
-- `brainstorming` — Add to "3D & Graphics" or "Spatial Computing".
-- `zero-to-prod-orchestrator` — Phase 5 (Frontend / XR Implementation).
+### Best Practices for Spatial Performance
+1. **Rock-Solid Framerates:** VR requires stable 72, 90, or 120 FPS. Any frame drop causes instant vestibular nausea.
+2. **Fixed Foveated Rendering (FFR):** Reduces fragment shader resolution in the user's peripheral vision, freeing substantial GPU overhead.
+3. **No 2D DOM Overlays in VR:** Standard HTML elements cannot render inside an immersive session. Render spatial 3D UI panels using world-space 3D meshes or canvas textures.
 
 ---
 
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `web-3d-graphics-expert` — Rendering scene 3D WebGPU/WebGL, pencahayaan, dan optimasi model.
+- `web-game-engine-expert` — Fisika spasial, interaksi menggenggam objek, dan pergerakan fixed-timestep.
+- `apple-ecosystem-expert` — Fitur WebXR Safari di Apple Vision Pro visionOS dan pedoman spasial.
+- `glsl-shader-expert` — Shader hologram dan blending passthrough AR.
+- `performance-web-vitals` — Menjaga kestabilan 72/90/120 FPS demi mencegah *motion sickness*.
+
 ### Deskripsi
-Panduan ahli untuk pengembangan *Virtual Reality* (VR) dan *Augmented Reality* (AR) di web menggunakan **WebXR API**. Difokuskan pada implementasi menggunakan **Babylon.js** dan **Three.js** untuk ekosistem *Spatial Computing*.
+Panduan produksi untuk membangun aplikasi spasial imersif **Virtual Reality (VR)**, **Mixed Reality (MR)**, dan **Augmented Reality (AR)** di browser melalui **WebXR Device API**. Mencakup headset modern (**Meta Quest 3/3S**, **Apple Vision Pro**) serta perangkat mobile AR.
 
 ### Kondisi Pemicu
-- Mengembangkan aplikasi VR/AR untuk Meta Quest, Apple Vision Pro, atau Mobile AR.
-- Mengimplementasikan pelacakan pengontrol (controller), pelacakan tangan (hand tracking), atau teleportasi.
-- Menggunakan AR Hit-Testing untuk meletakkan objek 3D di permukaan dunia nyata.
-
-### Panduan Singkat
-- **Performa Mutlak:** Jaga FPS tetap stabil di angka 72-90 FPS. *Frame drop* pada VR menyebabkan rasa mual (motion sickness) pada pengguna. Batasi jumlah poligon dan *draw calls*.
-- **Babylon.js sebagai Prioritas:** Untuk proyek XR berskala besar, prioritaskan Babylon.js karena dukungan bawaannya untuk interaksi VR, fisika, dan UI 3D jauh lebih matang dibanding library lain.
-- **UI Spasial:** Ingat bahwa elemen HTML biasa tidak muncul di dalam sesi `immersive-vr` atau `immersive-ar`. Anda harus membuat UI berupa objek 3D (seperti panel yang melayang di udara).
-- **Hit-Testing:** Untuk AR, gunakan fitur *Hit-Test* yang disediakan WebXR API untuk mengenali lantai atau meja sebagai tempat menaruh objek.
+Aktifkan skill ini ketika pengguna:
+- Mengembangkan aplikasi web *Spatial Computing* (VR/AR/MR).
+- Menginisialisasi sesi WebXR (`immersive-vr`, `immersive-ar`).
+- Mengimplementasikan *Hand Tracking* (pelacakan sendi tangan, gerakan cubit/pinch) atau kontroler spasial.
+- Mengaktifkan *Passthrough* warna Mixed Reality.
+- Menggunakan AR *Hit-Testing* untuk menempatkan objek 3D di lantai atau meja fisik.
+- Mengoptimalkan performa VR dengan *Fixed Foveated Rendering* (FFR).
+
+---
+
+### Panduan Inti Pengembangan Spasial
+
+1. **Stabilitas Frame Rate Mutlak**:
+   - Targetkan 72–90 FPS tanpa toleransi *stutter*. Pada kacamata VR, keterlambatan frame (*latency hitch*) langsung memicu rasa mual (*motion sickness*).
+2. **Fixed Foveated Rendering (FFR)**:
+   - Aktifkan fitur foveation pada Meta Quest untuk menurunkan resolusi tepi lensa (periferi mata), menghemat 20-30% daya GPU.
+3. **Antarmuka 3D Spasial (Bukan HTML DOM)**:
+   - Elemen HTML standar tidak dapat ditampilkan di dalam sesi imersif. Buat UI berupa panel 3D melayang (*world-space meshes*).
+4. **Hit-Testing untuk AR**:
+   - Manfaatkan *Hit-Test API* bawaan WebXR untuk mendeteksi bidang nyata permukaan meja atau lantai secara instan sebelum meletakkan objek 3D.