vibes-plug 1.0.0 → 2.11.0

package/skills/gemini-agent-booster/SKILL.md

@@ -1,10 +1,11 @@
 ---
 name: gemini-agent-booster
-description: "Master optimization protocol for Gemini Agent (Antigravity) to unlock native 1M+ long-context reasoning, multimodal vision UI audits, visual subagent feedback, and high-speed problem solving / Protokol optimasi utama untuk Gemini Agent (Antigravity) untuk mengaktifkan pemikiran long-context 1M+, audit UI visual multimodal, dan pemecahan masalah kecepatan tinggi."
+version: "2.8.0"
+description: "Master optimization protocol for Gemini Agent (Antigravity) to unlock native 2M+ long-context reasoning, Gemini 3.x thinking budget control, native context caching, Multimodal Live API protocols, and high-speed problem solving / Protokol optimasi utama untuk Gemini Agent (Antigravity) untuk mengaktifkan pemikiran long-context 2M+, kontrol thinking budget Gemini 3.x, context caching native, protokol Multimodal Live API, dan pemecahan masalah kecepatan tinggi."
 author: "Roedy Rustam"
 ---
 
-# Gemini Agent Booster (2026 Edition — Gemini 2.5 Pro/Flash)
+# Gemini Agent Booster (2026 Edition — Gemini 3.x Ecosystem)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -13,123 +14,160 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, `ai-llm-integration-expert`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
-Master optimization protocol for the Gemini Agent (Antigravity) to leverage native Gemini 2.5 Pro/Flash capabilities — including 1M+ token context window, multimodal vision analysis, deep research mode, thinking chains, and high-speed code generation.
+Master optimization protocol for the Gemini Agent (Antigravity) to leverage native Gemini 3.x (Gemini 3.8 Flash, Gemini 3.5/3.1 Pro/Flash) capabilities — including 1M–2M token context window, dynamic thinking budget control, native context caching (`cachedContent`), Multimodal Live API integration, visual UI auditing, and parallel tool calling.
 
 ### Trigger Conditions
-- Analyzing very large codebases, logs, or documents that require 1M+ token context.
-- Performing multimodal UI audits (analyzing screenshots of running applications).
-- Running deep research tasks requiring web search + reasoning synthesis.
-- Generating large, complex code artifacts in a single pass.
-- Delegating complex multi-step tasks to browser subagents.
+- Analyzing very large codebases, full log histories, or monolithic documents requiring 1M–2M token context.
+- Managing reasoning budgets with Gemini 3.x Thinking Mode (`thinkingConfig`).
+- Implementing cost-saving strategies with native Gemini Context Caching (`cachedContent`).
+- Performing real-time bidirectional multimodal audio/video or visual UI audits.
+- Running deep research tasks requiring web search grounding + reasoning synthesis.
+- Delegating complex multi-step tasks to parallel agent swarms or browser subagents.
 
-### Gemini 2.5 Pro/Flash Capabilities (2026)
+### Gemini 3.x Capability Matrix (2026)
 
-| Capability | Gemini 2.5 Pro | Gemini 2.5 Flash |
+| Capability | Gemini 3.1 / 3.5 Pro | Gemini 3.8 / 3.1 Flash |
 |---|---|---|
