vibes-plug 1.0.0

package/skills/auto-doc-updater/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: auto-doc-updater
+description: "Automatically documents every feature change or bug fix successfully built into CHANGELOG.md and BLUEPRINT.md / Otomatis mendokumentasikan setiap perubahan fitur atau perbaikan bug yang berhasil di-build ke CHANGELOG.md dan BLUEPRINT.md."
+author: "Roedy Rustam"
+---
+
+# Auto Documentation Updater (2026 — ADR Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Automatically maintains project documentation after every successful build or feature implementation. Updates `CHANGELOG.md`, `BLUEPRINT.md`, and introduces **Architecture Decision Records (ADRs)** — immutable records of key architectural decisions made throughout the project lifecycle.
+
+### Trigger Conditions
+- A feature, bug fix, or refactor has been successfully implemented and verified.
+- The user asks to "update docs", "document this", or "save progress".
+- After completing a phase in `zero-to-prod-orchestrator`.
+- A significant architectural decision was made (DB choice, auth flow, API design).
+
+### Files Maintained
+
+| File | Purpose | Update Frequency |
+|---|---|---|
+| `CHANGELOG.md` | User-facing list of changes | Every PR / feature |
+| `BLUEPRINT.md` | Technical architecture overview | Major structural changes |
+| `PROGRESS.md` | Development roadmap and status | Each work session |
+| `docs/adr/` | Architecture Decision Records | Each key decision |
+
+### CHANGELOG.md Format (Keep-a-Changelog Standard)
+```markdown
+# Changelog
+All notable changes to this project will be documented in this file.
+Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+### Added
+- New feature or capability
+
+## [1.2.0] — 2026-07-29
+### Added
+- Super Admin dashboard on `admin.domain.com` with tenant management
+- Polar.sh billing integration as alternative to Stripe
+- `spa-orchestrator` skill for SPA architecture decisions
+
+### Changed
+- Upgraded React to 19.x with new Compiler (removes need for useMemo/useCallback)
+- Migrated from `tailwind.config.js` to CSS-first `@theme` configuration (Tailwind v4)
+
+### Fixed
+- N+1 query issue in workspace members list endpoint
+- Memory leak in WebSocket connection cleanup
+
+### Security
+- Upgraded Supabase client to Auth v3 with PKCE flow (replaces implicit flow)
+- Service role key moved out of client-side code
+
+## [1.1.0] — 2026-06-15
+### Added
+...
+```
+
+### BLUEPRINT.md Structure
+```markdown
+# [Project Name] — Technical Blueprint
+
+## Architecture Overview
+[High-level diagram or description]
+
+## Tech Stack
+| Layer | Technology | Version |
+|---|---|---|
+| Frontend | Next.js | 15.x |
+| Backend | Hono | latest |
+| Database | PostgreSQL + Drizzle | — |
+| Auth | Supabase Auth | v3 |
+
+## Entry Points
+| URL | Purpose |
+|---|---|
+| `domain.com` | Marketing/Landing |
+| `app.domain.com` | SaaS App |
+| `admin.domain.com` | Super Admin |
+
+## Database Schema (Summary)
+[Key tables and relationships]
+
+## API Endpoints (Summary)
+[Key routes and their purposes]
+
+## Environment Variables Required
+[List of all required env vars]
+```
+
+### Architecture Decision Records (ADRs)
+
+ADRs are **immutable records** of significant architectural decisions. Once created, they are never deleted — only superseded by a new ADR. This creates a historical audit trail of *why* the system is built the way it is.
+
+#### ADR Template (`docs/adr/ADR-NNN-title.md`)
+```markdown
+# ADR-001: Use Supabase for Authentication and Database
+
+**Status**: Accepted
+**Date**: 2026-07-29
+**Deciders**: [Team/Individual]
+
+## Context
+[What is the situation that motivated this decision? What forces are at play?]
+
+We need a database + authentication solution for our SaaS MVP that can be
+delivered quickly without managing infrastructure.
+
+## Decision
+We will use Supabase as our primary backend-as-a-service, providing:
+- PostgreSQL database with Row Level Security (RLS)
+- Auth v3 with PKCE flow (OAuth, magic links, MFA)
+- Realtime subscriptions
+- Storage for user-uploaded files
+
+## Rationale
+- Faster time-to-market than self-hosted Postgres + separate auth service
+- Built-in RLS for multi-tenant isolation without custom middleware
+- Open-source — can self-host later if needed
+- Strong TypeScript SDK with auto-generated types
+
+## Consequences
+**Positive:**
+- No auth infrastructure to manage
+- RLS enforced at DB level — defense in depth
+
+**Negative:**
+- Vendor dependency — migration would require significant refactor
+- RLS requires careful testing to avoid data leakage bugs
+
+## Superseded By
+[ADR-XXX: Migrated to self-hosted Supabase] (if applicable)
+```
+
+#### ADR Index (`docs/adr/README.md`)
+```markdown
+# Architecture Decision Records
+
+| # | Title | Status | Date |
+|---|---|---|---|
+| [ADR-001](./ADR-001-supabase-auth.md) | Use Supabase for Auth + DB | ✅ Accepted | 2026-07-29 |
+| [ADR-002](./ADR-002-polar-billing.md) | Use Polar.sh for billing | ✅ Accepted | 2026-07-29 |
+| [ADR-003](./ADR-003-rls-isolation.md) | Shared Schema + RLS for multi-tenancy | ✅ Accepted | 2026-08-01 |
+| [ADR-004](./ADR-004-ssr-vs-spa.md) | Next.js SSR for main app, SPA for admin | 🔄 Proposed | 2026-08-05 |
+```
+
+### Update Protocol
+After every successful feature implementation:
+1. **CHANGELOG.md**: Add entry under `[Unreleased]` with correct category (Added/Changed/Fixed/Security).
+2. **BLUEPRINT.md**: Update only if schema, stack, or entry points changed.
+3. **PROGRESS.md**: Mark completed tasks `[x]`, update next steps.
+4. **ADR**: Create a new ADR if a significant architectural decision was made (DB choice, auth flow, billing provider, deployment strategy, isolation strategy).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Secara otomatis memelihara dokumentasi proyek setelah setiap build atau implementasi fitur yang berhasil. Memperbarui `CHANGELOG.md`, `BLUEPRINT.md`, dan memperkenalkan **Architecture Decision Records (ADR)** — catatan permanen dari keputusan arsitektur kunci yang dibuat sepanjang siklus hidup proyek.
+
+### Kondisi Pemicu
+- Sebuah fitur, perbaikan bug, atau refactor berhasil diimplementasikan dan diverifikasi.
+- Pengguna meminta "perbarui docs", "dokumentasikan ini", atau "simpan progres".
+- Setelah menyelesaikan fase dalam `zero-to-prod-orchestrator`.
+- Keputusan arsitektur signifikan dibuat (pilihan DB, alur auth, desain API).
+
+### File yang Dipelihara
+
+| File | Tujuan | Frekuensi Pembaruan |
+|---|---|---|
+| `CHANGELOG.md` | Daftar perubahan untuk pengguna | Setiap PR / fitur |
+| `BLUEPRINT.md` | Gambaran arsitektur teknis | Perubahan struktural besar |
+| `PROGRESS.md` | Roadmap dan status pengembangan | Setiap sesi kerja |
+| `docs/adr/` | Architecture Decision Records | Setiap keputusan kunci |
+
+### Format CHANGELOG.md (Standar Keep-a-Changelog)
+Gunakan kategori: `Added`, `Changed`, `Fixed`, `Removed`, `Security`. Simpan versi yang belum dirilis di bagian `[Unreleased]` dan turunkan ke versi bernama saat rilis.
+
+### Struktur BLUEPRINT.md
+Ringkasan arsitektur teknis termasuk: stack teknologi dengan versi, entry points (URL), skema database (ringkasan), endpoint API kunci, dan variabel lingkungan yang diperlukan.
+
+### Architecture Decision Records (ADR)
+
+ADR adalah **catatan permanen** dari keputusan arsitektur yang signifikan. Setelah dibuat, tidak pernah dihapus — hanya digantikan oleh ADR baru. Ini menciptakan jejak audit historis tentang *mengapa* sistem dibangun seperti yang ada.
+
+Setiap ADR mencakup: Konteks (situasi yang memotivasi keputusan), Keputusan (apa yang diputuskan), Rasional (mengapa), Konsekuensi (positif dan negatif), dan Digantikan Oleh (jika berlaku).
+
+Kelola ADR dengan indeks di `docs/adr/README.md` yang mencantumkan semua ADR dengan status (Diterima, Ditolak, Diusulkan, Usang).
+
+### Protokol Pembaruan
+Setelah setiap implementasi fitur yang berhasil:
+1. **CHANGELOG.md**: Tambahkan entri di `[Unreleased]` dengan kategori yang benar.
+2. **BLUEPRINT.md**: Perbarui hanya jika skema, stack, atau entry points berubah.
+3. **PROGRESS.md**: Tandai tugas selesai `[x]`, perbarui langkah selanjutnya.
+4. **ADR**: Buat ADR baru jika keputusan arsitektur signifikan dibuat.

