26 added, 26 removed. Audit A to A.
---
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: "vibes-plug-swarm"
---
# Brainstorming & Skill Orchestration Protocol
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
---
<a name="english"></a>
## English
### Orchestration & Integration
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
### 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. **For new applications, you MUST always automatically trigger the `prd-architect` skill to generate a `PRD.md` file before coding begins.**
---
### 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`, `website-design-cloner`, `browser-automation-expert`, `dependency-upgrade-migrator`, `project-context-mapper`, `proactive-background-watcher`, `self-evolving-memory-graph` | Formulate formal PRD, ERD, and Documentation, audit existing codebases, cross-project episodic memory, reverse-engineer website URL designs 1:1, scrape reference products, execute autonomous Playwright/Browser-Use web agents, or audit dependency health. |
- | **UI/UX & Design Systems** | `design-system-architect`, `website-design-cloner`, `hig`, `monday-design-aesthetic`, `ui-ux-pro-max`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent` | Reverse-engineer website designs & templates directly from target URL, design tokens (OKLCH), Tailwind CSS v4, Apple HIG principles, layout hierarchy, production-quality UI components, modernizing legacy Bootstrap apps, WebGL 3D (Three.js/Babylon.js), custom GLSL shaders, WebXR AR/VR. |
- | **Frontend Frameworks** | `senior-frontend`, `vue-frontend-expert`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert`, `form-validation-expert`, `apple-ecosystem-expert` | React 19 / Next.js 15 App Router, Vue 3 / Nuxt 3, async state management (Zustand/Jotai/Pinia), WCAG 2.2 a11y, multi-language i18n, complex forms with React Hook Form + Zod. |
- | **Mobile & Desktop** | `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `mobile-push-notification-expert` | Cross-platform React Native / Expo Router v4, Apple ecosystem (iOS PWA & Safari), iOS Live Activities, push notifications (FCM/APNs), or Rust-powered Tauri v2 desktop apps. |
- | **Backend & Runtimes** | `nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `domain-driven-design-expert`, `fullstack-expert`, `async-queue-temporal-expert`, `background-jobs-queue-expert`, `cron-scheduler-expert`, `legacy-code-translator`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert` | API design, Node.js 24, Bun 1.2+, FastAPI, Go microservices, Rust Axum, API Gateways, Edge computing WASM, durable workflows (Temporal/Trigger.dev/BullMQ), dedicated background jobs queues, scheduled tasks & cron jobs. |
+ | **Discovery & Audit** | `prd-architect`, `app-analyzer-optimizer`, `web-scraper`, `website-design-cloner`, `browser-automation-expert`, `dependency-upgrade-migrator`, `project-context-mapper`, `proactive-background-watcher`, `self-evolving-memory-graph`, `documentation-site-expert`, `headless-cms-expert`, `wordpress-headless-expert` | Formulate formal PRD, ERD, and Documentation, audit existing codebases, cross-project episodic memory, reverse-engineer website URL designs 1:1, scrape reference products, headless CMS/WP architecture discovery, docs site setup, execute autonomous Playwright/Browser-Use web agents, or audit dependency health. |
+ | **UI/UX & Design Systems** | `design-system-architect`, `website-design-cloner`, `hig`, `monday-design-aesthetic`, `ui-ux-pro-max`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent`, `data-visualization-expert`, `rich-text-editor-expert` | Reverse-engineer website designs & templates directly from target URL, design tokens (OKLCH), Tailwind CSS v4, Apple HIG principles, layout hierarchy, production-quality UI components, rich text editors (Tiptap/Lexical), data viz & charts (Recharts/Tremor/D3), modernizing legacy Bootstrap apps, WebGL 3D (Three.js/Babylon.js), custom GLSL shaders, WebXR AR/VR. |
+ | **Frontend Frameworks** | `senior-frontend`, `vue-frontend-expert`, `astro-framework-expert`, `svelte-sveltekit-expert`, `solidjs-expert`, `angular-expert`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert`, `form-validation-expert`, `apple-ecosystem-expert`, `blockchain-web3-expert` | React 19 / Next.js 15 App Router, Vue 3 / Nuxt 3, Astro 5+ Islands, Svelte 5 Runes / SvelteKit 2, SolidJS 2 / SolidStart, Angular 19+ Signals & Standalone, Web3 dApp integrations (wagmi/viem), async state management (Zustand/Jotai/Pinia), WCAG 2.2 a11y, multi-language i18n, complex forms with React Hook Form + Zod. |
+ | **Mobile & Desktop** | `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `mobile-push-notification-expert` | Cross-platform React Native / Expo Router v4, Apple ecosystem (iOS PWA & Safari), iOS Live Activities, push notifications (FCM/APNs), Rust-powered Tauri v2, or Electron 33+ desktop apps. |
+ | **Backend & Runtimes** | `nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `domain-driven-design-expert`, `fullstack-expert`, `async-queue-temporal-expert`, `background-jobs-queue-expert`, `cron-scheduler-expert`, `legacy-code-translator`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert`, `n8n-automation-expert`, `chatbot-messaging-expert`, `pdf-document-generation-expert` | API design, Node.js 24, Bun 1.2+, FastAPI, Go microservices, Rust Axum, API Gateways, Edge computing WASM, durable workflows (Temporal/Trigger.dev/BullMQ), dedicated background jobs queues, scheduled tasks, n8n workflow automation, WhatsApp/Telegram/Discord bots, PDF & document pipelines. |
| **API Design & Contracts** | `api-design-expert`, `openapi-swagger-codegen-expert`, `typescript-expert`, `rate-limit-abuse-prevention`, `graphql-apollo-expert` | REST best practices, GraphQL schema (Apollo/NestJS), gRPC/protobuf, tRPC end-to-end type safety, OpenAPI 3.1 documentation & codegen, rate limiting, API key management, idempotency, versioning strategy. |
- | **Database, ORM & Data** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing`, `data-pipeline-etl-expert` | Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG indexing, serverless DBs (Neon/D1/Turso), Supabase RLS, Firebase security rules. |
- | **Architecture & Scale** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code`, `micro-frontend-architect`, `web-game-engine-expert` | Monorepos (Turborepo/pnpm), microservices, event queues, multi-entry apps, MPA & SPA setups, clean code principles, micro-frontends (Webpack/Vite Federation), WebGL ECS & Physics engines. |
- | **AI & LLM Integration** | `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `mcp-client-orchestrator`, `doku-mcp-server` | RAG pipelines, MCP Server v1.9+, LangGraph multi-agent workflows, Gemini Agent long-context reasoning, LLM FinOps, semantic caching, autonomous agent swarms, DOKU MCP integration. |
- | **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing`, `feature-flag-analytics-expert`, `payment-gateway-expert`, `doku-payment-gateway`, `email-notification-expert` | SaaS MVP roadmap, RLS tenant isolation, Stripe/DOKU billing, feature flags (PostHog/LaunchDarkly), progressive rollout, transactional email & notification pipelines. |
- | **Testing & Security** | `e2e-testing-expert`, `browser-automation-expert`, `zero-trust-secret-vault`, `vibe-code-gardener`, `coderabbit`, `authentication-identity-expert`, `rate-limit-abuse-prevention`, `autonomous-tdd-debugger`, `autonomous-red-teamer`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert` | Playwright E2E suites, dynamic security fuzzing, GDPR/PDPA compliance, post-quantum crypto migration, Zero-Trust secrets, automated code review, auth, brute-force & DDoS prevention, autonomous TDD debugging. |
+ | **Database, ORM & Data** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing`, `data-pipeline-etl-expert`, `search-engine-expert`, `geospatial-maps-expert` | Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG indexing, full-text search (Typesense/Meilisearch/Elasticsearch), geospatial queries (PostGIS/GeoJSON/Mapbox), serverless DBs (Neon/D1/Turso), Supabase RLS, Firebase security rules. |
+ | **Architecture & Scale** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code`, `micro-frontend-architect`, `web-game-engine-expert`, `biome-linter-formatter-expert` | Monorepos (Turborepo/pnpm), Biome v2 linter/formatter, microservices, event queues, multi-entry apps, MPA & SPA setups, clean code principles, micro-frontends (Webpack/Vite Federation), WebGL ECS & Physics engines. |
+ | **AI & LLM Integration** | `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `ai-media-generation-expert`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `mcp-client-orchestrator`, `doku-mcp-server` | RAG pipelines, MCP Server v1.9+, AI image/video/voice generation (Flux/ElevenLabs/Whisper/Sora), LangGraph multi-agent workflows, Gemini Agent long-context reasoning, LLM FinOps, semantic caching, autonomous agent swarms, DOKU MCP integration. |
+ | **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing`, `feature-flag-analytics-expert`, `payment-gateway-expert`, `ecommerce-expert`, `doku-payment-gateway`, `email-notification-expert` | SaaS MVP roadmap, e-commerce architectures (Shopify/Medusa/Saleor), RLS tenant isolation, Stripe/DOKU billing, feature flags (PostHog/LaunchDarkly), progressive rollout, transactional email & notification pipelines. |
+ | **Testing & Security** | `e2e-testing-expert`, `accessibility-testing-expert`, `browser-automation-expert`, `zero-trust-secret-vault`, `vibe-code-gardener`, `coderabbit`, `authentication-identity-expert`, `rate-limit-abuse-prevention`, `autonomous-tdd-debugger`, `autonomous-red-teamer`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert` | Playwright E2E suites, automated WCAG 2.2 accessibility testing (axe-core/Pa11y), dynamic security fuzzing, GDPR/PDPA compliance, post-quantum crypto migration, Zero-Trust secrets, automated code review, auth, brute-force & DDoS prevention, autonomous TDD debugging. |
| **Error Handling & Resilience** | `error-resilience-expert`, `logging-error-tracking-expert`, `autonomous-chaos-monkey` | Chaos engineering, React Error Boundaries, API error standards (RFC 9457), retry patterns, circuit breakers, graceful degradation, structured logging (Pino), Sentry integration. |
- | **Communication & Notifications** | `email-notification-expert`, `mobile-push-notification-expert`, `realtime-collaboration-expert`, `sse-websocket-streaming-expert` | Transactional email (Resend/Postmark), React Email templates, in-app notifications, push notifications, streaming responses (SSE/WebSocket), real-time collaboration (WebSocket/WebRTC/CRDTs). |
- | **File & Media** | `file-upload-media-expert` | Presigned URL uploads (S3/R2), image optimization (Sharp), video transcoding (Mux), CDN configuration, drag-and-drop UI, file validation & security. |
+ | **Communication & Notifications** | `email-notification-expert`, `mobile-push-notification-expert`, `realtime-collaboration-expert`, `sse-websocket-streaming-expert`, `chatbot-messaging-expert` | Transactional email (Resend/Postmark), React Email templates, in-app notifications, messaging bots (WhatsApp/Telegram/Discord/Slack), push notifications, streaming responses (SSE/WebSocket), real-time collaboration (WebSocket/WebRTC/CRDTs). |
+ | **File & Media** | `file-upload-media-expert`, `ai-media-generation-expert`, `pdf-document-generation-expert` | Presigned URL uploads (S3/R2), image optimization (Sharp), video transcoding (Mux), AI media generation, PDF generation (React PDF/Puppeteer), CDN configuration, drag-and-drop UI, file validation & security. |
| **Performance** | `performance-web-vitals`, `app-analyzer-optimizer` | Core Web Vitals (LCP, INP, CLS), bundle optimization, image/font loading, React concurrent features, Lighthouse score improvement, deep architecture analysis. |
| **SEO, GEO & Telemetry** | `seo`, `data-telemetry-expert` | Technical SEO audits, Generative Engine Optimization (AI Overviews, `/llms.txt`), AEO landing pages, OpenTelemetry/PostHog analytics. |
- | **DevOps & CI/CD** | `ci-cd-devops-architect`, `cloud-hosting-expert`, `dependency-upgrade-migrator`, `self-healing-cloud-orchestrator` | GitHub Actions, Docker, Kubernetes, Terraform, Vercel/Cloudflare deployment, self-healing cloud operations, Renovate Bot, dependency health. |
+ | **DevOps & CI/CD** | `ci-cd-devops-architect`, `cloud-hosting-expert`, `dependency-upgrade-migrator`, `self-healing-cloud-orchestrator`, `biome-linter-formatter-expert` | GitHub Actions, Biome lint/format checks, Docker, Kubernetes, Terraform, Vercel/Cloudflare deployment, self-healing cloud operations, Renovate Bot, dependency health. |
| **Execution Handoff** | `zero-to-prod-orchestrator`, `production-ready-hardener`, `auto-doc-updater`, `session-handoff-resume`, `session-context-loader`, `token-saver` | Handing off validated designs to 8-phase production pipeline, pre-launch hardening, continuous docs logging (`CHANGELOG.md`), loading context on new sessions, 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` to **mandatorily generate a `PRD.md` file** if this is a new application, or update it if it already exists.
- `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`, `domain-driven-design-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:** `nextjs-app-router-expert`, `database-migration-versioning-expert`, `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`, `ai-prompt-engineering-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` (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, `nextjs-app-router-expert`, `database-migration-versioning-expert`, `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 (`nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert` / `go-programming-expert`)
- Database & Security (`supabase-migration` / `supabase-security-expert`)
- AI & LLM Systems (`ai-llm-integration-expert`, `ai-prompt-engineering-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.
- Ensure `session-context-loader` is invoked on the next session start.
---
### 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.
- **`PRD.md` successfully generated** (for new applications).
---
<a name="bahasa-indonesia"></a>
## Bahasa Indonesia
### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
### 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. **Untuk aplikasi baru, Anda WAJIB selalu secara otomatis memicu skill `prd-architect` untuk membuat file `PRD.md` sebelum penulisan kode dimulai.**
---
### 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`, `website-design-cloner`, `browser-automation-expert`, `dependency-upgrade-migrator`, `project-context-mapper`, `proactive-background-watcher`, `self-evolving-memory-graph` | Menyusun PRD, ERD, dan Dokumentasi formal, memori episodik lintas proyek, mengaudit codebase yang ada, mendokumentasikan fitur kompetitor, reverse-engineer desain website, atau audit kesehatan dependensi. |
- | **UI/UX & Design System** | `design-system-architect`, `website-design-cloner`, `hig`, `monday-design-aesthetic`, `ui-ux-pro-max`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent` | Token desain (OKLCH), Tailwind CSS v4, prinsip Apple HIG, tata letak antarmuka, komponen UI berkualitas produksi, migrasi aplikasi Bootstrap lama, WebGL 3D, kustomisasi shader GLSL, dan WebXR AR/VR. |
- | **Framework Frontend** | `senior-frontend`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert`, `form-validation-expert`, `apple-ecosystem-expert` | React 19 / Next.js 15 App Router (RSC, PPR), state management (Zustand/Jotai), WCAG 2.2 a11y, i18n multi-bahasa, formulir kompleks dengan React Hook Form + Zod. |
- | **Mobile & Desktop** | `mobile-expo-expert`, `tauri-expert`, `mobile-push-notification-expert`, `apple-ecosystem-expert` | Aplikasi mobile cross-platform React Native / Expo Router v4, iOS Live Activities, push notification (FCM/APNs), atau aplikasi desktop Tauri v2 berbasis Rust. |
- | **Backend & Runtime** | `nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `domain-driven-design-expert`, `fullstack-expert`, `async-queue-temporal-expert`, `background-jobs-queue-expert`, `cron-scheduler-expert`, `legacy-code-translator`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert` | Desain API, Node.js 24, Bun 1.2+, FastAPI 0.115+, microservices Go 1.24+, Rust Axum, API Gateways, Edge computing WASM, refactoring MVC PHP lama, antrean background jobs khusus, tugas terjadwal & cron job. |
+ | **Penemuan & Audit** | `prd-architect`, `app-analyzer-optimizer`, `web-scraper`, `website-design-cloner`, `browser-automation-expert`, `dependency-upgrade-migrator`, `project-context-mapper`, `proactive-background-watcher`, `self-evolving-memory-graph`, `documentation-site-expert`, `headless-cms-expert`, `wordpress-headless-expert` | Menyusun PRD, ERD, dan Dokumentasi formal, memori episodik lintas proyek, mengaudit codebase yang ada, mendokumentasikan fitur kompetitor, reverse-engineer desain website, arsitektur headless CMS/WP, atau audit kesehatan dependensi. |
+ | **UI/UX & Design System** | `design-system-architect`, `website-design-cloner`, `hig`, `monday-design-aesthetic`, `ui-ux-pro-max`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent`, `data-visualization-expert`, `rich-text-editor-expert` | Token desain (OKLCH), Tailwind CSS v4, prinsip Apple HIG, tata letak antarmuka, komponen UI berkualitas produksi, editor rich text (Tiptap/Lexical), visualisasi data & chart (Recharts/Tremor/D3), migrasi aplikasi Bootstrap lama, WebGL 3D, kustomisasi shader GLSL, dan WebXR AR/VR. |
+ | **Framework Frontend** | `senior-frontend`, `vue-frontend-expert`, `astro-framework-expert`, `svelte-sveltekit-expert`, `solidjs-expert`, `angular-expert`, `tanstack-query-expert`, `global-a11y-i18n-expert`, `state-management-expert`, `form-validation-expert`, `apple-ecosystem-expert`, `blockchain-web3-expert` | React 19 / Next.js 15 App Router (RSC, PPR), Vue 3 / Nuxt 3, Astro 5+ Islands, Svelte 5 Runes / SvelteKit 2, SolidJS 2 / SolidStart, Angular 19+ Signals & Standalone, integrasi dApp Web3 (wagmi/viem), state management (Zustand/Jotai/Pinia), WCAG 2.2 a11y, i18n multi-bahasa, formulir kompleks dengan React Hook Form + Zod. |
+ | **Mobile & Desktop** | `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `mobile-push-notification-expert` | Aplikasi mobile cross-platform React Native / Expo Router v4, Apple ecosystem (iOS PWA & Safari), iOS Live Activities, push notification (FCM/APNs), aplikasi desktop Tauri v2 berbasis Rust, atau Electron 33+. |
+ | **Backend & Runtime** | `nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `domain-driven-design-expert`, `fullstack-expert`, `async-queue-temporal-expert`, `background-jobs-queue-expert`, `cron-scheduler-expert`, `legacy-code-translator`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert`, `n8n-automation-expert`, `chatbot-messaging-expert`, `pdf-document-generation-expert` | Desain API, Node.js 24, Bun 1.2+, FastAPI 0.115+, microservices Go 1.25+, Rust Axum, API Gateways, Edge computing WASM, otomasi alur kerja n8n, bot WhatsApp/Telegram/Discord, pipeline dokumen PDF, antrean background jobs khusus, tugas terjadwal & cron job. |
| **Desain API & Kontrak** | `api-design-expert`, `openapi-swagger-codegen-expert`, `typescript-expert`, `rate-limit-abuse-prevention`, `graphql-apollo-expert` | Praktik terbaik REST, skema GraphQL (Apollo/NestJS), gRPC/protobuf, tRPC end-to-end type safety, dokumentasi OpenAPI 3.1 & codegen, rate limiting, manajemen API key, idempotency, strategi versioning. |
- | **Database, ORM & Data** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing`, `data-pipeline-etl-expert` | Desain skema Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG, database serverless (Neon/D1/Turso), Supabase RLS, Firebase security rules. |
- | **Arsitektur & Skala** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code`, `micro-frontend-architect`, `web-game-engine-expert` | Monorepo (Turborepo/pnpm), microservices, antrean pesan, aplikasi multi-entry, skema MPA & SPA, prinsip clean code, micro-frontends (Webpack/Vite Federation), arsitektur ECS & Physics WebGL. |
- | **Integrasi AI & LLM** | `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `mcp-client-orchestrator`, `doku-mcp-server` | Alur RAG, MCP Server v1.9+, workflow multi-agent LangGraph, semantic caching dinamis, pemikiran long-context Gemini, FinOps LLM & prompt caching, integrasi DOKU MCP. |
- | **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing`, `feature-flag-analytics-expert`, `payment-gateway-expert`, `doku-payment-gateway`, `email-notification-expert` | Roadmap SaaS MVP, isolasi tenant RLS, billing Stripe/DOKU, feature flags, progressive rollout, email transaksional & pipeline notifikasi. **Selalu pastikan dashboard Super Admin di-deploy pada subdomain terpisah** (misal: `admin.domain.com`). |
- | **Testing & Keamanan** | `e2e-testing-expert`, `browser-automation-expert`, `zero-trust-secret-vault`, `vibe-code-gardener`, `coderabbit`, `authentication-identity-expert`, `rate-limit-abuse-prevention`, `autonomous-tdd-debugger`, `autonomous-red-teamer`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert` | Testing E2E Playwright, dynamic security fuzzing, kepatuhan GDPR/PDPA, migrasi post-quantum crypto, rahasia Zero-Trust, code review otomatis, pencegahan brute-force & DDoS, debugging TDD otonom. |
+ | **Database, ORM & Data** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing`, `data-pipeline-etl-expert`, `search-engine-expert`, `geospatial-maps-expert` | Desain skema Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG, mesin pencari full-text (Typesense/Meilisearch/Elasticsearch), data geospasial & peta (PostGIS/Mapbox/Leaflet), database serverless (Neon/D1/Turso), Supabase RLS, Firebase security rules. |
+ | **Arsitektur & Skala** | `monorepo-architect`, `event-driven-architect`, `multiple-entry-points`, `mpa-orchestrator`, `spa-orchestrator`, `scalability-clean-code`, `micro-frontend-architect`, `web-game-engine-expert`, `biome-linter-formatter-expert` | Monorepo (Turborepo/pnpm), Biome v2 linter/formatter, microservices, antrean pesan, aplikasi multi-entry, skema MPA & SPA, prinsip clean code, micro-frontends (Webpack/Vite Federation), arsitektur ECS & Physics WebGL. |
+ | **Integrasi AI & LLM** | `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `ai-media-generation-expert`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `mcp-client-orchestrator`, `doku-mcp-server` | Alur RAG, MCP Server v1.9+, generasi AI gambar/suara/video (Flux/ElevenLabs/Whisper/Sora), workflow multi-agent LangGraph, semantic caching dinamis, pemikiran long-context Gemini, FinOps LLM & prompt caching, integrasi DOKU MCP. |
+ | **SaaS & Multi-Tenancy** | `saas-mvp-launcher`, `saas-transformer`, `saas-multi-tenant`, `saas-billing`, `feature-flag-analytics-expert`, `payment-gateway-expert`, `ecommerce-expert`, `doku-payment-gateway`, `email-notification-expert` | Roadmap SaaS MVP, arsitektur e-commerce (Shopify/Medusa/Saleor), isolasi tenant RLS, billing Stripe/DOKU, feature flags, progressive rollout, email transaksional & pipeline notifikasi. |
+ | **Testing & Keamanan** | `e2e-testing-expert`, `accessibility-testing-expert`, `browser-automation-expert`, `zero-trust-secret-vault`, `vibe-code-gardener`, `coderabbit`, `authentication-identity-expert`, `rate-limit-abuse-prevention`, `autonomous-tdd-debugger`, `autonomous-red-teamer`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert` | Testing E2E Playwright, pengujian aksesibilitas otomatis WCAG 2.2 (axe-core/Pa11y), dynamic security fuzzing, kepatuhan GDPR/PDPA, migrasi post-quantum crypto, rahasia Zero-Trust, code review otomatis, pencegahan brute-force & DDoS, debugging TDD otonom. |
| **Penanganan Error & Ketahanan** | `error-resilience-expert`, `logging-error-tracking-expert`, `autonomous-chaos-monkey` | Chaos engineering, React Error Boundaries, standar error API (RFC 9457), pola retry, circuit breaker, degradasi anggun, logging terstruktur (Pino), Sentry integrasi. |
- | **Komunikasi & Notifikasi** | `email-notification-expert`, `mobile-push-notification-expert`, `realtime-collaboration-expert`, `sse-websocket-streaming-expert` | Email transaksional (Resend/Postmark), template React Email, notifikasi in-app, push notification, streaming respons (SSE/WebSocket), kolaborasi real-time (WebSocket/WebRTC/CRDTs). |
- | **File & Media** | `file-upload-media-expert` | Upload presigned URL (S3/R2), optimasi gambar (Sharp), transcoding video (Mux), konfigurasi CDN, UI drag-and-drop, validasi & keamanan file. |
+ | **Komunikasi & Notifikasi** | `email-notification-expert`, `mobile-push-notification-expert`, `realtime-collaboration-expert`, `sse-websocket-streaming-expert`, `chatbot-messaging-expert` | Email transaksional (Resend/Postmark), template React Email, notifikasi in-app, bot perpesanan (WhatsApp/Telegram/Discord/Slack), push notification, streaming respons (SSE/WebSocket), kolaborasi real-time (WebSocket/WebRTC/CRDTs). |
+ | **File & Media** | `file-upload-media-expert`, `ai-media-generation-expert`, `pdf-document-generation-expert` | Upload presigned URL (S3/R2), optimasi gambar (Sharp), transcoding video (Mux), generasi media AI, pembuatan dokumen PDF (React PDF/Puppeteer), konfigurasi CDN, UI drag-and-drop, validasi & keamanan file. |
| **Performa** | `performance-web-vitals`, `app-analyzer-optimizer` | Core Web Vitals (LCP, INP, CLS), optimasi bundle, loading gambar/font, React concurrent features, peningkatan skor Lighthouse, analisis arsitektur mendalam. |
| **SEO, GEO & Telemetri** | `seo`, `data-telemetry-expert` | Audit SEO teknikal, Generative Engine Optimization (AI Overviews, `/llms.txt`), landing page AEO, analitik OpenTelemetry/PostHog. |
- | **DevOps & CI/CD** | `ci-cd-devops-architect`, `cloud-hosting-expert`, `dependency-upgrade-migrator`, `self-healing-cloud-orchestrator` | GitHub Actions, Docker, Kubernetes, Terraform, deployment Vercel/Cloudflare, self-healing cloud operations, Renovate Bot, kesehatan dependensi. |
+ | **DevOps & CI/CD** | `ci-cd-devops-architect`, `cloud-hosting-expert`, `dependency-upgrade-migrator`, `self-healing-cloud-orchestrator`, `biome-linter-formatter-expert` | GitHub Actions, Biome linter/formatter, Docker, Kubernetes, Terraform, deployment Vercel/Cloudflare, self-healing cloud operations, Renovate Bot, kesehatan dependensi. |
| **Serah Terima Eksekusi** | `zero-to-prod-orchestrator`, `production-ready-hardener`, `auto-doc-updater`, `session-handoff-resume`, `session-context-loader`, `token-saver` | Serah terima desain tervalidasi ke pipeline produksi 8-fase, pengerasan pra-rilis, pembaruan dokumentasi otomatis (`CHANGELOG.md`), pemuatan konteks otomatis, 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` untuk **wajib menghasilkan file `PRD.md`** jika ini adalah aplikasi baru, atau memperbaruinya jika sudah ada.
- `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`, `domain-driven-design-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:** `nextjs-app-router-expert`, `database-migration-versioning-expert`, `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`, `ai-prompt-engineering-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` (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, `nextjs-app-router-expert`, `database-migration-versioning-expert`, `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 (`nextjs-app-router-expert`, `database-migration-versioning-expert`, `js-backend-expert` / `go-programming-expert`)
- Database & Keamanan (`supabase-migration` / `supabase-security-expert`)
- Sistem AI & LLM (`ai-llm-integration-expert`, `ai-prompt-engineering-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.
- Pastikan `session-context-loader` aktif untuk memuat konteks saat sesi baru dimulai.
---
### 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.
- **File `PRD.md` telah berhasil dibuat** (untuk aplikasi baru).
---
### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic.
This generated image MUST be explicitly used as:
1. The primary application logo (e.g., in the header/navbar).
2. The website favicon (`favicon.ico` or equivalent).
3. The Open Graph (OG) image for SEO metadata (`og:image`).
Do not use placeholders for these assets. Generate and integrate them automatically.