-| Context Window | 1M tokens | 1M tokens |
-| Thinking / Reasoning | ✅ Extended thinking | ✅ Flash thinking |
-| Multimodal (Image/Video) | ✅ | ✅ |
-| Code Generation | Best-in-class | Very fast |
-| Web Search (Grounding) | ✅ | ✅ |
-| Deep Research | ✅ (up to 30 min) | ✅ |
-| Audio | ✅ | ✅ |
-| Speed | Slower | 5-10x faster |
-| Cost | Higher | Lower |
-
-### 1M+ Token Long-Context Strategies
-
-When working with very large inputs (codebases, documents, logs):
-1. **Pass full file trees** — use `list_dir` to get the complete file tree, then pass relevant files to maximize context.
-2. **Read whole files, not snippets** — with 1M context, read entire source files rather than grepping for fragments.
-3. **Cross-file analysis** — trace data flows, imports, and interfaces across multiple files simultaneously.
-4. **Log analysis** — pass entire server logs (up to hundreds of thousands of lines) for pattern detection.
-5. **Codebase onboarding** — ingest an entire unfamiliar repo in one pass for deep architectural understanding.
-
-### Multimodal Vision — UI Audit Protocol
-Use the `browser_subagent` + `generate_image` tools for visual feedback:
-1. **Screenshot the running app** via browser subagent.
-2. **Analyze the screenshot** for layout issues, accessibility problems, design inconsistencies, Core Web Vitals opportunities.
-3. **Generate a target design** using `generate_image` for visual comparison.
-4. **Iterate code** based on visual delta between current and target design.
-
-### Thinking Mode — Extended Reasoning
-For complex problems, use Gemini's extended thinking:
-- Architecture decisions with multiple tradeoffs.
-- Debugging hard-to-reproduce race conditions.
-- Designing multi-step agentic workflows.
-- Cryptographic or security-sensitive implementations.
-- **Protocol**: State the problem clearly → let thinking run → review reasoning chain → validate conclusion.
-
-### Deep Research Mode
-Gemini 2.5 Pro's deep research can spend up to 30 minutes actively searching, reading, and synthesizing from hundreds of sources. Use for:
-- Market research before building a new feature.
-- Security vulnerability research.
-- Competitive analysis of existing tools.
-- Collecting the latest API documentation for a framework.
-
-### Speed Optimization — Flash for Iteration
-Use **Gemini 2.5 Flash** for:
-- Quick code generation, small file edits.
-- Rapid back-and-forth iteration (linting, formatting, small bug fixes).
-- High-volume batch processing.
-
-Use **Gemini 2.5 Pro** for:
-- Complex architecture decisions.
-- Long-context full-codebase analysis.
-- Security audits requiring deep reasoning.
-- Generating comprehensive documentation.
-
-### Agent Parallelism
-Gemini Agent natively supports parallel tool calls — run independent operations simultaneously:
-- Read multiple files at once.
-- Run multiple searches in parallel.
-- Spawn multiple browser subagents for concurrent tasks.
-- Write multiple files simultaneously.
+| Context Window | Up to 2M tokens | 1M–2M tokens |
+| Thinking / Reasoning | Extended Reasoning (Deep Think) | Flash Thinking (Configurable Budget) |
+| Native Context Caching | Supported (`cachedContent`) | Supported (`cachedContent`) |
+| Multimodal (Image/Video/Audio) | Native Multimodal | Native Multimodal + Live API |
+| Code Generation & Tool Calling | State-of-the-Art Architecture | Ultra-fast iteration & subagents |
+| Search Grounding | Google Search Grounding | Google Search Grounding |
+| TTFT (Time to First Token) | Optimized for depth | 3–5x lower latency |
+| Relative Cost Profile | Higher (for critical paths) | Ultra-low cost (ideal for high-frequency loops) |
+
+### 1. Dynamic Thinking Budget & Reasoning Protocol
+For complex architectural decisions, security audits, or debugging race conditions, control the reasoning depth via `thinkingConfig`:
+- **Flash Thinking for Rapid Tasks**: Set lower or default thinking budgets for quick bug fixes, linting, and boilerplate generation.
+- **Extended Thinking for Critical Paths**: Allocate high thinking budgets (e.g. 8k–32k thinking tokens) when designing distributed schemas, refactoring core engines, or evaluating cryptographic trade-offs.
+- **Reasoning Token Separation**: Ensure internal thinking tokens (`<thought>`) are isolated from client-facing output streams so that final responses remain crisp, clean, and token-efficient.
+
+### 2. Native Context Caching (`cachedContent`)
+Reduce token costs by up to 75–90% and drastically cut latency on large repositories:
+- **Threshold**: Cache prompts, repository snapshots, or API schemas larger than 32,768 tokens.
+- **TTL Management**: Set appropriate time-to-live (TTL, e.g., 1–2 hours for active dev sessions, 24 hours for stable documentation).
+- **Structure**:
+  ```typescript
+  // Native Gemini Context Caching Example
+  const cache = await ai.createCachedContent({
+    model: 'gemini-3.1-pro',
+    contents: [{ role: 'user', parts: [{ text: fullCodebaseDump }] }],
+    ttl: '3600s',
+  });
+  
+  const response = await ai.models.generateContent({
+    model: 'gemini-3.1-pro',
+    contents: [{ role: 'user', parts: [{ text: 'Locate memory leak in worker thread' }] }],
+    cachedContent: cache.name,
+  });
+  ```
+
+### 3. 2M+ Token Long-Context Strategies
+When inspecting massive codebases:
+1. **Pass Full File Trees**: Use `list_dir` to obtain the complete project structure, then supply full source files into context.
+2. **Whole-File Ingestion**: With 1M–2M context, avoid grep fragmentation; inspect complete classes and dependency trees in one shot.
+3. **Cross-Service Traceability**: Analyze upstream microservice contracts, protobufs, and frontend consumers concurrently in the same session.
+4. **Massive Server Logs**: Ingest complete production logs to uncover subtle intermittent race conditions and memory leaks.
+
+### 4. Multimodal Live API & Screen Grounding
+Integrate real-time, low-latency multimodal interaction:
+- **Bidirectional Streaming**: Stream audio input and receive audio/text responses over WebSockets using Gemini Multimodal Live API.
+- **Screen & UI Grounding**: Capture frames from browser subagents or desktop windows; Gemini grounds user queries directly to coordinate points on screen.
+- **Visual UI Auditing Protocol**:
+  1. Capture current running application via `browser_subagent`.
+  2. Audit layout, typography, contrast, and visual hierarchy against HIG and WCAG standards.
+  3. Compare visually with target design using `generate_image` or design system guidelines.
+  4. Perform targeted micro-edits to CSS/Tailwind tokens until alignment reaches pixel perfection.
+
+### 5. Deep Research & Search Grounding
+Gemini's native Search Grounding connects the agent directly to real-time web knowledge:
+- Use Grounding for fresh library releases, breaking API deprecations, or zero-day CVE lookups.
+- Synthesize findings with source attribution citations.
+
+### 6. Parallel Tool Execution
+Gemini natively supports concurrent function calls:
+- Read and edit multiple independent files in a single pass.
+- Trigger parallel web searches or subagent workers simultaneously to minimize round-trip latency.
 
 ---
 
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, `ai-llm-integration-expert`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
 ### Deskripsi
