vibes-plug 1.0.0 → 2.11.0

package/skills/web-scraper/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: web-scraper
-description: "Smart web data extraction capability with multi-strategy scraping (Crawl4AI, Playwright, BeautifulSoup), LLM extraction, pagination support, and structured export / Kemampuan ekstraksi data web cerdas dengan strategi scraping modern (Crawl4AI, Playwright, BeautifulSoup), ekstraksi LLM, paginasi, dan ekspor terstruktur."
+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"
 ---
 
-# Web Scraper Expert (2026 Edition)
+# Agentic Web Scraper Expert (2026 Edition)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -13,151 +13,103 @@ author: "Roedy Rustam"
 <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
-Smart web data extraction using modern scraping strategies — **Firecrawl** (LLM-ready structured extraction), **Jina Reader API** (clean markdown from any URL), **Crawl4AI** (async Python scraping), **Playwright** (browser automation), and **BeautifulSoup** (lightweight HTML parsing). Supports pagination, dynamic content, structured export (JSON, CSV, Markdown), and AI-powered data extraction.
+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 (SPAs, React apps).
+- Scraping dynamic JavaScript-rendered pages and complex SPAs.
 - Converting web pages to clean Markdown for LLM context or RAG pipelines.
-- Building an automated data pipeline that scrapes, transforms, and stores data.
-- Extracting data at scale with rate limiting and proxy rotation.
+- Dealing with anti-bot protections or complex Shadow DOM architectures during scraping.
+- Implementing an automated agentic data extraction loop.
 
-### Strategy Selection Guide
+### Extracting DOM into LLM-Friendly Markdown
+Use **Crawl4AI v4** for high-performance async extraction and **Firecrawl** for seamless LLM-ready conversion.
 
-| Strategy | Tool | Best For | JS Required |
-|---|---|---|---|
-| **Managed API** | Firecrawl / Jina Reader | LLM-ready content, clean Markdown | Handled |
-| **Async Python** | Crawl4AI | High-volume, AI-powered extraction | Optional |
-| **Browser Automation** | Playwright | Complex SPAs, auth-required pages | ✅ |
-| **Lightweight HTML** | BeautifulSoup + httpx | Static HTML, fast extraction | ❌ |
+**Crawl4AI v4 (Async Python):**
+```python
+import asyncio
+from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig, CacheMode
 
-### Firecrawl — LLM-Ready Web Scraping (2026 Standard)
-Firecrawl converts any URL to clean, LLM-ready Markdown with a single API call:
+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")
 
-# Single page — clean Markdown
-result = app.scrape_url(
-    "https://example.com/article",
-    formats=["markdown", "html"],
-    only_main_content=True,  # removes nav, footer, ads
-)
-print(result.markdown)
-
-# Full site crawl
-crawl_result = app.crawl_url(
-    "https://docs.example.com",
-    limit=50,
-    scrape_options={"formats": ["markdown"]},
-)
-
-# LLM-powered structured extraction with JSON schema
-from pydantic import BaseModel
-
-class ProductInfo(BaseModel):
-    name: str
-    price: float
-    description: str
-    in_stock: bool
+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://shop.example.com/product/123",
-    formats=["extract"],
-    extract={"schema": ProductInfo.model_json_schema()},
+    "https://example.com/data",
+    formats=["extract", "markdown"],
+    extract={"schema": ExtractionSchema.model_json_schema()}
 )
-product = ProductInfo(**result.extract)
+print(result.markdown) # Clean markdown
+print(result.extract)  # Structured JSON
 ```
 
-### Jina Reader API — Clean Markdown from Any URL
-```python
-import httpx
-
-async def url_to_markdown(url: str) -> str:
-    """Convert any URL to clean Markdown via Jina Reader API."""
-    async with httpx.AsyncClient() as client:
-        response = await client.get(
-            f"https://r.jina.ai/{url}",
-            headers={
-                "Accept": "application/json",
-                "X-Return-Format": "markdown",
-                "Authorization": f"Bearer {JINA_API_KEY}",
-            }
-        )
-        data = response.json()
-        return data["data"]["content"]
-
-# Search and get results as Markdown
-async def search_to_markdown(query: str) -> str:
-    async with httpx.AsyncClient() as client:
-        response = await client.get(
-            f"https://s.jina.ai/{query}",
-            headers={"Accept": "application/json"}
-        )
-        return response.json()["data"]
-```
+### 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.
 
