vibes-plug 2.11.0 → 3.9.0

package/skills/web-scraper/SKILL.md

@@ -1,157 +1,158 @@
----
-name: web-scraper
-description: "Smart agentic web data extraction with multi-strategy scraping (Crawl4AI v4, Firecrawl), LLM extraction loops, anti-bot bypass, and structured export / Ekstraksi data web cerdas dan agentic dengan scraping multi-strategi (Crawl4AI v4, Firecrawl), ekstraksi LLM, bypass anti-bot, dan ekspor terstruktur."
-author: "Roedy Rustam"
----
-
-# Agentic Web Scraper Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `browser-automation-expert`, `ai-llm-integration-expert`, `brainstorming`, and `zero-to-prod-orchestrator` to ensure cohesive agentic execution.
-
-### Description
-Advanced Agentic Web Scraping utilizing modern multi-strategy data extraction. Leverages **Crawl4AI v4** and **Firecrawl** to convert raw DOMs into LLM-friendly Markdown. Implements Agentic Extraction loops where the LLM guides the scraper dynamically based on page state. Incorporates strategies for bypassing anti-bot measures (Cloudflare Turnstile, Datadome) and navigating dynamic Shadow DOMs.
-
-### Trigger Conditions
-- Extracting structured data from websites for analysis, training data, or content pipelines.
-- Scraping dynamic JavaScript-rendered pages and complex SPAs.
-- Converting web pages to clean Markdown for LLM context or RAG pipelines.
-- Dealing with anti-bot protections or complex Shadow DOM architectures during scraping.
-- Implementing an automated agentic data extraction loop.
-
-### Extracting DOM into LLM-Friendly Markdown
-Use **Crawl4AI v4** for high-performance async extraction and **Firecrawl** for seamless LLM-ready conversion.
-
-**Crawl4AI v4 (Async Python):**
-```python
-import asyncio
-from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig, CacheMode
-
-async def extract_markdown(url: str):
-    config = BrowserConfig(headless=True, bypass_csp=True)
-    run_config = CrawlerRunConfig(
-        cache_mode=CacheMode.ENABLED,
-        remove_overlay_elements=True,
-        word_count_threshold=50
-    )
-    
-    async with AsyncWebCrawler(config=config) as crawler:
-        result = await crawler.arun(url=url, config=run_config)
-        # Returns clean, AI-optimized markdown ready for LLM consumption
-        return result.markdown.fit_markdown
-```
-
-**Firecrawl (Managed API):**
-```python
-from firecrawl import FirecrawlApp
-from pydantic import BaseModel
-
-app = FirecrawlApp(api_key="fc-xxxx")
-
-class ExtractionSchema(BaseModel):
-    title: str
-    content: str
-    key_metrics: list[str]
-
-# Single API call to extract structured data based on JSON schema
-result = app.scrape_url(
-    "https://example.com/data",
-    formats=["extract", "markdown"],
-    extract={"schema": ExtractionSchema.model_json_schema()}
-)
-print(result.markdown) # Clean markdown
-print(result.extract)  # Structured JSON
-```
-
-### Anti-Bot Bypass & Shadow DOMs
-Scraping modern web apps requires bypassing anti-bot measures like Cloudflare Turnstile and Datadome, as well as accessing deeply nested elements.
-
-1. **Anti-Bot Bypass (Cloudflare Turnstile, Datadome):**
-   - **Residential Proxies:** Rotate high-quality residential IPs to avoid datacenter IP bans.
-   - **Browser Fingerprinting:** Use tools like `playwright-stealth` or specialized stealth browsers (e.g., Undetected ChromeDriver, Curl-Impersonate) to mask automated fingerprints (WebGL, Canvas, User-Agent).
-   - **Human-like Interaction:** Introduce random delays, simulate realistic mouse movements, and handle CAPTCHAs via third-party solving services only when necessary.
-2. **Dynamic Shadow DOMs:**
-   - Use CSS piercing selectors or JavaScript execution to penetrate the Shadow Root.
-   - Example (Playwright): `await page.locator('my-web-component >> css=.internal-element').text_content()`
-   - Recursively traverse the DOM tree injecting scripts to extract content from encapsulated components.
-
-### Agentic Extraction Loops
-Implement an autonomous loop where an LLM guides the scraper based on the current page state, rather than relying on brittle CSS selectors.
-
-1. **Observe:** The scraper extracts the current DOM into clean Markdown.
-2. **Analyze:** The LLM analyzes the Markdown to identify necessary data or the next interaction step (e.g., "Click the 'Load More' button").
-3. **Act:** The LLM issues a command (extract data, navigate, click, fill form).
-4. **Loop:** Repeat until the extraction goal is met.
-
-```python
-async def agentic_scrape_loop(url: str, goal: str):
-    current_url = url
-    while True:
-        markdown_content = await extract_markdown(current_url)
-        # LLM analyzes state and decides next action
-        action = await llm_decide_action(markdown_content, goal)
-        
-        if action.type == "COMPLETE":
-            return action.extracted_data
-        elif action.type == "CLICK":
-            await click_element(action.target_selector)
-        elif action.type == "NAVIGATE":
-            current_url = action.new_url
-```
-
-### Ethical Scraping Checklist
-- [ ] Check `robots.txt` and respect `Disallow` rules.
-- [ ] Implement rate limiting.
-- [ ] Use descriptive `User-Agent` headers.
-- [ ] Do not scrape personal/private data without consent.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `browser-automation-expert`, `ai-llm-integration-expert`, `brainstorming`, dan `zero-to-prod-orchestrator` untuk memastikan eksekusi agentic yang kohesif.
-
-### Deskripsi
-Scraping Web Agentic tingkat lanjut menggunakan ekstraksi data multi-strategi modern. Memanfaatkan **Crawl4AI v4** dan **Firecrawl** untuk mengubah DOM mentah menjadi Markdown yang ramah LLM. Mengimplementasikan loop Ekstraksi Agentic di mana LLM memandu scraper secara dinamis berdasarkan status halaman. Menggabungkan strategi untuk melewati tindakan anti-bot (Cloudflare Turnstile, Datadome) dan menavigasi Shadow DOM yang dinamis.
-
-### Kondisi Pemicu
-- Mengekstrak data terstruktur dari situs web untuk analisis, data pelatihan, atau pipeline konten.
-- Scraping halaman yang dirender JavaScript secara dinamis dan SPA kompleks.
-- Mengonversi halaman web menjadi Markdown bersih untuk konteks LLM atau pipeline RAG.
-- Menghadapi perlindungan anti-bot atau arsitektur Shadow DOM yang kompleks saat scraping.
-- Mengimplementasikan loop ekstraksi data agentic otomatis.
-
-### Mengekstrak DOM menjadi Markdown Ramah LLM
-Gunakan **Crawl4AI v4** untuk ekstraksi async berperforma tinggi dan **Firecrawl** untuk konversi siap LLM yang mulus. (Lihat contoh kode di bagian bahasa Inggris).
-
-### Bypass Anti-Bot & Shadow DOM
-1. **Bypass Anti-Bot (Cloudflare Turnstile, Datadome):**
-   - **Proxy Residensial:** Rotasi IP residensial berkualitas tinggi untuk menghindari pemblokiran IP datacenter.
-   - **Browser Fingerprinting:** Gunakan alat seperti `playwright-stealth` atau browser stealth khusus untuk menyembunyikan sidik jari otomatis.
-   - **Interaksi Mirip Manusia:** Tambahkan penundaan acak, simulasikan gerakan mouse yang realistis.
-2. **Shadow DOM Dinamis:**
-   - Gunakan selektor penembus CSS atau eksekusi JavaScript untuk menembus Shadow Root.
-   - Telusuri pohon DOM secara rekursif dengan menyuntikkan skrip untuk mengekstrak konten.
-
-### Loop Ekstraksi Agentic
-Implementasikan loop otonom di mana LLM memandu scraper berdasarkan status halaman saat ini, bukan bergantung pada selektor CSS yang rentan rusak.
-
-1. **Observasi:** Scraper mengekstrak DOM saat ini menjadi Markdown yang bersih.
-2. **Analisis:** LLM menganalisis Markdown untuk mengidentifikasi data yang diperlukan atau langkah interaksi selanjutnya (misal: "Klik tombol 'Muat Lebih Banyak'").
-3. **Aksi:** LLM mengeluarkan perintah (ekstrak data, navigasi, klik, isi form).
-4. **Loop:** Ulangi hingga tujuan ekstraksi tercapai.
-
-### Checklist Scraping Etis
-- [ ] Periksa `robots.txt` dan hormati aturan `Disallow`.
-- [ ] Implementasikan rate limiting.
-- [ ] Gunakan header `User-Agent` yang deskriptif.
-- [ ] Jangan scraping data pribadi/privat tanpa izin.
+---
+name: web-scraper
+description: "Smart agentic web data extraction with multi-strategy scraping (Crawl4AI v4, Firecrawl), LLM extraction loops, anti-bot bypass, and structured export / Ekstraksi data web cerdas dan agentic dengan scraping multi-strategi (Crawl4AI v4, Firecrawl), ekstraksi LLM, bypass anti-bot, dan ekspor terstruktur."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Agentic Web Scraper Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `browser-automation-expert`, `ai-llm-integration-expert`, `brainstorming`, and `zero-to-prod-orchestrator` to ensure cohesive agentic execution.
+
+### Description
+Advanced Agentic Web Scraping utilizing modern multi-strategy data extraction. Leverages **Crawl4AI v4** and **Firecrawl** to convert raw DOMs into LLM-friendly Markdown. Implements Agentic Extraction loops where the LLM guides the scraper dynamically based on page state. Incorporates strategies for bypassing anti-bot measures (Cloudflare Turnstile, Datadome) and navigating dynamic Shadow DOMs.
+
+### Trigger Conditions
+- Extracting structured data from websites for analysis, training data, or content pipelines.
+- Scraping dynamic JavaScript-rendered pages and complex SPAs.
+- Converting web pages to clean Markdown for LLM context or RAG pipelines.
+- Dealing with anti-bot protections or complex Shadow DOM architectures during scraping.
+- Implementing an automated agentic data extraction loop.
+
+### Extracting DOM into LLM-Friendly Markdown
+Use **Crawl4AI v4** for high-performance async extraction and **Firecrawl** for seamless LLM-ready conversion.
+
+**Crawl4AI v4 (Async Python):**
+```python
+import asyncio
+from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig, CacheMode
+
+async def extract_markdown(url: str):
+    config = BrowserConfig(headless=True, bypass_csp=True)
+    run_config = CrawlerRunConfig(
+        cache_mode=CacheMode.ENABLED,
+        remove_overlay_elements=True,
+        word_count_threshold=50
+    )
+    
+    async with AsyncWebCrawler(config=config) as crawler:
+        result = await crawler.arun(url=url, config=run_config)
+        # Returns clean, AI-optimized markdown ready for LLM consumption
+        return result.markdown.fit_markdown
+```
+
+**Firecrawl (Managed API):**
+```python
+from firecrawl import FirecrawlApp
+from pydantic import BaseModel
+
+app = FirecrawlApp(api_key="fc-xxxx")
+
+class ExtractionSchema(BaseModel):
+    title: str
+    content: str
+    key_metrics: list[str]
+
+# Single API call to extract structured data based on JSON schema
+result = app.scrape_url(
+    "https://example.com/data",
+    formats=["extract", "markdown"],
+    extract={"schema": ExtractionSchema.model_json_schema()}
+)
+print(result.markdown) # Clean markdown
+print(result.extract)  # Structured JSON
+```
+
+### Anti-Bot Bypass & Shadow DOMs
+Scraping modern web apps requires bypassing anti-bot measures like Cloudflare Turnstile and Datadome, as well as accessing deeply nested elements.
+
+1. **Anti-Bot Bypass (Cloudflare Turnstile, Datadome):**
+   - **Residential Proxies:** Rotate high-quality residential IPs to avoid datacenter IP bans.
+   - **Browser Fingerprinting:** Use tools like `playwright-stealth` or specialized stealth browsers (e.g., Undetected ChromeDriver, Curl-Impersonate) to mask automated fingerprints (WebGL, Canvas, User-Agent).
+   - **Human-like Interaction:** Introduce random delays, simulate realistic mouse movements, and handle CAPTCHAs via third-party solving services only when necessary.
+2. **Dynamic Shadow DOMs:**
+   - Use CSS piercing selectors or JavaScript execution to penetrate the Shadow Root.
+   - Example (Playwright): `await page.locator('my-web-component >> css=.internal-element').text_content()`
+   - Recursively traverse the DOM tree injecting scripts to extract content from encapsulated components.
+
+### Agentic Extraction Loops
+Implement an autonomous loop where an LLM guides the scraper based on the current page state, rather than relying on brittle CSS selectors.
+
+1. **Observe:** The scraper extracts the current DOM into clean Markdown.
+2. **Analyze:** The LLM analyzes the Markdown to identify necessary data or the next interaction step (e.g., "Click the 'Load More' button").
+3. **Act:** The LLM issues a command (extract data, navigate, click, fill form).
+4. **Loop:** Repeat until the extraction goal is met.
+
+```python
+async def agentic_scrape_loop(url: str, goal: str):
+    current_url = url
+    while True:
+        markdown_content = await extract_markdown(current_url)
+        # LLM analyzes state and decides next action
+        action = await llm_decide_action(markdown_content, goal)
+        
+        if action.type == "COMPLETE":
+            return action.extracted_data
+        elif action.type == "CLICK":
+            await click_element(action.target_selector)
+        elif action.type == "NAVIGATE":
+            current_url = action.new_url
+```
+
+### Ethical Scraping Checklist
+- [ ] Check `robots.txt` and respect `Disallow` rules.
+- [ ] Implement rate limiting.
+- [ ] Use descriptive `User-Agent` headers.
+- [ ] Do not scrape personal/private data without consent.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `browser-automation-expert`, `ai-llm-integration-expert`, `brainstorming`, dan `zero-to-prod-orchestrator` untuk memastikan eksekusi agentic yang kohesif.
+
+### Deskripsi
+Scraping Web Agentic tingkat lanjut menggunakan ekstraksi data multi-strategi modern. Memanfaatkan **Crawl4AI v4** dan **Firecrawl** untuk mengubah DOM mentah menjadi Markdown yang ramah LLM. Mengimplementasikan loop Ekstraksi Agentic di mana LLM memandu scraper secara dinamis berdasarkan status halaman. Menggabungkan strategi untuk melewati tindakan anti-bot (Cloudflare Turnstile, Datadome) dan menavigasi Shadow DOM yang dinamis.
+
+### Kondisi Pemicu
+- Mengekstrak data terstruktur dari situs web untuk analisis, data pelatihan, atau pipeline konten.
+- Scraping halaman yang dirender JavaScript secara dinamis dan SPA kompleks.
+- Mengonversi halaman web menjadi Markdown bersih untuk konteks LLM atau pipeline RAG.
+- Menghadapi perlindungan anti-bot atau arsitektur Shadow DOM yang kompleks saat scraping.
+- Mengimplementasikan loop ekstraksi data agentic otomatis.
+
+### Mengekstrak DOM menjadi Markdown Ramah LLM
+Gunakan **Crawl4AI v4** untuk ekstraksi async berperforma tinggi dan **Firecrawl** untuk konversi siap LLM yang mulus. (Lihat contoh kode di bagian bahasa Inggris).
+
+### Bypass Anti-Bot & Shadow DOM
+1. **Bypass Anti-Bot (Cloudflare Turnstile, Datadome):**
+   - **Proxy Residensial:** Rotasi IP residensial berkualitas tinggi untuk menghindari pemblokiran IP datacenter.
+   - **Browser Fingerprinting:** Gunakan alat seperti `playwright-stealth` atau browser stealth khusus untuk menyembunyikan sidik jari otomatis.
+   - **Interaksi Mirip Manusia:** Tambahkan penundaan acak, simulasikan gerakan mouse yang realistis.
+2. **Shadow DOM Dinamis:**
+   - Gunakan selektor penembus CSS atau eksekusi JavaScript untuk menembus Shadow Root.
+   - Telusuri pohon DOM secara rekursif dengan menyuntikkan skrip untuk mengekstrak konten.
+
+### Loop Ekstraksi Agentic
+Implementasikan loop otonom di mana LLM memandu scraper berdasarkan status halaman saat ini, bukan bergantung pada selektor CSS yang rentan rusak.
+
+1. **Observasi:** Scraper mengekstrak DOM saat ini menjadi Markdown yang bersih.
+2. **Analisis:** LLM menganalisis Markdown untuk mengidentifikasi data yang diperlukan atau langkah interaksi selanjutnya (misal: "Klik tombol 'Muat Lebih Banyak'").
+3. **Aksi:** LLM mengeluarkan perintah (ekstrak data, navigasi, klik, isi form).
+4. **Loop:** Ulangi hingga tujuan ekstraksi tercapai.
+
+### Checklist Scraping Etis
+- [ ] Periksa `robots.txt` dan hormati aturan `Disallow`.
+- [ ] Implementasikan rate limiting.
+- [ ] Gunakan header `User-Agent` yang deskriptif.
+- [ ] Jangan scraping data pribadi/privat tanpa izin.

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

@@ -1,7 +1,8 @@
 ---
 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"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Website Design Cloner & Reverse Engineering Expert (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 `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.
@@ -135,7 +136,7 @@ export function HeroSection() {
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 `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.
@@ -177,4 +178,4 @@ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`,
 | `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. |
+| `tailwind-expert` | Mengatur konfigurasi Tailwind CSS v4 `@theme` dan utilitas responsif. |

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

@@ -1,10 +1,11 @@
 ---
 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"
+version: "3.0.0"
 ---
 
-# WebXR AR/VR Expert
+# WebXR Spatial Computing Expert (VR, AR & MR)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -14,61 +15,100 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills:
+- `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.
 
-### Core Concepts
+---
+
+### 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. |
+
+---
+
+### 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>
@@ -77,28 +117,12 @@ 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.
 
 ---
 
@@ -106,18 +130,34 @@ This skill works best when combined with:
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `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.