-Protokol optimasi utama untuk Gemini Agent (Antigravity) memanfaatkan kemampuan native Gemini 2.5 Pro/Flash — termasuk context window 1M+ token, analisis visi multimodal, mode penelitian mendalam, rantai pemikiran, dan generasi kode berkecepatan tinggi.
+Protokol optimasi utama untuk Gemini Agent (Antigravity) memanfaatkan kapabilitas ekosistem Gemini 3.x (Gemini 3.8 Flash, Gemini 3.5/3.1 Pro/Flash) — termasuk context window 1M–2M token, kontrol dynamic thinking budget, native context caching (`cachedContent`), integrasi Multimodal Live API, audit visual UI, dan pemanggilan tool secara paralel.
 
 ### Kondisi Pemicu
-- Menganalisis codebase, log, atau dokumen yang sangat besar yang memerlukan konteks 1M+ token.
-- Melakukan audit UI multimodal (menganalisis screenshot aplikasi yang berjalan).
-- Menjalankan tugas penelitian mendalam yang memerlukan pencarian web + sintesis penalaran.
-- Menghasilkan artefak kode yang besar dan kompleks dalam satu lintasan.
-- Mendelegasikan tugas multi-langkah kompleks ke browser subagent.
+- Menganalisis codebase skala besar, histori log lengkap, atau dokumen monolitik yang membutuhkan konteks 1M–2M token.
+- Mengatur alokasi reasoning budget dengan Gemini 3.x Thinking Mode (`thinkingConfig`).
+- Menerapkan strategi pemangkasan biaya melalui native Gemini Context Caching (`cachedContent`).
+- Menjalankan interaksi audio/video dua arah secara real-time atau audit visual UI.
+- Menjalankan tugas riset mendalam dengan Google Search Grounding + sintesis penalaran.
+- Mendelegasikan tugas multi-langkah ke swarm agen paralel atau browser subagent.
 
-### Kemampuan Gemini 2.5 Pro/Flash (2026)
+### Matriks Kapabilitas Gemini 3.x (2026)
 
-| Kemampuan | Gemini 2.5 Pro | Gemini 2.5 Flash |
+| Kapabilitas | Gemini 3.1 / 3.5 Pro | Gemini 3.8 / 3.1 Flash |
 |---|---|---|