-### Crawl4AI — Async Python Web Scraper
-```python
-import asyncio
-from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig, CacheMode
+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.
 
-async def scrape_with_ai_extraction():
-    browser_config = BrowserConfig(headless=True, verbose=False)
-    
-    async with AsyncWebCrawler(config=browser_config) as crawler:
-        result = await crawler.arun(
-            url="https://news.example.com",
-            config=CrawlerRunConfig(
-                cache_mode=CacheMode.ENABLED,       # cache results
-                word_count_threshold=50,            # skip short content
-                exclude_external_links=True,
-                remove_overlay_elements=True,       # remove popups/modals
-            ),
-        )
-        
-        print(result.markdown.fit_markdown)  # cleaned, AI-optimized Markdown
-        print(result.links)                  # extracted links
-```
+### 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.
 
-### Playwright — Complex Dynamic Pages
-```python
-from playwright.async_api import async_playwright
-import asyncio
+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.
 
-async def scrape_spa(url: str) -> dict:
-    async with async_playwright() as pw:
-        browser = await pw.chromium.launch(headless=True)
-        page = await browser.new_page()
-        
-        # Block images/CSS to speed up
-        await page.route("**/*.{png,jpg,jpeg,gif,css,woff2}", lambda r: r.abort())
-        
-        await page.goto(url, wait_until="networkidle")
-        
-        # Wait for dynamic content
-        await page.wait_for_selector("[data-testid='product-list']")
-        
-        # Extract structured data via JavaScript
-        products = await page.evaluate("""() => {
-            return Array.from(document.querySelectorAll('.product-card')).map(card => ({
-                name: card.querySelector('.product-name')?.textContent?.trim(),
-                price: card.querySelector('.price')?.textContent?.trim(),
-            }));
-        }""")
+```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)
         
-        await browser.close()
-        return {"products": products, "url": url}
+        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 — minimum 1-2 seconds between requests.
-- [ ] Use descriptive `User-Agent` header with contact email.
-- [ ] Cache results to avoid repeated requests.
-- [ ] Prefer public APIs or official data feeds when available.
+- [ ] Implement rate limiting.
+- [ ] Use descriptive `User-Agent` headers.
 - [ ] Do not scrape personal/private data without consent.
 
 ---
@@ -165,41 +117,41 @@ async def scrape_spa(url: str) -> dict:
 <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
-Ekstraksi data web yang cerdas menggunakan strategi scraping modern — **Firecrawl** (ekstraksi terstruktur siap-LLM), **Jina Reader API** (Markdown bersih dari URL manapun), **Crawl4AI** (scraping Python async), **Playwright** (otomasi browser), dan **BeautifulSoup** (parsing HTML ringan). Mendukung paginasi, konten dinamis, ekspor terstruktur, dan ekstraksi data bertenaga AI.
+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 website untuk analisis, data pelatihan, atau pipeline konten.
-- Scraping halaman yang dirender JavaScript secara dinamis (SPA, aplikasi React).
+- 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.
-- Membangun pipeline data otomatis yang melakukan scraping, transformasi, dan penyimpanan.
-- Mengekstrak data dalam skala besar dengan rate limiting dan rotasi proxy.
-
-### Panduan Pemilihan Strategi
-
-| Strategi | Tool | Terbaik Untuk | Perlu JS |
-|---|---|---|---|
-| **API Terkelola** | Firecrawl / Jina Reader | Konten siap LLM, Markdown bersih | Ditangani |
-| **Python Async** | Crawl4AI | Volume tinggi, ekstraksi AI | Opsional |
-| **Otomasi Browser** | Playwright | SPA kompleks, halaman butuh auth | ✅ |
-| **HTML Ringan** | BeautifulSoup + httpx | HTML statis, ekstraksi cepat | ❌ |
+- Menghadapi perlindungan anti-bot atau arsitektur Shadow DOM yang kompleks saat scraping.
+- Mengimplementasikan loop ekstraksi data agentic otomatis.
 