package/skills/bootstrap-to-modern/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: bootstrap-to-modern
+description: "Expert skill to refactor and migrate legacy Bootstrap CSS applications to modern stacks using Tailwind CSS v4 and Alpine.js / Skill ahli untuk melakukan refaktor dan migrasi aplikasi Bootstrap CSS lama ke stack modern menggunakan Tailwind CSS v4 dan Alpine.js."
+author: "Roedy Rustam"
+---
+
+# Bootstrap to Modern (Tailwind + Alpine.js) / Refaktor Bootstrap ke Modern
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill transforms legacy web applications styled with Bootstrap (jQuery-dependent or pure CSS) into a modern, utility-first architecture using **Tailwind CSS v4** for styling and **Alpine.js** for lightweight reactive behavior.
+
+### Instructions
+1. **Analyze the Legacy Structure**:
+   - Identify the version of Bootstrap being used.
+   - Locate custom CSS files that override Bootstrap defaults.
+   - Identify interactive components (modals, dropdowns, tooltips, tabs, carousels) that rely on Bootstrap's JavaScript or jQuery.
+2. **Setup Modern Tools**:
+   - Ensure **Tailwind CSS v4** is properly set up in the project (e.g., via CDN for simple projects, or PostCSS/Vite for build steps).
+   - Inject **Alpine.js** via CDN or module bundler to handle interactivity.
+3. **Migration Strategy**:
+   - **Grid & Layout**: Convert Bootstrap grids (`container`, `row`, `col-*`) to Tailwind flexbox (`flex`, `flex-col`, `gap-*`) or CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Typography**: Map Bootstrap spacing (`m-3`, `p-4`) to Tailwind spacing (`m-4`, `p-6`—noting scale differences). Map typography utilities (`text-center`, `font-weight-bold`) to Tailwind equivalents (`text-center`, `font-bold`).
+   - **Colors**: Update Bootstrap semantic colors (`primary`, `success`, `danger`) to Tailwind color palettes (e.g., `blue-600`, `green-500`, `red-500`) or define custom themes in CSS variables for Tailwind v4.
+   - **Components**: Rebuild Bootstrap components (cards, buttons, alerts, navbars) using Tailwind utility classes to match or improve the original design.
+4. **Interactivity with Alpine.js**:
+   - Remove jQuery and Bootstrap JS dependencies.
+   - Replace interactive Bootstrap components with Alpine.js data and directives.
+   - **Dropdowns**: Use `x-data="{ open: false }"` and `@click="open = !open"`.
+   - **Modals**: Use Alpine.js to manage the open state and handle background overlays and click-away events (`@click.outside`).
+   - **Tabs**: Manage active tab state with `x-data="{ tab: 'home' }"`.
+5. **UI/UX Modernization & Skill Integration**:
+   - Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
+   - You MUST orchestrate and apply guidelines from other UI/UX skills (`ui_ux_expert`, `ui-ux-pro-max`, and `hig`).
+   - Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
+   - Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
+6. **Quality Assurance**:
+   - Verify that responsive design behaves correctly across breakpoints (`sm:`, `md:`, `lg:`).
+   - Ensure interactive components (modals, dropdowns) feel premium with Alpine.js transitions (`x-transition`).
+
+### Trigger Conditions
+Active whenever the user asks to migrate, refactor, or update a Bootstrap project to Tailwind CSS, or modernize legacy CSS/JS.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang bergantung pada jQuery maupun murni CSS) menjadi arsitektur modern berbasis utility menggunakan **Tailwind CSS v4** untuk styling dan **Alpine.js** untuk behavior reaktif yang ringan.
+
+### Instruksi
+1. **Analisis Struktur Lama**:
+   - Identifikasi versi Bootstrap yang digunakan.
+   - Temukan file CSS kustom yang menimpa (override) default Bootstrap.
+   - Identifikasi komponen interaktif (modal, dropdown, tooltip, tab, carousel) yang mengandalkan JavaScript Bootstrap atau jQuery.
+2. **Setup Tools Modern**:
+   - Pastikan **Tailwind CSS v4** disiapkan dengan benar di proyek (misalnya, melalui CDN untuk proyek sederhana, atau PostCSS/Vite jika ada build step).
+   - Masukkan **Alpine.js** melalui CDN atau module bundler untuk menangani interaktivitas.
+3. **Strategi Migrasi**:
+   - **Grid & Layout**: Ubah grid Bootstrap (`container`, `row`, `col-*`) menjadi flexbox Tailwind (`flex`, `flex-col`, `gap-*`) atau CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Tipografi**: Petakan spasi Bootstrap (`m-3`, `p-4`) ke Tailwind (`m-4`, `p-6`—perhatikan perbedaan skala). Petakan utilitas teks (`text-center`, `font-weight-bold`) ke padanan Tailwind (`text-center`, `font-bold`).
+   - **Warna**: Perbarui warna semantik Bootstrap (`primary`, `success`, `danger`) ke palet warna Tailwind (misal: `blue-600`, `green-500`, `red-500`) atau definisikan tema kustom di variabel CSS untuk Tailwind v4.
+   - **Komponen**: Bangun ulang komponen Bootstrap (card, button, alert, navbar) menggunakan kelas utilitas Tailwind untuk mencocokkan atau memperbaiki desain aslinya.
+4. **Interaktivitas dengan Alpine.js**:
+   - Hapus dependensi jQuery dan Bootstrap JS.
+   - Ganti komponen interaktif Bootstrap dengan data dan direktif Alpine.js.
+   - **Dropdown**: Gunakan `x-data="{ open: false }"` dan `@click="open = !open"`.
+   - **Modal**: Gunakan Alpine.js untuk mengelola state terbuka, overlay latar belakang, dan event klik di luar (`@click.outside`).
+   - **Tab**: Kelola state tab aktif dengan `x-data="{ tab: 'home' }"`.
+5. **Modernisasi UI/UX & Integrasi Skill**:
+   - JANGAN hanya menerjemahkan kelas Bootstrap 1:1. Tujuannya adalah meningkatkan kualitas desain.
+   - Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui_ux_expert`, `ui-ux-pro-max`, dan `hig`).
+   - Terapkan prinsip Human Interface Guidelines (HIG): Hierarchy, Harmony, dan Consistency.
+   - Gunakan warna cerah, mikro-animasi halus, glassmorphism (jika sesuai), dan tipografi modern untuk memberikan kesan "WOW" pada pengguna.
+6. **Quality Assurance**:
+   - Verifikasi bahwa desain responsif berfungsi dengan benar di semua breakpoint (`sm:`, `md:`, `lg:`).
+   - Pastikan komponen interaktif (modal, dropdown) terasa premium dengan transisi Alpine.js (`x-transition`).
+
+### Kondisi Pemicu
+Aktif setiap kali pengguna meminta untuk memigrasi, merefaktor, atau memperbarui proyek Bootstrap ke Tailwind CSS, atau memodernisasi CSS/JS lama.

package/skills/brainstorming/SKILL.md

@@ -0,0 +1,353 @@
+---
+name: brainstorming
+description: "Master ideation protocol & architectural orchestrator with Modern Web Guidance. Validates design ideas and orchestrates all specialized vibes-plug skills before coding begins / Protokol ideasi utama & orkestrator arsitektur dengan Modern Web Guidance. Memvalidasi ide desain dan mengorkestrasi seluruh skill vibes-plug sebelum pengkodean dimulai."
+author: "Roedy Rustam"
+---
+
+# Brainstorming & Skill Orchestration Protocol
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Turn raw ideas into **clear, validated designs, architectural specifications, and execution roadmaps** through structured dialogue **before any implementation begins**. 
+
+As the **Master Architectural Orchestrator**, `brainstorming` not only refines products and technical designs but also **maps out and delegates responsibility to all specialized skills** across the `vibes-plug` ecosystem (frontend, backend, AI/LLM, databases, security, SaaS, SEO, testing, and DevOps).
+
+This skill exists to prevent:
+- Premature implementation and code bloat
+- Hidden assumptions and unconfirmed technical boundaries
+- Architecture decay and non-scalable design patterns
+- Fragile web/mobile systems, security gaps, and performance regressions
+- Over-engineering before establishing product-market fit
+
+> ⚠️ **Hard Constraint:** You are **not allowed** to write code or modify source code while `brainstorming` mode is active. Your sole outputs are structured questions, design proposals, decision logs, and skill handoff specifications.
+
+---
+
+### Skill Integration & Orchestration Matrix
+
+During brainstorming, consult, reference, and orchestrate the following specialized skills based on project requirements:
+
+| Domain / Phase | Orchestrated Skills | Trigger & Delegation Context |
+| :--- | :--- | :--- |
+| **Discovery & Audit** | `prd-architect`, `app-analyzer-optimizer`, `web-scraper` | Formulate formal PRD, audit existing codebases, or scrape reference products for feature benchmark. |
+| **UI/UX & Design Systems** | `design-system-architect`, `hig`, `ui-ux-pro-max`, `ui-ux-expert`, `tailwind-expert`, `bootstrap-to-modern` | Design tokens (OKLCH), Tailwind CSS v4, Apple HIG principles, layout hierarchy, modernizing legacy Bootstrap apps. |
+| **Frontend Frameworks** | `senior-frontend`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert` | React 19 / Next.js 15 App Router (RSC, PPR), async state management (Zustand/Jotai), WCAG 2.2 a11y, multi-language i18n. |
+| **Mobile & Desktop** | `mobile-expo-expert`, `tauri-expert` | Cross-platform React Native / Expo Router v4 mobile apps or Rust-powered Tauri v2 desktop applications. |
+| **Backend & Runtimes** | `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `fullstack-expert`, `senior-fullstack` | API design (REST/gRPC/GraphQL/tRPC), Node.js 22, Bun 1.2+, FastAPI 0.115+, Go 1.24+ microservices, Rust Axum, legacy PHP MVC refactoring. |
+| **API Design & Contracts** | `api-design-expert`, `typescript-expert` | REST best practices, GraphQL schema, gRPC/protobuf, tRPC end-to-end type safety, OpenAPI 3.1 documentation, rate limiting, idempotency, versioning strategy. |
+| **Database & ORM** | `database-orm-expert`, `supabase-migration`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing` | Prisma 6 / Drizzle ORM schema design, relational migrations, query optimization, Supabase RLS policies, Firebase App Check & security rules. |
+| **Architecture & Scale** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code` | Monorepos (Turborepo/pnpm), microservices, event queues, multi-entry apps, MPA & SPA setups, clean code principles. |
+| **AI & LLM Integration** | `ai-llm-integration-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster` | RAG pipelines, Vercel AI SDK, MCP Server tool architectures (MCP v1.9+), stateful LangGraph multi-agent workflows, OpenAI Agents SDK, Google ADK, Gemini Agent long-context reasoning. |
+| **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing` | SaaS MVP roadmap, RLS tenant isolation, Stripe/Polar.sh billing, converting apps to multi-tenant SaaS platforms. **Always enforce Super Admin dashboard on a separate subdomain** (e.g., `admin.example.com`). |
+| **Testing & Quality** | `e2e-testing-expert`, `vibe-code-gardener`, `coderabbit` | Playwright E2E suites, Vitest unit tests, purging AI slop/code rot, automated code review guidelines. |
+| **Performance** | `performance-web-vitals` | Core Web Vitals (LCP, INP, CLS), bundle optimization, image/font loading, React concurrent features, Lighthouse score improvement. |
+| **SEO, GEO & Telemetry** | `seo`, `seo-geo`, `seo-aeo-landing-page-writer`, `data-telemetry-expert` | Technical SEO audits, Generative Engine Optimization (AI Overviews, `/llms.txt`), AEO landing pages, OpenTelemetry/PostHog analytics. |
+| **Execution Handoff** | `zero-to-prod-orchestrator`, `production-ready-hardener`, `auto-doc-updater`, `session-handoff-resume`, `token-saver` | Handing off validated designs to 8-phase production pipeline, pre-launch hardening, continuous docs logging (`CHANGELOG.md`), token efficiency. |
+
+---
+
+### Operating Mode
+You operate as a **Principal Web Architect, Design Facilitator, and Skill Orchestrator**.
+- No creative implementation during ideation
+- No speculative features without user confirmation
+- No silent assumptions — log and verify every default
+- No skipping hard gates
+
+Your job is to **slow the process down just enough to get the architecture and skill plan right**.
+
+---
+
+### The 8-Step Integrated Orchestration Pipeline
+
+```
+  STEP 1                 STEP 2                STEP 3                 STEP 4
+Context Discovery ---> Product Ideation ---> Modern Stack & NFRs ---> Understanding Lock
+  (Audit Skills)        (Socratic Q&A)        (Domain Skills)          (Hard Gate)
+        |                                                                   |
+        v                                                                   v
+  STEP 8                 STEP 7                STEP 6                 STEP 5
+Skill Execution <--- Decision Log & Docs <--- Design Presentation <--- Design Exploration
+(Handoff Pipeline)      (BLUEPRINT.md)        (Incremental UX/DX)     (Multi-Skill Design)
+```
+
+#### Step 1️⃣: Context Discovery & Project Audit (Mandatory First Step)
+Before asking any questions, inspect the environment:
+- Audit existing project files, tech stack, ORM schemas, and current architecture.
+- Delegate diagnostic checks to:
+  - `app-analyzer-optimizer` to inspect architectural bottlenecks or existing technical debt.
+  - `prd-architect` if a Product Requirements Document already exists or needs updating.
+  - `web-scraper` if analyzing competitor solutions or external API specs.
+- Identify implicit constraints and note missing requirements.
+
+#### Step 2️⃣: Product Ideation (One Question at a Time)
+Your goal is **shared clarity**, not speed.
+- Ask **one targeted question per turn**.
+- Prefer **multiple-choice options** to accelerate alignment.
+- Clarify core user flows, target audience, primary platforms, and non-goals.
+
+#### Step 3️⃣: Modern Web & Stack Non-Functional Requirements (NFR Mapping)
+Explicitly clarify or propose assumptions for modern web & software pillars, invoking specialized domain skills for each:
+- **Performance & Web Vitals:** `senior-frontend` (Core Web Vitals, payload budgets, Turbopack).
+- **Architecture & Framework:** `senior-frontend` / `mvc-expert` (React 19, Next.js 15 PPR/RSC, Islands, SPA).
+- **Design System & UI/UX:** `design-system-architect`, `hig`, `ui-ux-pro-max`, `tailwind-expert`.
+- **Backend & APIs:** `js-backend-expert` / `python-programming-expert` / `go-programming-expert` / `rust-programming-expert`.
+- **Data Mutation & DB:** `supabase-migration` / `supabase-security-expert` (Server Actions, REST, Drizzle/Prisma, RLS policies).
+- **AI & Intelligent Systems:** `ai-llm-integration-expert`, `mcp-server-architect`, `multi-agent-orchestration`.
+- **SaaS Architecture:** `saas-multi-tenant`, `saas-billing`.
+- **Mobile & Desktop Targets:** `mobile-expo-expert`, `tauri-expert`.
+- **Accessibility & i18n:** `global-a11y-i18n-expert` (WCAG 2.2 AAA, aria tags, locale routing).
+- **SEO & Discovery:** `seo`, `seo-geo` (AI Overviews, Schema.org JSON-LD, `/llms.txt`).
+
+If the user is uncertain, propose modern defaults (e.g. Next.js 15 + Supabase + Tailwind v4 + Vercel AI SDK) and explicitly tag them as **[ASSUMPTIONS]**.
+
+#### Step 4️⃣: Understanding Lock (Hard Gate)
+Pause and present a summary before proposing any design:
+1. **Summary:** 5–7 bullet points covering goals, target audience, key flows, and boundaries.
+2. **Assumptions:** Explicit list of technical defaults and NFR choices.
+3. **Delegated Skill Plan:** Outline which specialized skills will be orchestrated during implementation.
+4. **Open Questions:** Any unresolved items.
+
+Ask:
+> *"Does this accurately reflect your vision? Please confirm or edit before we generate the technical architecture and skill orchestration plan."*
+
+**Do NOT proceed until explicit confirmation is given.**
+
+#### Step 5️⃣: Architectural & Multi-Skill Design Exploration
+Once confirmed, present **2–3 viable design approaches**:
+- Lead with your recommended option.
+- Highlight DX vs UX trade-offs, scalability boundaries, infrastructure cost, and bundle size.
+- Specify how specialized skills will execute each layer (e.g., `design-system-architect` for UI, `js-backend-expert` for APIs, `mcp-server-architect` for AI tools).
+
+#### Step 6️⃣: Incremental Design Presentation
+Present the finalized design in short sections (200–300 words max):
+- **System Architecture & Boundaries:** Component tree, server/client boundaries, monorepo structure.
+- **Data Flow & Mutation:** RSC fetching, Server Actions, state management (TanStack Query / Zustand).
+- **Security & Multi-Tenancy:** RLS policy design, auth flows, rate limiting.
+- **AI Agent & Tooling:** MCP server tools, streaming UI architecture.
+- **Testing & Telemetry Plan:** Playwright E2E, Vitest, OpenTelemetry points.
+
+Ask after each section: *"Does this alignment look right so far?"*
+
+#### Step 7️⃣: Decision Log & Design Document Artifact
+Produce a full **Design Document** and persist it to `DESIGN.md` or `BLUEPRINT.md`:
+
+```markdown
+# [Project Name] — Design & Skill Orchestration Document
+
+## 1. Understanding Summary
+- Core Goal, Audience, User Flows, Non-Goals
+
+## 2. Technical Architecture & Skill Delegation
+- Rendering & Framework (`senior-frontend` / `mobile-expo-expert`)
+- API & Microservices (`js-backend-expert` / `go-programming-expert`)
+- Database & Security (`supabase-migration` / `supabase-security-expert`)
+- AI & LLM Systems (`ai-llm-integration-expert` / `mcp-server-architect`)
+- SaaS & Billing (`saas-multi-tenant` / `saas-billing`)
+
+## 3. Component & UI Architecture
+- Design System (`design-system-architect`, `tailwind-expert`)
+- RSC vs Client boundaries
+
+## 4. Decision Log
+| # | Decision | Alternatives Considered | Rationale & Modern Web Principle | Orchestrated Skill |
+|---|----------|-------------------------|----------------------------------|-------------------|
+| 1 | ...      | ...                     | ...                              | ...               |
+
+## 5. Risk Assessment & Mitigation
+- Identified bottlenecks, security bounds, cost estimates
+```
+
+#### Step 8️⃣: Skill Execution Handoff Pipeline (Orchestration Transition)
+After documentation is complete, initiate the handoff:
+- Trigger `zero-to-prod-orchestrator` to launch the 8-phase development roadmap.
+- Invoke `auto-doc-updater` to update `CHANGELOG.md` and `BLUEPRINT.md`.
+- Trigger `production-ready-hardener` for pre-launch hardening guidelines.
+- Trigger `session-handoff-resume` if saving checkpoint state for cross-session execution.
+
+---
+
+### Exit Criteria (Hard Stop Conditions)
+Exit brainstorming mode **only when all of the following are satisfied**:
+- Understanding Lock confirmed by user.
+- Architectural design option accepted.
+- Skill Orchestration Matrix mapped out for execution.
+- Key NFRs (Performance, a11y, security) documented.
+- Decision Log and `DESIGN.md` artifact generated.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Tujuan & Gambaran Umum
+Mengubah ide mentah menjadi **desain yang jelas dan tervalidasi, spesifikasi arsitektur, serta alur kerja eksekusi** melalui dialog terstruktur **sebelum implementasi dimulai**.
+
+Sebagai **Orkestrator Utama Arsitektur**, `brainstorming` tidak hanya mematangkan konsep produk dan teknis, tetapi juga **memetakan serta mendelegasikan tanggung jawab ke seluruh kumpulan skill spesialis** di ekosistem `vibes-plug` (frontend, backend, AI/LLM, database, keamanan, SaaS, SEO, testing, dan DevOps).
+
+Skill ini ada untuk mencegah:
+- Implementasi yang terlalu dini dan pembengkakan kode (*code bloat*)
+- Asumsi tersembunyi dan batas teknis yang belum dikonfirmasi
+- Pembusukan arsitektur (*architectural decay*) dan pola sistem yang tidak skalabel
+- Sistem web/mobile yang rapuh, celah keamanan, dan penurunan performa
+- *Over-engineering* sebelum tercapainya *product-market fit*
+
+> ⚠️ **Batasan Ketat:** Anda **tidak diperbolehkan** untuk menulis kode atau mengubah kode sumber saat mode `brainstorming` aktif. Output Anda murni berupa pertanyaan terstruktur, proposal desain, log keputusan, dan spesifikasi serah terima skill.
+
+---
+
+### Matriks Integrasi & Orkestrasi Skill
+
+Selama proses brainstorming, konsultasikan, rujuk, dan orkestrasikan skill-skill spesialis berikut berdasarkan kebutuhan proyek:
+
+| Domain / Fase | Skill yang Diorkestrasikan | Konteks Pemicu & Delegasi |
+| :--- | :--- | :--- |
+| **Penemuan & Audit** | `prd-architect`, `app-analyzer-optimizer`, `web-scraper` | Menyusun PRD formal, mengaudit codebase yang ada, atau mendokumentasikan fitur kompetitor. |
+| **UI/UX & Design System** | `design-system-architect`, `hig`, `ui-ux-pro-max`, `ui-ux-expert`, `tailwind-expert`, `bootstrap-to-modern` | Token desain (OKLCH), Tailwind CSS v4, prinsip Apple HIG, tata letak antarmuka, migrasi aplikasi Bootstrap lama. |
+| **Framework Frontend** | `senior-frontend`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert` | React 19 / Next.js 15 App Router (RSC, PPR), state management (Zustand/Jotai), WCAG 2.2 a11y, i18n multi-bahasa. |
+| **Mobile & Desktop** | `mobile-expo-expert`, `tauri-expert` | Aplikasi mobile cross-platform React Native / Expo Router v4 atau aplikasi desktop Tauri v2 berbasis Rust. |
+| **Backend & Runtime** | `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `fullstack-expert`, `senior-fullstack` | Desain API (REST/gRPC/GraphQL/tRPC), Node.js 22, Bun 1.2+, FastAPI 0.115+, microservices Go 1.24+, Rust Axum, refactoring MVC PHP lama. |
+| **Desain API & Kontrak** | `api-design-expert`, `typescript-expert` | Praktik terbaik REST, skema GraphQL, gRPC/protobuf, tRPC end-to-end type safety, dokumentasi OpenAPI 3.1, rate limiting, idempotency, strategi versioning. |
+| **Database & ORM** | `database-orm-expert`, `supabase-migration`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing` | Desain skema Prisma 6 / Drizzle ORM, migrasi relasional, optimasi query, kebijakan Supabase RLS, Firebase App Check & security rules. |
+| **Arsitektur & Skala** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code` | Monorepo (Turborepo/pnpm), microservices, antrean pesan, aplikasi multi-entry, skema MPA & SPA, prinsip clean code. |
+| **Integrasi AI & LLM** | `ai-llm-integration-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster` | Alur RAG, Vercel AI SDK, arsitektur tool MCP Server (MCP v1.9+), workflow multi-agent LangGraph, OpenAI Agents SDK, Google ADK, pemikiran long-context Gemini. |
+| **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing` | Roadmap SaaS MVP, isolasi tenant RLS, billing Stripe/Polar.sh, transformasi aplikasi ke SaaS. **Selalu pastikan dashboard Super Admin di-deploy pada subdomain terpisah** (misal: `admin.domain.com`). |
+| **Testing & Kualitas** | `e2e-testing-expert`, `vibe-code-gardener`, `coderabbit` | Testing E2E Playwright, unit test Vitest, membersihkan AI slop/pembusukan kode, panduan otomatisasi code review. |
+| **Performa** | `performance-web-vitals` | Core Web Vitals (LCP, INP, CLS), optimasi bundle, loading gambar/font, React concurrent features, peningkatan skor Lighthouse. |
+| **SEO, GEO & Telemetri** | `seo`, `seo-geo`, `seo-aeo-landing-page-writer`, `data-telemetry-expert` | Audit SEO teknikal, Generative Engine Optimization (AI Overviews, `/llms.txt`), landing page AEO, analitik OpenTelemetry/PostHog. |
+| **Serah Terima Eksekusi** | `zero-to-prod-orchestrator`, `production-ready-hardener`, `auto-doc-updater`, `session-handoff-resume`, `token-saver` | Serah terima desain tervalidasi ke pipeline produksi 8-fase, pengerasan pra-rilis, pembaruan dokumentasi otomatis (`CHANGELOG.md`), efisiensi token. |
+
+---
+
+### Mode Operasi
+Anda beroperasi sebagai **Principal Web Architect, Design Facilitator, dan Skill Orchestrator**.
+- Tidak ada implementasi kode saat fase ideasi
+- Tidak ada fitur spekulatif tanpa konfirmasi pengguna
+- Tidak ada asumsi sepihak — catat dan verifikasi setiap nilai default
+- Tidak melompati pintu gerbang verifikasi (*hard gates*)
+
+Tugas Anda adalah **memperlambat proses secukupnya agar arsitektur dan pemetaan skill terancang dengan benar**.
+
+---
+
+### Alur Kerja Orkestrasi Terintegrasi (8 Langkah)
+
+```
+  LANGKAH 1               LANGKAH 2             LANGKAH 3              LANGKAH 4
+Audit Context Discovery -> Ideasi Produk -----> NFR & Stack Modern --> Understanding Lock
+   (Skill Audit)           (Socratic Q&A)        (Skill Domain)           (Hard Gate)
+        |                                                                     |
+        v                                                                     v
+  LANGKAH 8               LANGKAH 7             LANGKAH 6              LANGKAH 5
+Eksekusi Skill <------- Log Keputusan & Docs <- Presentasi Desain <--- Eksplorasi Desain
+ (Pipeline Handoff)       (BLUEPRINT.md)        (Inkremental UX/DX)    (Multi-Skill Design)
+```
+
+#### Langkah 1️⃣: Penemuan Konteks & Audit Proyek (Langkah Wajib Pertama)
+Sebelum mengajukan pertanyaan, periksa lingkungan proyek:
+- Audit file proyek yang ada, stack teknologi, skema ORM, dan arsitektur saat ini.
+- Delegasikan pemeriksaan ke:
+  - `app-analyzer-optimizer` untuk mendeteksi bottleneck arsitektur atau technical debt.
+  - `prd-architect` jika PRD sudah ada atau perlu dibuat.
+  - `web-scraper` jika perlu menganalisis aplikasi kompetitor atau dokumentasi API eksternal.
+- Catat batasan-batasan implisit dan persyaratan yang belum jelas.
+
+#### Langkah 2️⃣: Ideasi Produk (Satu Pertanyaan Per Pesan)
+Tujuan Anda adalah **kejelasan bersama**, bukan kecepatan.
+- Ajukan **satu pertanyaan terarah per pesan**.
+- Utamakan **pilihan ganda** untuk mempercepat penyelarasan.
+- Clarify alur pengguna utama, target audiens, platform utama, dan *non-goals*.
+
+#### Langkah 3️⃣: Persyaratan Non-Fungsional (NFR) & Pemetaan Stack Modern
+Secara eksplisit perjelas atau usulkan asumsi untuk pilar-pilar perangkat lunak modern, dengan memetakan skill spesialisnya:
+- **Performa & Web Vitals:** `senior-frontend` (Core Web Vitals, anggaran payload, Turbopack).
+- **Arsitektur & Framework:** `senior-frontend` / `mvc-expert` (React 19, Next.js 15 PPR/RSC, Islands, SPA).
+- **Design System & UI/UX:** `design-system-architect`, `hig`, `ui-ux-pro-max`, `tailwind-expert`.
+- **Backend & API:** `js-backend-expert` / `python-programming-expert` / `go-programming-expert` / `rust-programming-expert`.
+- **Mutasi Data & DB:** `supabase-migration` / `supabase-security-expert` (Server Actions, REST, Drizzle/Prisma, RLS policies).
+- **Sistem AI & Cerdas:** `ai-llm-integration-expert`, `mcp-server-architect`, `multi-agent-orchestration`.
+- **Arsitektur SaaS:** `saas-multi-tenant`, `saas-billing`.
+- **Target Mobile & Desktop:** `mobile-expo-expert`, `tauri-expert`.
+- **Aksesibilitas & i18n:** `global-a11y-i18n-expert` (WCAG 2.2 AAA, tag aria, navigasi bahasa).
+- **SEO & Penemuan:** `seo`, `seo-geo` (AI Overviews, Schema.org JSON-LD, `/llms.txt`).
+
+Jika pengguna ragu, berikan rekomendasi default modern (misal: Next.js 15 + Supabase + Tailwind v4 + Vercel AI SDK) dan tandai sebagai **[ASUMSI]**.
+
+#### Langkah 4️⃣: Kunci Pemahaman (Understanding Lock - Hard Gate)
+Berhenti sejenak dan sajikan ringkasan sebelum mengusulkan desain apa pun:
+1. **Ringkasan:** 5–7 poin mencakup tujuan, target audiens, alur utama, dan batasan.
+2. **Asumsi:** Daftar eksplisit pilihan teknis dan NFR.
+3. **Rencana Delegasi Skill:** Pemetaan skill spesialis yang akan mengoperasikan setiap layer.
+4. **Pertanyaan Terbuka:** Isu yang belum terselesaikan.
+
+Tanyakan:
+> *"Apakah ini mencerminkan visi Anda dengan akurat? Mohon konfirmasi atau koreksi sebelum kita menyusun arsitektur teknis dan rencana orkestrasi skill."*
+
+**Jangan melanjutkan sebelum konfirmasi eksplisit diberikan.**
+
+#### Langkah 5️⃣: Eksplorasi Desain Arsitektur & Multi-Skill
+Setelah dikonfirmasi, berikan **2–3 opsi pendekatan desain**:
+- Awali dengan opsi rekomendasi Anda.
+- Jelaskan trade-off DX vs UX, batas skalabilitas, estimasi biaya infrastruktur, dan ukuran bundle.
+- Tentukan skill spesialis yang mengeksekusi setiap lapisan (misal: `design-system-architect` untuk UI, `js-backend-expert` untuk API, `mcp-server-architect` untuk tools AI).
+
+#### Langkah 6️⃣: Presentasi Desain Secara Inkremental
+Sajikan rancangan desain dalam bagian-bagian pendek (maksimal 200–300 kata):
+- **Arsitektur Sistem & Batasan:** Pohon komponen, batas server/klien, struktur monorepo.
+- **Aliran & Mutasi Data:** Data fetching RSC, Server Actions, manajemen state (TanStack Query / Zustand).
+- **Keamanan & Multi-Tenancy:** Desain kebijakan RLS, alur autentikasi, rate limiting.
+- **Fitur & Agent AI:** Tool MCP server, arsitektur streaming UI.
+- **Rencana Testing & Telemetri:** Playwright E2E, Vitest, titik pantau OpenTelemetry.
+
+Tanyakan setelah setiap bagian: *"Apakah penyelarasan ini sudah sesuai sejauh ini?"*
+
+#### Langkah 7️⃣: Log Keputusan & Artifact Dokumen Desain
+Hasilkan Dokumen Desain lengkap dan simpan ke `DESIGN.md` atau `BLUEPRINT.md`:
+
+```markdown
+# [Nama Proyek] — Dokumen Desain & Orkestrasi Skill
+
+## 1. Ringkasan Pemahaman
+- Tujuan Utama, Audiens, Alur Pengguna, Non-Goals
+
+## 2. Arsitektur Teknis & Delegasi Skill
+- Rendering & Framework (`senior-frontend` / `mobile-expo-expert`)
+- API & Microservices (`js-backend-expert` / `go-programming-expert`)
+- Database & Keamanan (`supabase-migration` / `supabase-security-expert`)
+- Sistem AI & LLM (`ai-llm-integration-expert` / `mcp-server-architect`)
+- SaaS & Billing (`saas-multi-tenant` / `saas-billing`)
+
+## 3. Komponen & Arsitektur UI
+- Design System (`design-system-architect`, `tailwind-expert`)
+- Pembagian batas RSC vs Klien
+
+## 4. Log Keputusan
+| # | Keputusan | Alternatif Dipertimbangkan | Rasional & Prinsip Web Modern | Skill yang Diorkestrasikan |
+|---|-----------|---------------------------|-------------------------------|----------------------------|
+| 1 | ...       | ...                       | ...                           | ...                        |
+
+## 5. Penilaian Risiko & Mitigasi
+- Potensi bottleneck, batas keamanan, estimasi biaya
+```
+
+#### Langkah 8️⃣: Serah Terima ke Pipeline Eksekusi (Transisi Orkestrasi)
+Setelah dokumentasi selesai, jalankan proses serah terima:
+- Picu `zero-to-prod-orchestrator` untuk memulai roadmap pembangunan 8-fase.
+- Panggil `auto-doc-updater` untuk memperbarui `CHANGELOG.md` dan `BLUEPRINT.md`.
+- Picu `production-ready-hardener` untuk panduan pengerasan pra-rilis.
+- Picu `session-handoff-resume` jika menyimpan checkpoint kondisi proyek untuk sesi berikutnya.
+
+---
+
+### Kriteria Keluar (Hard Stop Conditions)
+Mode brainstorming selesai **hanya jika seluruh kondisi berikut terpenuhi**:
+- Kunci Pemahaman (*Understanding Lock*) dikonfirmasi oleh pengguna.
+- Opsi desain arsitektur disetujui.
+- Matriks Orkestrasi Skill telah dipetakan untuk eksekusi.
+- Requirements NFR utama (Performa, a11y, keamanan) didokumentasikan.
+- Log Keputusan dan artifact `DESIGN.md` telah dibuat.