-| Context Window | 1M token | 1M token |
-| Pemikiran / Penalaran | ✅ Extended thinking | ✅ Flash thinking |
-| Multimodal (Gambar/Video) | ✅ | ✅ |
-| Generasi Kode | Terbaik di kelasnya | Sangat cepat |
-| Pencarian Web (Grounding) | ✅ | ✅ |
-| Penelitian Mendalam | ✅ (hingga 30 mnt) | ✅ |
-| Kecepatan | Lebih lambat | 5-10x lebih cepat |
-| Biaya | Lebih tinggi | Lebih rendah |
-
-### Strategi Long-Context 1M+ Token
-Manfaatkan jendela konteks besar dengan membaca seluruh file (bukan hanya fragment), melewatkan seluruh pohon file proyek, menganalisis aliran data lintas file secara bersamaan, dan menganalisis log server lengkap untuk deteksi pola.
-
-### Visi Multimodal — Protokol Audit UI
-Gunakan `browser_subagent` untuk mengambil screenshot aplikasi yang berjalan, analisis secara visual untuk masalah tata letak atau aksesibilitas, buat desain target dengan `generate_image`, lalu iterasi kode berdasarkan delta visual.
-
-### Mode Pemikiran — Extended Reasoning
-Untuk masalah kompleks (keputusan arsitektur, debugging race condition, alur kerja agentik), aktifkan mode pemikiran diperpanjang Gemini untuk rantai penalaran yang lebih dalam sebelum menghasilkan solusi.
-
-### Mode Penelitian Mendalam
-Gemini 2.5 Pro dapat menghabiskan hingga 30 menit secara aktif mencari, membaca, dan mensintesis dari ratusan sumber. Ideal untuk riset pasar, kerentanan keamanan, analisis kompetitif, atau pengumpulan dokumentasi API terbaru.
-
-### Flash untuk Iterasi, Pro untuk Kedalaman
-- **Flash**: Edit cepat, iterasi bolak-balik, pemrosesan batch.
-- **Pro**: Keputusan arsitektur, analisis codebase penuh, audit keamanan, dokumentasi komprehensif.
-
-### Paralelisme Agen
-Gemini Agent mendukung pemanggilan tool paralel secara native — jalankan operasi independen secara bersamaan untuk memaksimalkan throughput.
+| Context Window | Hingga 2M token | 1M–2M token |
+| Pemikiran / Penalaran | Extended Reasoning (Deep Think) | Flash Thinking (Configurable Budget) |
+| Native Context Caching | Didukung (`cachedContent`) | Didukung (`cachedContent`) |
+| Multimodal (Gambar/Video/Audio) | Native Multimodal | Native Multimodal + Live API |
+| Generasi Kode & Tool Calling | Arsitektur State-of-the-Art | Iterasi & subagent ultra-cepat |
+| Search Grounding | Google Search Grounding | Google Search Grounding |
+| TTFT (Latensi Token Pertama) | Dioptimalkan untuk kedalaman | 3–5x lebih cepat |
+| Profil Biaya | Lebih tinggi (untuk alur kritis) | Sangat hemat (ideal untuk perulangan cepat) |
+
+### 1. Dynamic Thinking Budget & Protokol Penalaran
+Untuk keputusan arsitektur kompleks, audit keamanan, atau perbaikan race condition yang rumit, atur kedalaman penalaran via `thinkingConfig`:
+- **Flash Thinking untuk Tugas Cepat**: Gunakan alokasi budget penalaran default atau rendah untuk perbaikan bug ringan, formatting, dan boilerplate.
+- **Extended Thinking untuk Alur Kritis**: Alokasikan budget penalaran tinggi (misal: 8k–32k thinking tokens) saat mendesain skema terdistribusi, refaktor engine inti, atau evaluasi kriptografi.
+- **Pemisahan Token Penalaran**: Pastikan token pemikiran internal (`<thought>`) dipisahkan dari aliran output pengguna agar respons akhir tetap ringkas, bersih, dan efisien token.
+
+### 2. Native Context Caching (`cachedContent`)
+Pangkas biaya API sebesar 75–90% serta kurangi latensi respons pada repositori besar:
+- **Ambang Batas**: Lakukan cache pada prompt, snapshot kode, atau skema dokumen yang melebihi 32.768 token.
+- **Manajemen TTL**: Tetapkan masa aktif cache (misal: 1–2 jam untuk sesi development aktif, 24 jam untuk dokumentasi statis).
+- **Contoh Implementasi**:
+  ```typescript
+  const cache = await ai.createCachedContent({
+    model: 'gemini-3.1-pro',
+    contents: [{ role: 'user', parts: [{ text: fullCodebaseDump }] }],
+    ttl: '3600s',
+  });
+  ```
+
+### 3. Strategi Long-Context 2M+ Token
+Saat menganalisis repositori besar:
+1. **Pohon File Penuh**: Gunakan `list_dir` untuk memetakan struktur proyek, lalu masukkan seluruh file terkait ke dalam konteks.
+2. **Ingesti File Penuh**: Dengan jendela 1M–2M token, hindari fragmentasi grep; periksa seluruh class dan dependency tree secara menyeluruh.
+3. **Pelacakan Antar Layanan**: Analisis kontrak upstream microservice, skema database, dan frontend consumer secara bersamaan dalam satu sesi.
+4. **Log Produksi Lengkap**: Masukkan ratusan ribu baris log untuk mengungkap anomali memori dan race condition intermiten.
+
+### 4. Multimodal Live API & Screen Grounding
+Integrasikan interaksi multimodal latensi rendah secara langsung:
+- **Streaming Dua Arah**: Streaming input suara dan terima respons audio/teks via WebSockets menggunakan Gemini Multimodal Live API.
+- **Screen & UI Grounding**: Tangkap frame layar dari browser subagent; Gemini memetakan perintah ke koordinat visual yang presisi di layar.
+- **Protokol Audit UI Visual**:
+  1. Ambil screenshot aplikasi yang sedang berjalan via `browser_subagent`.
+  2. Audit tata letak, tipografi, kontras, dan konsistensi terhadap pedoman HIG dan WCAG.
+  3. Bandingkan dengan referensi desain target menggunakan `generate_image`.
+  4. Lakukan penyesuaian presisi pada token CSS/Tailwind hingga tampilan mencapai pixel-perfect.
+
+### 5. Penelitian Mendalam & Search Grounding
+Search Grounding native Gemini menghubungkan agen langsung ke informasi web terkini:
+- Gunakan Grounding untuk rilis pustaka terbaru, breaking change dokumentasi, atau audit kerentanan CVE terbaru.
+- Sintesiskan temuan lengkap dengan sitasi sumber yang dapat diverifikasi.
+
+### 6. Eksekusi Tool Paralel
+Gemini secara native mendukung pemanggilan banyak function call dalam satu giliran (turn):
+- Baca dan modifikasi beberapa file independen sekaligus.
+- Jalankan pencarian web atau spawn subagent pekerja secara simultan guna meminimalkan total round-trip latency.