-### Firecrawl — Scraping Web Siap LLM
-Firecrawl mengonversi URL apapun menjadi Markdown bersih siap LLM dengan satu panggilan API. Mendukung crawling seluruh situs, ekstraksi terstruktur berbasis skema JSON, dan penghapusan konten yang tidak relevan (navigasi, footer, iklan).
+### 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).
 
-### Jina Reader API — Markdown Bersih dari URL Manapun
-Jina Reader (`r.jina.ai/{url}`) mengonversi halaman web manapun menjadi Markdown yang dioptimalkan untuk LLM. Jina Search (`s.jina.ai/{query}`) melakukan pencarian web dan mengembalikan hasilnya sebagai Markdown.
+### 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.
 
-### Crawl4AI — Web Scraper Python Async
-Crawl4AI mendukung caching hasil, ekstraksi Markdown yang dioptimalkan AI, dan konfigurasi browser yang fleksibel untuk scraping konten dinamis.
+### Loop Ekstraksi Agentic
+Implementasikan loop otonom di mana LLM memandu scraper berdasarkan status halaman saat ini, bukan bergantung pada selektor CSS yang rentan rusak.
 
-### Playwright — Halaman Dinamis Kompleks
-Gunakan Playwright untuk scraping SPA yang memerlukan eksekusi JavaScript, menunggu elemen dinamis, atau interaksi dengan halaman (klik, scroll, isi form).
+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 — minimal 1-2 detik antar permintaan.
-- [ ] Gunakan header `User-Agent` deskriptif dengan email kontak.
-- [ ] Cache hasil untuk menghindari permintaan berulang.
-- [ ] Utamakan API publik atau feed data resmi jika tersedia.
+- [ ] Implementasikan rate limiting.
+- [ ] Gunakan header `User-Agent` yang deskriptif.
 - [ ] Jangan scraping data pribadi/privat tanpa izin.

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

@@ -0,0 +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."
+author: "Roedy Rustam"
+---
+
+# 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

@@ -0,0 +1,123 @@
+---
+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"
+---
+
+# WebXR AR/VR Expert
+
+[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 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.
+
+### 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).
+
+### Core Concepts
+
+#### 1. Babylon.js WebXR Setup
+Babylon.js provides the most robust default WebXR experience.
+```typescript
+import { Scene, FreeCamera, Vector3, Engine } from '@babylonjs/core';
+
+async function setupXR(scene: Scene) {
+  // Initialize default WebXR experience
+  // This automatically adds the "Enter VR/AR" button, teleportation, and controller models
+  const xr = await scene.createDefaultXRExperienceAsync({
+    uiOptions: {
+      sessionMode: 'immersive-vr', // or 'immersive-ar'
+    },
+    optionalFeatures: true
+  });
+  
+  // Example: Listen for controller input
+  xr.input.onControllerAddedObservable.add((controller) => {
+    controller.onMotionControllerInitObservable.add((motionController) => {
+      // Handle button presses
+    });
+  });
+}
+```
+
+#### 2. Three.js / React Three Fiber Setup
+In R3F, use `@react-three/xr`.
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { XR, createXRStore } from '@react-three/xr';
+
+const store = createXRStore();
+
+export default function App() {
+  return (
+    <>
+      <button onClick={() => store.enterVR()}>Enter VR</button>
+      <Canvas>
+        <XR store={store}>
+          <mesh>
+            <boxGeometry />
+            <meshBasicMaterial color="red" />
+          </mesh>
+        </XR>
+      </Canvas>
+    </>
+  );
+}
+```
+
+#### 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).
+
+---
+
+<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 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*.
+
+### 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.