vibes-plug 1.0.0 → 2.5.0

package/skills/vibe-code-gardener/SKILL.md

@@ -1,173 +1,181 @@
----
-name: vibe-code-gardener
-description: "Purger of AI slop, code bloat, context drift, and architectural decay in vibe-coded projects / Pembersih AI slop, kode membengkak, konteks drift, dan pembusukan arsitektur pada proyek vibe coding."
-author: "Roedy Rustam"
----
-
-# Vibe Code Gardener (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Detects and purges AI-generated code quality issues — AI slop, code bloat, context drift, duplicated logic, dead code, misaligned patterns, and architectural decay in projects that have been heavily vibe-coded.
-
-### Trigger Conditions
-- Codebase has grown out of control after many AI-assisted coding sessions.
-- Duplication, inconsistent patterns, or unexplained abstractions detected.
-- Features are getting harder to add or understand.
-- Tests are brittle or missing entirely.
-- The codebase has "AI smell" — overly verbose comments, unnecessary defensive code, duplicate utilities.
-
-### AI Slop Detection Heuristics (2026)
-
-These are the most common AI-generated code quality issues to look for:
-
-#### 1. The "Just In Case" Over-Engineering
-AI models often add features or abstractions "for extensibility" that are never needed:
-```typescript
-// 🔴 AI SLOP: Factory pattern for something that will never change
-const createUserRepository = (type: 'postgres' | 'mysql' | 'sqlite') => {
-  if (type === 'postgres') return new PostgresUserRepo();
-  // ...never switches in practice
-};
-
-// ✅ CLEAN: Just use the implementation
-const userRepo = new PostgresUserRepo();
-```
-
-#### 2. The "Belt and Suspenders" Duplicate Guards
-AI adds null checks and validations at every layer unnecessarily:
-```typescript
-// 🔴 AI SLOP: Triple-validated (already validated by Zod + DB schema + here)
-if (!user || !user.id || user.id === undefined || user.id === null || typeof user.id !== 'string') { ... }
-
-// ✅ CLEAN: Trust your types
-if (!user.id) { ... }
-```
-
-#### 3. The "Graveyard of Dead Utilities"
-AI-generated helper files with functions that are defined but never used:
-- Search for exported functions with 0 usages: `grep -r "export function" --include="*.ts" | while read...`
-- Remove entire files of dead utilities.
-
-#### 4. Context Drift — Style Inconsistency
-Different sessions produce different coding styles in the same codebase:
-- Some files use `async/await`, others use `.then()` chains.
-- Some use `const` arrow functions, others use `function` declarations.
-- Mixed naming: `userId`, `user_id`, `UserID` in the same project.
-- **Fix**: Run a style unification pass with Prettier + ESLint rules.
-
-#### 5. Comment Pollution
-AI loves to narrate obvious code:
-```typescript
-// 🔴 AI SLOP: Stating the obvious
-// Get the user from the database
-const user = await db.user.findUnique({ where: { id } });
-// Return the user
-return user;
-
-// ✅ CLEAN: No comment needed — code is self-explanatory
-const user = await db.user.findUnique({ where: { id } });
-return user;
-```
-
-#### 6. The Bloated Component
-AI tends to put too much in one component across sessions:
-- Component renders conditionally across 5+ different states.
-- Component has 10+ props.
-- Component imports from 20+ different modules.
-- **Fix**: Apply Single Responsibility — split into sub-components.
-
-#### 7. Dependency Creep
-Each AI session may install new packages for tasks already solvable with existing deps:
-```bash
-# Audit dependencies — find packages doing the same thing
-npx depcheck  # Unused dependencies
-npx bundle-phobia-cli # Bundle size of each dep
-```
-
-### Gardening Protocol
-
-#### Phase 1: Discovery (Read Only)
-1. Map the full file tree.
-2. Identify largest files (likely bloated).
-3. Find duplicated logic with semantic search.
-4. Find unused exports and dead code.
-5. Identify inconsistent patterns across files.
-
-#### Phase 2: Triage
-Categorize issues:
-- **Critical**: Bugs, security holes, data loss risks.
-- **High**: Duplicate business logic that will diverge.
-- **Medium**: Code smells that slow development.
-- **Low**: Style inconsistencies, over-verbose comments.
-
-#### Phase 3: Systematic Refactoring
-Work file by file, smallest changes first:
-1. Remove dead code and unused imports.
-2. Extract duplicated logic into shared utilities.
-3. Simplify over-engineered abstractions.
-4. Standardize naming conventions.
-5. Add missing tests for business-critical paths.
-
-#### Phase 4: Prevention
-- Add ESLint rules to catch common AI slop patterns.
-- Add `depcheck` to CI to catch unused dependencies.
-- Add architecture tests (e.g., `arch-unit`) to enforce layer boundaries.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Mendeteksi dan membersihkan masalah kualitas kode yang dihasilkan AI — AI slop, kode yang membengkak, context drift, logika yang terduplikasi, kode mati, pola yang tidak konsisten, dan pembusukan arsitektur pada proyek yang banyak menggunakan vibe coding.
-
-### Kondisi Pemicu
-- Codebase telah tumbuh tidak terkendali setelah banyak sesi coding berbantuan AI.
-- Duplikasi, pola tidak konsisten, atau abstraksi yang tidak dapat dijelaskan terdeteksi.
-- Fitur semakin sulit ditambahkan atau dipahami.
-- Test rapuh atau tidak ada sama sekali.
-- Codebase memiliki "AI smell" — komentar yang terlalu verbose, kode defensif yang tidak perlu, utilitas yang diduplikasi.
-
-### Heuristik Deteksi AI Slop (2026)
-
-#### 1. Over-Engineering "Untuk Jaga-Jaga"
-Model AI sering menambahkan fitur atau abstraksi "untuk ekstensibilitas" yang tidak pernah dibutuhkan. Hapus factory pattern, strategy pattern, atau abstraksi lain yang tidak memiliki lebih dari satu implementasi.
-
-#### 2. "Belt and Suspenders" — Validasi Ganda Berlebihan
-AI menambahkan null check dan validasi di setiap layer yang sebenarnya sudah divalidasi oleh Zod, TypeScript, atau skema DB. Percayai tipe Anda.
-
-#### 3. "Kuburan Utilitas Mati"
-File helper yang dihasilkan AI dengan fungsi yang tidak pernah digunakan. Cari dan hapus ekspor dengan 0 penggunaan.
-
-#### 4. Context Drift — Inkonsistensi Gaya
-Sesi yang berbeda menghasilkan gaya koding yang berbeda: sebagian menggunakan `async/await`, yang lain menggunakan `.then()`; penamaan campuran `userId`, `user_id`, `UserID`. Perbaiki dengan satu pass Prettier + aturan ESLint.
-
-#### 5. Polusi Komentar
-AI suka mengomentari kode yang sudah jelas sendiri. Hapus komentar yang hanya mengulang apa yang sudah tertulis dalam kode.
-
-#### 6. Komponen yang Membengkak
-Komponen dengan terlalu banyak kondisi rendering, prop, atau impor. Terapkan Single Responsibility — pecah menjadi sub-komponen.
-
-#### 7. Creep Dependensi
-Setiap sesi AI mungkin menginstal paket baru untuk tugas yang sudah bisa diselesaikan dengan dependensi yang ada. Audit dengan `depcheck` dan `bundle-phobia-cli`.
-
-### Protokol Berkebun
-
-#### Fase 1: Penemuan (Hanya Baca)
-Peta pohon file lengkap, identifikasi file terbesar, temukan logika yang terduplikasi, temukan ekspor yang tidak digunakan.
-
-#### Fase 2: Triase
-Kategorikan masalah: Kritis, Tinggi, Sedang, Rendah.
-
-#### Fase 3: Refactoring Sistematis
-Kerja file per file, perubahan terkecil dulu: hapus kode mati, ekstrak logika duplikat, sederhanakan abstraksi berlebih, standarisasi penamaan, tambahkan test yang hilang.
-
-#### Fase 4: Pencegahan
-Tambahkan aturan ESLint, `depcheck` di CI, dan architecture test untuk menjaga codebase tetap bersih.
+---
+name: vibe-code-gardener
+description: "Purger of AI slop, code bloat, context drift, and architectural decay in vibe-coded projects / Pembersih AI slop, kode membengkak, konteks drift, dan pembusukan arsitektur pada proyek vibe coding."
+author: vibes-plug-swarm
+---
+
+# Vibe Code Gardener (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Detects and purges AI-generated code quality issues — AI slop, code bloat, context drift, duplicated logic, dead code, misaligned patterns, and architectural decay in projects that have been heavily vibe-coded.
+
+### Trigger Conditions
+- Codebase has grown out of control after many AI-assisted coding sessions.
+- Duplication, inconsistent patterns, or unexplained abstractions detected.
+- Features are getting harder to add or understand.
+- Tests are brittle or missing entirely.
+- The codebase has "AI smell" — overly verbose comments, unnecessary defensive code, duplicate utilities.
+
+### AI Slop Detection Heuristics (2026)
+
+These are the most common AI-generated code quality issues to look for:
+
+#### 1. The "Just In Case" Over-Engineering
+AI models often add features or abstractions "for extensibility" that are never needed:
+```typescript
+// 🔴 AI SLOP: Factory pattern for something that will never change
+const createUserRepository = (type: 'postgres' | 'mysql' | 'sqlite') => {
+  if (type === 'postgres') return new PostgresUserRepo();
+  // ...never switches in practice
+};
+
+// ✅ CLEAN: Just use the implementation
+const userRepo = new PostgresUserRepo();
+```
+
+#### 2. The "Belt and Suspenders" Duplicate Guards
+AI adds null checks and validations at every layer unnecessarily:
+```typescript
+// 🔴 AI SLOP: Triple-validated (already validated by Zod + DB schema + here)
+if (!user || !user.id || user.id === undefined || user.id === null || typeof user.id !== 'string') { ... }
+
+// ✅ CLEAN: Trust your types
+if (!user.id) { ... }
+```
+
+#### 3. The "Graveyard of Dead Utilities"
+AI-generated helper files with functions that are defined but never used:
+- Search for exported functions with 0 usages: `grep -r "export function" --include="*.ts" | while read...`
+- Remove entire files of dead utilities.
+
+#### 4. Context Drift — Style Inconsistency
+Different sessions produce different coding styles in the same codebase:
+- Some files use `async/await`, others use `.then()` chains.
+- Some use `const` arrow functions, others use `function` declarations.
+- Mixed naming: `userId`, `user_id`, `UserID` in the same project.
+- **Fix**: Run a style unification pass with Prettier + ESLint rules.
+
+#### 5. Comment Pollution
+AI loves to narrate obvious code:
+```typescript
+// 🔴 AI SLOP: Stating the obvious
+// Get the user from the database
+const user = await db.user.findUnique({ where: { id } });
+// Return the user
+return user;
+
+// ✅ CLEAN: No comment needed — code is self-explanatory
+const user = await db.user.findUnique({ where: { id } });
+return user;
+```
+
+#### 6. The Bloated Component
+AI tends to put too much in one component across sessions:
+- Component renders conditionally across 5+ different states.
+- Component has 10+ props.
+- Component imports from 20+ different modules.
+- **Fix**: Apply Single Responsibility — split into sub-components.
+
+#### 7. Dependency Creep
+Each AI session may install new packages for tasks already solvable with existing deps:
+```bash
+# Audit dependencies — find packages doing the same thing
+npx depcheck  # Unused dependencies
+npx bundle-phobia-cli # Bundle size of each dep
+```
+
+### Gardening Protocol
+
+#### Phase 1: Discovery (Read Only)
+1. Map the full file tree.
+2. Identify largest files (likely bloated).
+3. Find duplicated logic with semantic search.
+4. Find unused exports and dead code.
+5. Identify inconsistent patterns across files.
+
+#### Phase 2: Triage
+Categorize issues:
+- **Critical**: Bugs, security holes, data loss risks.
+- **High**: Duplicate business logic that will diverge.
+- **Medium**: Code smells that slow development.
+- **Low**: Style inconsistencies, over-verbose comments.
+
+#### Phase 3: Systematic Refactoring
+Work file by file, smallest changes first:
+1. Remove dead code and unused imports.
+2. Extract duplicated logic into shared utilities.
+3. Simplify over-engineered abstractions.
+4. Standardize naming conventions.
+5. Add missing tests for business-critical paths.
+
+#### Phase 4: Prevention
+- Add ESLint rules to catch common AI slop patterns.
+- Add `depcheck` to CI to catch unused dependencies.
+- Add architecture tests (e.g., `arch-unit`) to enforce layer boundaries.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Mendeteksi dan membersihkan masalah kualitas kode yang dihasilkan AI — AI slop, kode yang membengkak, context drift, logika yang terduplikasi, kode mati, pola yang tidak konsisten, dan pembusukan arsitektur pada proyek yang banyak menggunakan vibe coding.
+
+### Kondisi Pemicu
+- Codebase telah tumbuh tidak terkendali setelah banyak sesi coding berbantuan AI.
+- Duplikasi, pola tidak konsisten, atau abstraksi yang tidak dapat dijelaskan terdeteksi.
+- Fitur semakin sulit ditambahkan atau dipahami.
+- Test rapuh atau tidak ada sama sekali.
+- Codebase memiliki "AI smell" — komentar yang terlalu verbose, kode defensif yang tidak perlu, utilitas yang diduplikasi.
+
+### Heuristik Deteksi AI Slop (2026)
+
+#### 1. Over-Engineering "Untuk Jaga-Jaga"
+Model AI sering menambahkan fitur atau abstraksi "untuk ekstensibilitas" yang tidak pernah dibutuhkan. Hapus factory pattern, strategy pattern, atau abstraksi lain yang tidak memiliki lebih dari satu implementasi.
+
+#### 2. "Belt and Suspenders" — Validasi Ganda Berlebihan
+AI menambahkan null check dan validasi di setiap layer yang sebenarnya sudah divalidasi oleh Zod, TypeScript, atau skema DB. Percayai tipe Anda.
+
+#### 3. "Kuburan Utilitas Mati"
+File helper yang dihasilkan AI dengan fungsi yang tidak pernah digunakan. Cari dan hapus ekspor dengan 0 penggunaan.
+
+#### 4. Context Drift — Inkonsistensi Gaya
+Sesi yang berbeda menghasilkan gaya koding yang berbeda: sebagian menggunakan `async/await`, yang lain menggunakan `.then()`; penamaan campuran `userId`, `user_id`, `UserID`. Perbaiki dengan satu pass Prettier + aturan ESLint.
+
+#### 5. Polusi Komentar
+AI suka mengomentari kode yang sudah jelas sendiri. Hapus komentar yang hanya mengulang apa yang sudah tertulis dalam kode.
+
+#### 6. Komponen yang Membengkak
+Komponen dengan terlalu banyak kondisi rendering, prop, atau impor. Terapkan Single Responsibility — pecah menjadi sub-komponen.
+
+#### 7. Creep Dependensi
+Setiap sesi AI mungkin menginstal paket baru untuk tugas yang sudah bisa diselesaikan dengan dependensi yang ada. Audit dengan `depcheck` dan `bundle-phobia-cli`.
+
+### Protokol Berkebun
+
+#### Fase 1: Penemuan (Hanya Baca)
+Peta pohon file lengkap, identifikasi file terbesar, temukan logika yang terduplikasi, temukan ekspor yang tidak digunakan.
+
+#### Fase 2: Triase
+Kategorikan masalah: Kritis, Tinggi, Sedang, Rendah.
+
+#### Fase 3: Refactoring Sistematis
+Kerja file per file, perubahan terkecil dulu: hapus kode mati, ekstrak logika duplikat, sederhanakan abstraksi berlebih, standarisasi penamaan, tambahkan test yang hilang.
+
+#### Fase 4: Pencegahan
+Tambahkan aturan ESLint, `depcheck` di CI, dan architecture test untuk menjaga codebase tetap bersih.
+
+---
+
+## Orchestration & Integration
+- Integrates with `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, and `dependency-upgrade-migrator`.
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan `zero-to-prod-orchestrator`, `brainstorming`, `coderabbit`, dan `dependency-upgrade-migrator`.

package/skills/visual-qa-vision-agent/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: visual-qa-vision-agent
+description: "Equips the AI agent with visual QA capabilities using Playwright/Puppeteer and the agent's innate Vision capabilities to self-correct UI layout, CSS alignment, and visual regressions."
+author: "Roedy Rustam"
+---
+
+# Visual QA & Vision Agent
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill transforms the agent from a blind code generator into a visual designer. Instead of hoping the CSS looks correct, the agent is instructed to write a script that takes a screenshot of the newly created component, analyzes the screenshot using its own Vision AI capabilities, and iteratively tweaks the CSS until it matches the design intent perfectly.
+
+### Trigger Conditions
+Activate this skill when the user says:
+- "Fix the CSS, the button is misaligned."
+- "Make it look exactly like this mockup."
+- "Ensure the UI is responsive on mobile screens."
+
+### Core Concepts
+
+#### 1. The Visual QA Loop
+1. **Code:** The agent writes the HTML/CSS/React component.
+2. **Serve:** The agent starts a local dev server in the background.
+3. **Capture:** The agent runs a quick Playwright/Puppeteer script to take screenshots at various viewports (Mobile, Tablet, Desktop).
+4. **Analyze:** The agent receives the screenshot (via the `view_file` tool on the image) and analyzes the visual hierarchy, contrast, and alignment.
+5. **Correct:** The agent fixes margin, padding, or flexbox issues based on what it *saw*, not just what the code says.
+
+#### 2. Agent Constraints (Mandatory Visual Verification)
+- **NO BLIND CSS GUESSING**: You are strictly prohibited from finalizing a frontend component without verifying it visually first. You MUST use a `browser_subagent` to capture a screenshot of your work.
+- **Pixel-Perfect Validation**: Compare the screenshot against the initial design spec or generic UI/UX best practices. Iterate on the CSS until the visual output is flawless.
+- Always check contrast ratios visually if design tokens are overridden.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+- `browser-automation-expert` — Provides the Playwright code needed to capture the screenshots.
+- `tailwind-expert` — Provides the CSS utility classes used to fix the alignment issues discovered by Vision.
+- `ui-components-expert` — Defines the correct visual standards (spacing, sizing) the agent should look for.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "UI/UX & Design Systems".
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend / UI Validation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini memanfaatkan kemampuan *Vision* (penglihatan) bawaan AI untuk melakukan *Quality Assurance* (QA) visual. Agen tidak lagi sekadar menebak CSS secara buta, melainkan mengambil *screenshot* dari halaman yang dibuatnya, melihat hasilnya, dan mengkoreksi *margin/padding* secara mandiri.
+
+### Kondisi Pemicu
+- Saat pengguna meminta untuk merapikan UI yang berantakan.
+- Saat melakukan *cloning* desain dari gambar *mockup*.
+
+### Panduan Singkat
+- **Gunakan Mata Anda (Wajib Verifikasi Visual):** Anda dilarang keras memfinalisasi atau menyelesaikan tugas frontend tanpa melihat hasilnya terlebih dahulu. Anda WAJIB mengambil *screenshot*, melihatnya menggunakan tool `view_file`, dan memverifikasi layout secara visual (*pixel-perfect*).
+- **Siklus Visual:** Tulis Kode ➔ Ambil Screenshot ➔ Analisis dengan *Vision* ➔ Perbaiki Tailwind/CSS ➔ Selesai.
+- **Jangan Menebak:** Terkadang `justify-center` tidak berfungsi karena ada pembungkus (*wrapper*) absolut. Jangan menebak-nebak di dalam kode; lihat hasil akhirnya secara visual!

package/skills/vue-frontend-expert/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: vue-frontend-expert
+description: "Expert guide for Vue 3 (Composition API), Nuxt 3, and Pinia. Covers advanced reactive state management, `<script setup>` syntax, Vue Router, VueUse, and SPA/SSR architectural patterns in English and Indonesian."
+author: "Roedy Rustam"
+---
+
+# Vue Frontend Expert (Vue 3 / Nuxt 3)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Production-grade guidance for building highly reactive and scalable frontend applications using **Vue 3 (Composition API)** and **Nuxt 3**. Covers the latest ecosystem tools including **Pinia** for state management, **VueUse** for composables, and **Tailwind CSS v4** integration.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Scaffolding a new Vue 3 or Nuxt 3 project.
+- Writing or refactoring Vue components using `<script setup>` and Composition API.
+- Managing global state with Pinia.
+- Handling client-side routing with Vue Router or Nuxt's file-based routing.
+- Implementing SSR (Server-Side Rendering) or SSG (Static Site Generation) using Nuxt 3.
+
+---
+
+### Core Concepts
+
+#### 1. Vue 3 Composition API & `<script setup>`
+Use the `<script setup>` syntax by default. It provides better type inference, less boilerplate, and superior performance compared to the Options API.
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const count = ref(0)
+const doubleCount = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+
+onMounted(() => {
+  console.log('Component is mounted!')
+})
+</script>
+
+<template>
+  <button @click="increment">Count is: {{ count }} (Double: {{ doubleCount }})</button>
+</template>
+```
+
+#### 2. Global State Management (Pinia)
+Pinia is the official state management library for Vue. Avoid Vuex in modern applications.
+
+```typescript
+// stores/counter.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+```
+
+#### 3. Nuxt 3 Architecture
+For SSR, SEO optimization, and file-based routing, use Nuxt 3.
+- Data fetching: Use `useAsyncData` or `useFetch` to prevent hydration mismatches.
+- Server API: Utilize the `server/api/` directory for Nitro API routes.
+
+#### 4. The VueUse Collection
+Always leverage [VueUse](https://vueuse.org/) for common composables (e.g., `useWindowSize`, `onClickOutside`, `useStorage`) instead of writing custom composables from scratch.
+
+---
+
+### Best Practices
+1. **Ref vs Reactive:** Prefer `ref` for primitive values and `reactive` for deeply nested objects. When in doubt, default to `ref`.
+2. **Define Macros:** Use `defineProps` and `defineEmits` in `<script setup>` for typed props and events.
+3. **Avoid Watchers when possible:** Rely on `computed` properties instead of `watch` to derive state. Use `watch` only for side-effects (e.g., API calls, DOM manipulation).
+4. **V-Model:** Use the updated `v-model` binding in Vue 3.4+ with `defineModel()` for cleaner two-way data binding between components.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+This skill works best when combined with:
+- `design-system-architect` — To build headless UI components using Radix Vue or VueUse components.
+- `tailwind-expert` — For styling Vue/Nuxt components with Tailwind CSS v4.
+- `performance-web-vitals` — To optimize Nuxt 3 SSR metrics (LCP, INP).
+
+### Referenced By Orchestrators (MANDATORY)
+
+This skill should be referenced by the following orchestrators:
+- `brainstorming` — Add to "Frontend Frameworks" row in the Matrix.
+- `zero-to-prod-orchestrator` — Phase 5 (Frontend Implementation).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan tingkat produksi untuk membangun aplikasi frontend reaktif dan terukur menggunakan **Vue 3 (Composition API)** dan **Nuxt 3**. Mencakup pengelolaan state dengan **Pinia**, utilitas **VueUse**, dan integrasi **Tailwind CSS v4**.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna sedang:
+- Memulai proyek Vue 3 atau Nuxt 3 baru.
+- Menulis ulang (refactoring) komponen ke `<script setup>` dan Composition API.
+- Mengelola state global dengan Pinia (bukan Vuex).
+- Menerapkan SSR (Server-Side Rendering) dengan Nuxt 3.
+
+### Panduan Singkat
+
+- **Composition API Default:** Selalu gunakan sintaks `<script setup lang="ts">`. Lebih ringkas, type-safe, dan efisien.
+- **Pinia:** Gunakan Pinia dengan pola *Setup Store* (mirip Composition API) alih-alih pola Options (state, getters, actions).
+- **Nuxt 3 Fetching:** Gunakan `useFetch` atau `useAsyncData` di dalam komponen Nuxt untuk pengambilan data saat SSR, bukan `onMounted` dengan `fetch` biasa.
+- **Reaktivitas:** Gunakan `ref` untuk nilai primitif (string, number) dan `reactive` untuk objek bersarang yang kompleks. Utamakan `computed` daripada `watch` untuk state turunan.
+- **VueUse:** Jangan menulis fungsi utilitas dari nol jika sudah ada di *library* VueUse (contoh: `useIntersectionObserver`, `useLocalStorage`).