package/skills/geospatial-maps-expert/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: geospatial-maps-expert
+description: "Expert guide for maps and geospatial data (Mapbox GL JS, Leaflet, Google Maps, PostGIS) / Panduan ahli peta dan data geospasial (Mapbox GL JS, Leaflet, Google Maps, PostGIS)."
+author: "Roedy Rustam"
+---
+
+# Geospatial & Maps Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`database-orm-expert`**: PostGIS spatial queries and index optimization.
+- **`senior-frontend`**: React map component patterns.
+- **`mobile-expo-expert`**: React Native Maps integration.
+- **`performance-web-vitals`**: Map rendering performance optimization.
+
+### Description
+Expert guide for integrating maps and geospatial data into web and mobile applications. Covers Mapbox GL JS v3, Leaflet, Google Maps Platform, PostGIS spatial queries, GeoJSON data handling, clustering, routing/directions, geocoding, heatmaps, and location-based search.
+
+### Trigger Conditions
+- Adding interactive maps to web or mobile applications.
+- Implementing geolocation features (GPS tracking, geofencing).
+- Building location-based search or store locators.
+- Working with PostGIS spatial data or GeoJSON.
+
+---
+
+### Library Selection
+
+| Library | Rendering | 3D | Free Tier | Best For |
+|---------|-----------|-----|-----------|----------|
+| Mapbox GL JS v3 | WebGL | ✅ | 50K loads/mo | Premium maps, 3D |
+| Leaflet | DOM | ❌ | Unlimited (OSM) | Simple, lightweight |
+| Google Maps | WebGL | ✅ | $200/mo credit | Business, Street View |
+| deck.gl | WebGL | ✅ | Open-source | Large-scale data viz |
+
+```tsx
+// React + Mapbox GL JS
+import Map, { Marker, Popup, NavigationControl } from 'react-map-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+function StoreLocator({ stores }) {
+  return (
+    <Map
+      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
+      initialViewState={{ longitude: 106.8456, latitude: -6.2088, zoom: 12 }}
+      style={{ width: '100%', height: 500 }}
+      mapStyle="mapbox://styles/mapbox/dark-v11"
+    >
+      <NavigationControl position="top-right" />
+      {stores.map((store) => (
+        <Marker key={store.id} longitude={store.lng} latitude={store.lat}>
+          <div className="marker-pin" />
+        </Marker>
+      ))}
+    </Map>
+  );
+}
+```
+
+## Orchestration & Integration
+- `database-orm-expert`, `senior-frontend`, `mobile-expo-expert`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli mengintegrasikan peta dan data geospasial ke dalam aplikasi web dan mobile. Mencakup Mapbox GL JS, Leaflet, Google Maps Platform, PostGIS, dan GeoJSON.
+
+### Kondisi Pemicu
+- Menambahkan peta interaktif ke aplikasi web atau mobile.
+- Mengimplementasikan fitur geolokasi (pelacakan GPS, geofencing).
+- Membangun pencarian berbasis lokasi atau store locator.

