vibes-plug 1.0.0 → 2.5.0

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

@@ -1,135 +1,135 @@
----
-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."
-author: "Roedy Rustam"
----
-
-# Gemini Agent Booster (2026 Edition — Gemini 2.5 Pro/Flash)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### 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.
-
-### 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.
-
-### Gemini 2.5 Pro/Flash Capabilities (2026)
-
-| Capability | Gemini 2.5 Pro | Gemini 2.5 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.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### 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.
-
-### 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.
-
-### Kemampuan Gemini 2.5 Pro/Flash (2026)
-
-| Kemampuan | Gemini 2.5 Pro | Gemini 2.5 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.
+---
+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."
+author: "Roedy Rustam"
+---
+
+# Gemini Agent Booster (2026 Edition — Gemini 2.5 Pro/Flash)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### 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.
+
+### Gemini 2.5 Pro/Flash Capabilities (2026)
+
+| Capability | Gemini 2.5 Pro | Gemini 2.5 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 — Mandatory Extended Reasoning (o1-Style)
+For any complex problem, architecture decision, or large refactor, you MUST engage Gemini's extended thinking or generate a mandatory explicit reasoning chain (`<thought>`) before generating code:
+- 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 → engage deep reasoning chain → critique your own initial assumptions → validate the conclusion → execute tool calls.
+
+### 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.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### 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.
+
+### Kemampuan Gemini 2.5 Pro/Flash (2026)
+
+| Kemampuan | Gemini 2.5 Pro | Gemini 2.5 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 — Penalaran Mendalam (Mandatori)
+Untuk masalah kompleks (keputusan arsitektur, debugging race condition, alur kerja agentik), Anda **DIWAJIBKAN** untuk mengaktifkan mode pemikiran diperpanjang (*extended reasoning*) atau menuliskan rantai pemikiran (`<thought>`) secara eksplisit untuk mengevaluasi asumsi Anda sebelum menghasilkan kode solusi. Jangan bertindak impulsif.
+
+### 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.

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

@@ -1,81 +1,81 @@
----
-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`).
+---
+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`).

package/skills/glsl-shader-expert/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: glsl-shader-expert
+description: "Expert guide for writing custom GLSL shaders (Vertex/Fragment) for WebGL using Three.js and Babylon.js. Covers shader materials, post-processing, noise, and performance optimization."
+author: "Roedy Rustam"
+---
+
+# GLSL Shader Expert (WebGL 3D Graphics)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Production-grade guidance for writing and integrating custom GLSL (OpenGL Shading Language) shaders into web applications using **Three.js** (`ShaderMaterial` / `RawShaderMaterial`) or **Babylon.js** (`ShaderMaterial`). Focuses on creating advanced visual effects, custom lighting models, procedural textures (noise), and post-processing passes.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Asking to create custom materials that standard PBR materials cannot achieve.
+- Writing Vertex or Fragment shaders in GLSL.
+- Implementing procedural generation (e.g., Perlin noise, Simplex noise) on the GPU.
+- Creating post-processing effects or screen-space shaders.
+- Optimizing GPU performance by moving CPU calculations to vertex shaders.
+
+### Core Concepts
+
+#### 1. The Graphics Pipeline
+Understand the flow:
+1. **Vertex Shader:** Runs for every vertex. Used to manipulate geometry (position) and pass data (varyings) to the fragment shader. Must set `gl_Position`.
+2. **Fragment Shader:** Runs for every pixel (fragment). Used to determine color. Must set `gl_FragColor`.
+
+#### 2. Three.js `ShaderMaterial` Example
+```javascript
+import * as THREE from 'three';
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    // Standard projection
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  uniform float uTime;
+  varying vec2 vUv;
+  void main() {
+    // Simple animated color based on UV coordinates and time
+    vec3 color = vec3(vUv.x, vUv.y, sin(uTime) * 0.5 + 0.5);
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
+
+const material = new THREE.ShaderMaterial({
+  vertexShader,
+  fragmentShader,
+  uniforms: {
+    uTime: { value: 0 }
+  }
+});
+```
+*Note: In the render loop, you must update `material.uniforms.uTime.value += delta;`*
+
+#### 3. Best Practices for Shaders
+- **Avoid Branching:** GPU threads run in lockstep (warps/wavefronts). `if/else` statements can cause significant performance drops. Prefer mathematical functions like `step()`, `smoothstep()`, `mix()`, and `clamp()`.
+- **Precision:** Explicitly declare float precision (`precision mediump float;` or `highp` if necessary). Use `mediump` for colors/UVs to save performance, particularly on mobile.
+- **Use Uniforms Wisely:** Only pass data that changes per frame or per object as uniforms.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `web-3d-graphics-expert` — For setting up the core WebGL scene in Three.js/Babylon.js.
+- `web-game-engine-expert` — For linking shader uniforms with physics data (e.g., impact ripples).
+- `ui-ux-pro-max` — For ensuring shader visual effects match the modern Web design tokens.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "3D & Graphics" or "UI/UX & Design Systems".
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend / WebGL Implementation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk menulis dan mengintegrasikan shader GLSL khusus ke dalam aplikasi web menggunakan **Three.js** atau **Babylon.js**. Mencakup pembuatan *Vertex Shader*, *Fragment Shader*, efek visual prosedural, dan optimasi GPU.
+
+### Kondisi Pemicu
+- Saat pengguna ingin membuat efek visual kustom (seperti air, hologram, distorsi) yang tidak bisa dilakukan oleh material standar.
+- Menulis kode GLSL untuk *ShaderMaterial*.
+- Mengoptimalkan performa grafis dengan memindahkan komputasi CPU ke GPU.
+
+### Panduan Singkat
+- **Vertex vs Fragment:** *Vertex shader* mengatur posisi dan memanipulasi geometri (`gl_Position`), sedangkan *Fragment shader* mengatur pewarnaan setiap pixel (`gl_FragColor`).
+- **Hindari If/Else:** CPU sangat cepat dalam percabangan (`if/else`), tetapi GPU sangat lambat. Gunakan fungsi interpolasi matematika bawaan GLSL seperti `step()`, `smoothstep()`, dan `mix()`.
+- **Gunakan Uniforms:** Gunakan `uniforms` untuk mengirim data dari JavaScript (seperti waktu, posisi mouse, atau tekstur) ke dalam shader. Update nilai uniform ini di dalam *render loop*.
+- **Presisi (Precision):** Gunakan `precision mediump float;` secara default untuk menyeimbangkan performa dan kualitas visual, terutama untuk optimalisasi *mobile*.