package/skills/global-a11y-i18n-expert/SKILL.md

@@ -1,81 +1,87 @@
----
-name: global-a11y-i18n-expert
-description: "Expert guide for Web Accessibility (WCAG a11y) and Internationalization (i18n) / Panduan ahli untuk Aksesibilitas Web dan Internasionalisasi."
+---
+name: global-a11y-i18n-expert
+description: "Expert guide for Web Accessibility (WCAG a11y) and Internationalization (i18n) / Panduan ahli untuk Aksesibilitas Web dan Internasionalisasi."
 author: "Roedy Rustam"
----
-
-# Global Accessibility (a11y) & i18n Expert
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-This skill focuses on making enterprise web applications universally accessible and globally adaptable. It covers Web Content Accessibility Guidelines (WCAG) compliance and Internationalization (i18n) patterns for multi-language, multi-timezone software.
-
-### Trigger Conditions
-- Selling software to government, education, or large enterprise sectors (where WCAG AA compliance is legally required).
-- Implementing multi-language support (i18n).
-- Designing UIs that must support RTL (Right-to-Left) languages like Arabic or Hebrew.
-- Fixing "tab trap" or screen reader issues.
-- Handling complex timezone/date calculations across global users.
-
-### Core Architecture Guidelines
-
-#### 1. Web Accessibility (a11y)
-Do not treat accessibility as an afterthought. It is a core engineering requirement.
-- **Semantic HTML**: Always prefer native HTML elements (`<button>`, `<nav>`, `<dialog>`) over building custom ones with `<div>`. Native elements come with free accessibility baked in by the browser.
-- **ARIA Attributes**: If you must build custom UI, use WAI-ARIA roles (`role="tablist"`, `aria-expanded="true"`) to tell screen readers what the component is doing.
-- **Keyboard Navigation**: The entire app MUST be usable without a mouse. Ensure interactive elements are focusable (`tabindex="0"`) and visual focus outlines are distinct (do not use `outline: none` without providing an alternative styling).
-- **Color Contrast**: Ensure text has a minimum contrast ratio of 4.5:1 against its background (WCAG AA standard).
-
-#### 2. Internationalization (i18n)
-Handling multiple languages requires structural foresight.
-- **Locale Routing**: Use URL structures like `/en/pricing` or `/id/pricing`.
-- **String Externalization**: Never hardcode UI text. Use translation files (`en.json`, `id.json`) and a library like `next-intl` or `react-i18next`.
-- **RTL Support**: Use CSS logical properties (e.g., `margin-inline-start` instead of `margin-left`) so your UI automatically flips when rendering RTL languages.
-
-#### 3. Timezones and Dates
-Time is incredibly difficult to manage globally.
-- **Storage**: ALWAYS store dates in the database as UTC (`TIMESTAMPTZ` in PostgreSQL). Never store local time.
-- **Transport**: Send dates across APIs in ISO 8601 format (e.g., `2024-03-15T12:00:00Z`).
-- **Display**: Convert UTC to the user's local timezone only at the UI layer just before rendering (using native `Intl.DateTimeFormat` or libraries like `date-fns-tz`).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill ini berfokus pada pembuatan aplikasi web skala *enterprise* yang dapat diakses secara universal dan diadaptasi secara global. Panduan ini mencakup kepatuhan pedoman Aksesibilitas Web (WCAG) serta pola Internasionalisasi (i18n) untuk perangkat lunak multi-bahasa dan multi-zona-waktu.
-
-### Kondisi Pemicu
-- Menjual perangkat lunak ke sektor pemerintah, pendidikan, atau perusahaan besar (di mana kepatuhan WCAG AA diwajibkan secara hukum).
-- Menerapkan dukungan multi-bahasa (i18n).
-- Merancang UI yang harus mendukung bahasa yang dibaca dari Kanan ke Kiri (RTL) seperti Arab atau Ibrani.
-- Memperbaiki masalah navigasi *keyboard* (*tab trap*) atau dukungan *screen reader* (pembaca layar).
-- Menangani kalkulasi tanggal dan zona waktu yang kompleks untuk pengguna global.
-
-### Panduan Arsitektur Inti
-
-#### 1. Aksesibilitas Web (a11y)
-Jangan anggap aksesibilitas sebagai fitur tambahan. Ini adalah syarat mutlak *engineering*.
-- **HTML Semantik**: Selalu utamakan elemen HTML bawaan (`<button>`, `<nav>`, `<dialog>`) daripada membuat elemen kustom menggunakan `<div>`. Elemen bawaan sudah memiliki fitur aksesibilitas yang ditangani langsung oleh browser.
-- **Atribut ARIA**: Jika Anda terpaksa membuat komponen UI kustom, gunakan peran WAI-ARIA (`role="tablist"`, `aria-expanded="true"`) untuk memberi tahu *screen reader* apa fungsi komponen tersebut.
-- **Navigasi Keyboard**: Seluruh aplikasi HARUS bisa digunakan tanpa *mouse*. Pastikan elemen interaktif bisa difokuskan (`tabindex="0"`) dan garis tepi fokus (*focus ring*) terlihat jelas (jangan gunakan `outline: none` tanpa memberikan gaya alternatif).
-- **Kontras Warna**: Pastikan teks memiliki rasio kontras minimal 4.5:1 terhadap warna latar belakangnya (standar WCAG AA).
-
-#### 2. Internasionalisasi (i18n)
-Menangani berbagai bahasa memerlukan perencanaan struktural.
-- **Routing Lokal (Locale Routing)**: Gunakan struktur URL seperti `/en/pricing` atau `/id/pricing`.
-- **Eksternalisasi Teks**: Jangan pernah menulis teks UI langsung (*hardcode*) di dalam kode. Gunakan berkas terjemahan (`en.json`, `id.json`) dan pustaka seperti `next-intl` atau `react-i18next`.
-- **Dukungan RTL**: Gunakan properti logika CSS (*CSS logical properties*, mis. `margin-inline-start` alih-alih `margin-left`) agar tata letak UI Anda secara otomatis berbalik saat merender bahasa RTL.
-
-#### 3. Zona Waktu dan Tanggal
-Mengelola waktu secara global sangatlah rumit.
-- **Penyimpanan**: SELALU simpan tanggal di dalam database dalam format UTC (`TIMESTAMPTZ` pada PostgreSQL). Jangan pernah menyimpan waktu lokal komputer.
-- **Transportasi**: Kirimkan tanggal melalui API dalam format ISO 8601 (mis., `2024-03-15T12:00:00Z`).
-- **Tampilan UI**: Konversikan waktu UTC ke zona waktu lokal pengguna *hanya di lapisan UI* sesaat sebelum dirender (menggunakan `Intl.DateTimeFormat` bawaan browser atau pustaka seperti `date-fns-tz`).
+---
+
+# Global Accessibility (a11y) & i18n 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
+This skill focuses on making enterprise web applications universally accessible and globally adaptable. It covers Web Content Accessibility Guidelines (WCAG) compliance and Internationalization (i18n) patterns for multi-language, multi-timezone software.
+
+### Trigger Conditions
+- Selling software to government, education, or large enterprise sectors (where WCAG AA compliance is legally required).
+- Implementing multi-language support (i18n).
+- Designing UIs that must support RTL (Right-to-Left) languages like Arabic or Hebrew.
+- Fixing "tab trap" or screen reader issues.
+- Handling complex timezone/date calculations across global users.
+
+### Core Architecture Guidelines
+
+#### 1. Web Accessibility (a11y)
+Do not treat accessibility as an afterthought. It is a core engineering requirement.
+- **Semantic HTML**: Always prefer native HTML elements (`<button>`, `<nav>`, `<dialog>`) over building custom ones with `<div>`. Native elements come with free accessibility baked in by the browser.
+- **ARIA Attributes**: If you must build custom UI, use WAI-ARIA roles (`role="tablist"`, `aria-expanded="true"`) to tell screen readers what the component is doing.
+- **Keyboard Navigation**: The entire app MUST be usable without a mouse. Ensure interactive elements are focusable (`tabindex="0"`) and visual focus outlines are distinct (do not use `outline: none` without providing an alternative styling).
+- **Color Contrast**: Ensure text has a minimum contrast ratio of 4.5:1 against its background (WCAG AA standard).
+
+#### 2. Internationalization (i18n)
+Handling multiple languages requires structural foresight.
+- **Locale Routing**: Use URL structures like `/en/pricing` or `/id/pricing`.
+- **String Externalization**: Never hardcode UI text. Use translation files (`en.json`, `id.json`) and a library like `next-intl` or `react-i18next`.
+- **RTL Support**: Use CSS logical properties (e.g., `margin-inline-start` instead of `margin-left`) so your UI automatically flips when rendering RTL languages.
+
+#### 3. Timezones and Dates
+Time is incredibly difficult to manage globally.
+- **Storage**: ALWAYS store dates in the database as UTC (`TIMESTAMPTZ` in PostgreSQL). Never store local time.
+- **Transport**: Send dates across APIs in ISO 8601 format (e.g., `2024-03-15T12:00:00Z`).
+- **Display**: Convert UTC to the user's local timezone only at the UI layer just before rendering (using native `Intl.DateTimeFormat` or libraries like `date-fns-tz`).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Skill ini berfokus pada pembuatan aplikasi web skala *enterprise* yang dapat diakses secara universal dan diadaptasi secara global. Panduan ini mencakup kepatuhan pedoman Aksesibilitas Web (WCAG) serta pola Internasionalisasi (i18n) untuk perangkat lunak multi-bahasa dan multi-zona-waktu.
+
+### Kondisi Pemicu
+- Menjual perangkat lunak ke sektor pemerintah, pendidikan, atau perusahaan besar (di mana kepatuhan WCAG AA diwajibkan secara hukum).
+- Menerapkan dukungan multi-bahasa (i18n).
+- Merancang UI yang harus mendukung bahasa yang dibaca dari Kanan ke Kiri (RTL) seperti Arab atau Ibrani.
+- Memperbaiki masalah navigasi *keyboard* (*tab trap*) atau dukungan *screen reader* (pembaca layar).
+- Menangani kalkulasi tanggal dan zona waktu yang kompleks untuk pengguna global.
+
+### Panduan Arsitektur Inti
+
+#### 1. Aksesibilitas Web (a11y)
+Jangan anggap aksesibilitas sebagai fitur tambahan. Ini adalah syarat mutlak *engineering*.
+- **HTML Semantik**: Selalu utamakan elemen HTML bawaan (`<button>`, `<nav>`, `<dialog>`) daripada membuat elemen kustom menggunakan `<div>`. Elemen bawaan sudah memiliki fitur aksesibilitas yang ditangani langsung oleh browser.
+- **Atribut ARIA**: Jika Anda terpaksa membuat komponen UI kustom, gunakan peran WAI-ARIA (`role="tablist"`, `aria-expanded="true"`) untuk memberi tahu *screen reader* apa fungsi komponen tersebut.
+- **Navigasi Keyboard**: Seluruh aplikasi HARUS bisa digunakan tanpa *mouse*. Pastikan elemen interaktif bisa difokuskan (`tabindex="0"`) dan garis tepi fokus (*focus ring*) terlihat jelas (jangan gunakan `outline: none` tanpa memberikan gaya alternatif).
+- **Kontras Warna**: Pastikan teks memiliki rasio kontras minimal 4.5:1 terhadap warna latar belakangnya (standar WCAG AA).
+
+#### 2. Internasionalisasi (i18n)
+Menangani berbagai bahasa memerlukan perencanaan struktural.
+- **Routing Lokal (Locale Routing)**: Gunakan struktur URL seperti `/en/pricing` atau `/id/pricing`.
+- **Eksternalisasi Teks**: Jangan pernah menulis teks UI langsung (*hardcode*) di dalam kode. Gunakan berkas terjemahan (`en.json`, `id.json`) dan pustaka seperti `next-intl` atau `react-i18next`.
+- **Dukungan RTL**: Gunakan properti logika CSS (*CSS logical properties*, mis. `margin-inline-start` alih-alih `margin-left`) agar tata letak UI Anda secara otomatis berbalik saat merender bahasa RTL.
+
+#### 3. Zona Waktu dan Tanggal
+Mengelola waktu secara global sangatlah rumit.
+- **Penyimpanan**: SELALU simpan tanggal di dalam database dalam format UTC (`TIMESTAMPTZ` pada PostgreSQL). Jangan pernah menyimpan waktu lokal komputer.
+- **Transportasi**: Kirimkan tanggal melalui API dalam format ISO 8601 (mis., `2024-03-15T12:00:00Z`).
+- **Tampilan UI**: Konversikan waktu UTC ke zona waktu lokal pengguna *hanya di lapisan UI* sesaat sebelum dirender (menggunakan `Intl.DateTimeFormat` bawaan browser atau pustaka seperti `date-fns-tz`).