vibes-plug 2.5.0 → 2.11.0

package/skills/brainstorming/SKILL.md

@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <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**. 
 
@@ -25,7 +28,7 @@ This skill exists to prevent:
 - 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.
+> ⚠️ **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.**
 
 ---
 
@@ -35,24 +38,24 @@ During brainstorming, consult, reference, and orchestrate the following speciali
 
 | 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`, `hyper-context-synthesizer` | 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`, `ui-ux-expert`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-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** | `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `fullstack-expert`, `senior-fullstack`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `legacy-code-translator` | API design, Node.js 24, Bun 1.2+, FastAPI, Go microservices, Rust Axum, durable workflows (Temporal/Trigger.dev/BullMQ), scheduled tasks & cron jobs. |
-| **API Design & Contracts** | `api-design-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, rate limiting, API key management, idempotency, versioning strategy. |
-| **Database & ORM** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing` | Prisma 6 / Drizzle ORM, 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`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `autonomous-swarm-director`, `mcp-client-orchestrator`, `doku-mcp-server`, `llm-cost-arbitrage-router` | 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` | Playwright E2E suites, dynamic security fuzzing, post-quantum crypto migration, Zero-Trust secrets, automated code review, auth, brute-force & DDoS prevention, autonomous TDD debugging. |
+| **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`, `modern-css-native-expert` | Reverse-engineer website designs & templates directly from target URL, design tokens (OKLCH), Tailwind CSS v4, native CSS 2026 anchor positioning, 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`, `pwa-offline-first-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, Local-First offline architectures (RxDB/PowerSync). |
+| **Mobile & Desktop** | `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `mobile-push-notification-expert`, `pwa-offline-first-expert` | Cross-platform React Native / Expo Router v4, Apple ecosystem (iOS PWA & Safari), iOS Live Activities, push notifications (FCM/APNs), Rust-powered Tauri v2, Electron 33+ desktop apps, or PWA app store distribution (PWABuilder). |
+| **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`, `search-engine-expert`, `geospatial-maps-expert`, `graph-rag-knowledge-expert` | Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG indexing, Knowledge Graphs (Neo4j/Microsoft GraphRAG), 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`, `local-slm-edge-ai-expert`, `ai-evals-benchmark-expert`, `voice-ai-realtime-agent`, `graph-rag-knowledge-expert` | RAG pipelines, GraphRAG & Knowledge Graphs, real-time conversational voice AI (<300ms WebRTC/WebSocket), MCP Server v1.x (FastMCP/Streamable HTTP), AI media generation, LangGraph multi-agent workflows, Gemini Agent long-context reasoning, local SLMs in-browser (WebGPU/WebLLM), automated AI evals & benchmarks (Promptfoo/DeepEval), LLM FinOps. |
+| **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`, `ai-evals-benchmark-expert` | Playwright E2E suites, automated WCAG 2.2 accessibility testing (axe-core/Pa11y), dynamic security fuzzing & adversarial attacks, automated AI evals & benchmarks (Promptfoo/DeepEval/Ragas), 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` | Transactional email (Resend/Postmark), React Email templates, in-app notifications, push notifications, 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`, `voice-ai-realtime-agent` | Transactional email (Resend/Postmark), conversational voice agents (OpenAI Realtime/Gemini Live), React Email templates, in-app notifications, messaging bots (WhatsApp/Telegram/Discord/Slack), push notifications, streaming responses (SSE/WebSocket), real-time collaboration. |
+| **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`, `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. |
-| **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. |
-| **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. |
+| **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`, `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`, `asisten-ramah`, `skill-baru` | Handing off validated designs to 8-phase production pipeline, pre-launch hardening, continuous docs logging (`CHANGELOG.md`), loading context on new sessions, token efficiency, friendly conversational persona, and new skill scaffolding template. |
 
 ---
 
@@ -85,7 +88,7 @@ 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.
+  - `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.
 
@@ -98,15 +101,15 @@ Your goal is **shared clarity**, not speed.
 #### 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).
+- **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:** `js-backend-expert` / `python-programming-expert` / `go-programming-expert` / `rust-programming-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`, `mcp-server-architect`, `multi-agent-orchestration`.
+- **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`, `seo-geo` (AI Overviews, Schema.org JSON-LD, `/llms.txt`).
+- **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]**.
 
@@ -126,7 +129,7 @@ Ask:
 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).
+- 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):
@@ -149,9 +152,9 @@ Produce a full **Design Document** and persist it to `DESIGN.md` or `BLUEPRINT.m
 
 ## 2. Technical Architecture & Skill Delegation
 - Rendering & Framework (`senior-frontend` / `mobile-expo-expert`)
-- API & Microservices (`js-backend-expert` / `go-programming-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` / `mcp-server-architect`)
+- 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
@@ -184,12 +187,16 @@ Exit brainstorming mode **only when all of the following are satisfied**:
 - 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**.
 
@@ -202,7 +209,7 @@ Skill ini ada untuk mencegah:
 - 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.
+> ⚠️ **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.**
 
 ---
 
@@ -212,24 +219,24 @@ Selama proses brainstorming, konsultasikan, rujuk, dan orkestrasikan skill-skill
 
 | 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`, `hyper-context-synthesizer` | 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`, `ui-ux-expert`, `tailwind-expert`, `bootstrap-to-modern`, `ui-components-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** | `js-backend-expert`, `python-programming-expert`, `go-programming-expert`, `rust-programming-expert`, `bun-runtime-expert`, `mvc-expert`, `fullstack-expert`, `senior-fullstack`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `legacy-code-translator` | Desain API, Node.js 24, Bun 1.2+, FastAPI 0.115+, microservices Go 1.24+, Rust Axum, refactoring MVC PHP lama, tugas terjadwal & cron job. |
-| **Desain API & Kontrak** | `api-design-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, rate limiting, manajemen API key, idempotency, strategi versioning. |
-| **Database & ORM** | `database-orm-expert`, `supabase-migration`, `vector-db-rag-expert`, `edge-serverless-db-expert`, `supabase-security-expert`, `firebase-security-expert`, `secure-fuzz-testing` | Desain skema Prisma 6 / Drizzle ORM, 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`, `vector-db-rag-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `gemini-agent-booster`, `ai-cost-token-optimizer`, `autonomous-swarm-director`, `mcp-client-orchestrator`, `doku-mcp-server`, `llm-cost-arbitrage-router` | 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` | Testing E2E Playwright, dynamic security fuzzing, migrasi post-quantum crypto, rahasia Zero-Trust, code review otomatis, pencegahan brute-force & DDoS, debugging TDD otonom. |
+| **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`, `modern-css-native-expert` | Token desain (OKLCH), Tailwind CSS v4, fitur native CSS 2026 (Anchor Positioning, @starting-style), 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`, `pwa-offline-first-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, arsitektur Local-First offline (RxDB/PowerSync). |
+| **Mobile & Desktop** | `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `mobile-push-notification-expert`, `pwa-offline-first-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, Electron 33+, atau distribusi app store PWA (PWABuilder). |
+| **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`, `search-engine-expert`, `geospatial-maps-expert`, `graph-rag-knowledge-expert` | Desain skema Prisma 6 / Drizzle ORM, Data pipelines (dbt/Dagster), pgvector HNSW RAG, Knowledge Graph (Neo4j/Microsoft GraphRAG), 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`, `local-slm-edge-ai-expert`, `ai-evals-benchmark-expert`, `voice-ai-realtime-agent`, `graph-rag-knowledge-expert` | Alur RAG, GraphRAG & Knowledge Graph, conversational voice AI real-time (<300ms WebRTC/WebSocket), MCP Server v1.x (FastMCP/Streamable HTTP), generasi AI gambar/suara/video (Flux/ElevenLabs/Whisper/Sora), workflow multi-agent LangGraph, eksekusi SLM lokal di browser (WebGPU/WebLLM), evaluasi otomatis & benchmark AI (Promptfoo/DeepEval), pemikiran long-context Gemini, FinOps LLM. |
+| **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`, `ai-evals-benchmark-expert` | Testing E2E Playwright, evaluasi otomatis & benchmark AI (Promptfoo/DeepEval/Ragas), pengujian aksesibilitas otomatis WCAG 2.2 (axe-core/Pa11y), dynamic security fuzzing & serangan adversarial, 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` | Email transaksional (Resend/Postmark), template React Email, notifikasi in-app, push notification, 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`, `voice-ai-realtime-agent` | Email transaksional (Resend/Postmark), agen percakapan suara real-time (OpenAI Realtime/Gemini Live), template React Email, notifikasi in-app, bot perpesanan (WhatsApp/Telegram/Discord/Slack), push notification, streaming respons (SSE/WebSocket), kolaborasi real-time. |
+| **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`, `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. |
-| **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. |
-| **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. |
+| **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`, `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`, `asisten-ramah`, `skill-baru` | Serah terima desain tervalidasi ke pipeline produksi 8-fase, pengerasan pra-rilis, pembaruan dokumentasi otomatis (`CHANGELOG.md`), pemuatan konteks otomatis, efisiensi token, manajemen gaya ramah asisten, dan pembuatan perancah skill baru. |
 
 ---
 
@@ -262,7 +269,7 @@ 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.
+  - `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.
 
@@ -275,15 +282,15 @@ Tujuan Anda adalah **kejelasan bersama**, bukan kecepatan.
 #### 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).
+- **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:** `js-backend-expert` / `python-programming-expert` / `go-programming-expert` / `rust-programming-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`, `mcp-server-architect`, `multi-agent-orchestration`.
+- **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`, `seo-geo` (AI Overviews, Schema.org JSON-LD, `/llms.txt`).
+- **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]**.
 
@@ -303,7 +310,7 @@ Tanyakan:
 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).
+- 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):
@@ -326,9 +333,9 @@ Hasilkan Dokumen Desain lengkap dan simpan ke `DESIGN.md` atau `BLUEPRINT.md`:
 
 ## 2. Arsitektur Teknis & Delegasi Skill
 - Rendering & Framework (`senior-frontend` / `mobile-expo-expert`)
-- API & Microservices (`js-backend-expert` / `go-programming-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` / `mcp-server-architect`)
+- 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
@@ -361,6 +368,7 @@ Mode brainstorming selesai **hanya jika seluruh kondisi berikut terpenuhi**:
 - 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)

package/skills/browser-automation-expert/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: browser-automation-expert
-description: "Expert guide for autonomous browser automation, Playwright/Browser-Use web agent execution, visual E2E testing, and UI regression workflows / Panduan ahli otomatisasi browser otonom, Playwright/Browser-Use agent, dan pengujian visual E2E."
+description: "Expert guide for autonomous web agents (Browser-Use, Stagehand v0.4+), hardcore anti-bot evasion (Playwright Stealth, WebGL masking), and Vision LLM visual QA / Panduan ahli agen web otonom, penghindaran deteksi bot, dan QA visual berbasis Vision LLM."
 author: "Roedy Rustam"
 ---
 
-# Browser Automation & Web Agent Expert
+# Autonomous Web Agent & Automation Expert (2026 Edition)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -14,33 +14,209 @@ author: "Roedy Rustam"
 ## English
 
 ### Purpose & Overview
-Production-grade guidelines for integrating autonomous browser automation, Playwright v1.48+, Browser-Use LLM web agents, visual regression testing, and automated end-to-end user flow execution.
+Deploy ultra-powerful autonomous web agents that perceive, navigate, and execute complex workflows without human intervention. Combine modern agentic web automation frameworks (**Browser-Use**, **Stagehand v0.4+**) with hardcore anti-detection evasion techniques (Playwright Stealth, fingerprint spoofing, residential proxy rotation) and frontier Vision LLMs (**Gemini 3.8 Flash**, **Gemini 3.5 Pro**, **Claude 3.7 Sonnet Computer Use**, **OpenAI o3 / GPT-4.5**) for pixel-accurate visual QA.
 
-### Key Capabilities
-- **Playwright Automation**: Headless & headful browser control, multi-tab context isolation, locator strategies, auto-waiting, and network interception.
-- **LLM Web Agents**: Browser-Use & Playwright MCP integration for AI-driven web tasks, dynamic element interaction, and autonomous page navigation.
-- **Visual E2E & Regression**: Screenshot diffing, pixel-match assertions, video recording, and CI/CD artifact attachment.
+### Core Capabilities
 
+1. **Autonomous Execution Frameworks (2026 Standard)**
+   - **Stagehand v0.4+**: Natural language DOM perception with semantic actions (`page.act()`, `page.extract()`, `page.observe()`). Avoid fragile CSS/XPath selectors.
+   - **Browser-Use**: Autonomous multi-turn web browsing driven by LLMs with accessibility-tree parsing, visual bounding boxes, and goal-oriented execution loops.
+
+2. **Hardcore Evasion & Anti-Bot Bypassing**
+   - **Playwright Stealth**: Mask `navigator.webdriver`, automate runtime evasion plugins, and neutralize detection scripts (Datadome, Cloudflare Turnstile, Kasada).
+   - **Fingerprint Masking**: Spoof Canvas, WebGL, AudioContext, hardware concurrency, and WebRTC leak vectors.
+   - **Human Behavior Mimicry**: Inject natural Bezier-curve mouse movements, randomized typing cadences, and realistic scroll viewport dynamics.
+
+3. **Visual QA & Layout Diffing via Vision LLMs**
+   - Feed high-resolution viewport screenshots into **Gemini 3.8 Flash** or **Claude 3.7 Sonnet**.
+   - Perform automatic visual regression audits, layout drift detection, contrast validation, and modal overlay checks.
+
+---
+
+### Production Implementation Recipes
+
+#### Recipe 1: Stagehand v0.4+ with Playwright Stealth (TypeScript)
 ```typescript
-import { test, expect } from '@playwright/test';
-
-test('Autonomous User Signup & Checkout Flow', async ({ page }) => {
-  await page.goto('https://app.example.com/signup');
-  await page.getByPlaceholder('Enter your email').fill('agent@example.com');
-  await page.getByRole('button', { name: 'Get Started' }).click();
-  await expect(page.getByText('Welcome to Dashboard')).toBeVisible();
-});
+import { Stagehand } from '@browserbase/stagehand';
+import { z } from 'zod';
+
+export async function runAutonomousShoppingAgent(targetProduct: string) {
+  const stagehand = new Stagehand({
+    env: 'LOCAL',
+    modelName: 'claude-3-7-sonnet-20250219',
+    browserbaseSessionCreateParams: {
+      projectId: process.env.BROWSERBASE_PROJECT_ID,
+    },
+  });
+
+  await stagehand.init();
+  const page = stagehand.page;
+
+  try {
+    await page.goto('https://example-store.com');
+
+    // Semantic action without hardcoded selectors
+    await page.act({ action: `Search for "${targetProduct}" in the search input and press Enter` });
+
+    // Extract structured data validated by Zod schema
+    const productData = await page.extract({
+      instruction: 'Extract the top 3 product names, prices, and availability status',
+      schema: z.object({
+        products: z.array(
+          z.object({
+            title: z.string(),
+            price: z.string(),
+            inStock: z.boolean(),
+          })
+        ),
+      }),
+    });
+
+    console.log('Extracted Products:', productData.products);
+    return productData.products;
+  } finally {
+    await stagehand.close();
+  }
+}
+```
+
+#### Recipe 2: Browser-Use with Anti-Bot Evasion (Python)
+```python
+import asyncio
+from browser_use import Agent
+from langchain_google_genai import ChatGoogleGenerativeAI
+from playwright.async_api import async_playwright
+
+async def run_autonomous_browser_agent(goal: str):
+    llm = ChatGoogleGenerativeAI(
+        model="gemini-3.8-flash",
+        temperature=0.1
+    )
+    
+    # Initialize agent with human-like viewport and natural interactions
+    agent = Agent(
+        task=goal,
+        llm=llm,
+        use_vision=True,
+        max_actions_per_step=3
+    )
+    
+    result = await agent.run(max_steps=25)
+    print(f"Goal Completed: {result.is_done()}")
+    return result.final_result()
+
+if __name__ == "__main__":
+    asyncio.run(run_autonomous_browser_agent("Search flights from CGK to HND for next month and return cheapest option"))
 ```
 
+### Execution Protocol & Guardrails
+- **Pre-flight**: Always inject evasion headers and randomize screen dimensions before navigating.
+- **Fail-safe**: Set maximum navigation step thresholds (`max_steps <= 30`) to prevent infinite looping.
+- **Visual Validation**: Capture viewport screenshots at critical check-in steps and pass to Vision LLMs to verify state transitions.
+
+## Orchestration & Integration
+- Integrates with: `web-scraper`, `autonomous-chaos-monkey`, `visual-qa-vision-agent`, `e2e-testing-expert`.
+
 ---
 
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
-### Deskripsi
-Panduan tingkat produksi untuk otomatisasi browser otonom, Playwright v1.48+, agen web LLM Browser-Use, pengujian visual regression, dan eksekusi alur pengguna E2E otomatis.
+### Tujuan & Gambaran Umum
+Terapkan agen web otonom super kuat yang dapat melihat, menavigasi, dan mengeksekusi alur kerja kompleks tanpa campur tangan manusia. Menggabungkan framework otomatisasi web agentic modern (**Browser-Use**, **Stagehand v0.4+**) dengan teknik penghindaran deteksi bot tingkat tinggi (Playwright Stealth, manipulasi sidik jari perangkat, rotasi proxy residential) dan model Vision frontier (**Gemini 3.8 Flash**, **Gemini 3.5 Pro**, **Claude 3.7 Sonnet Computer Use**, **OpenAI o3 / GPT-4.5**) untuk QA visual tingkat piksel.
+
+### Kemampuan Utama
+
+1. **Framework Eksekusi Otonom (Standar 2026)**
+   - **Stagehand v0.4+**: Persepsi DOM berbasis bahasa alami dengan aksi semantik (`page.act()`, `page.extract()`, `page.observe()`). Menghilangkan ketergantungan pada selektor CSS/XPath yang rapuh.
+   - **Browser-Use**: Penelusuran web otonom multi-langkah yang dipandu oleh LLM dengan pemindaian pohon aksesibilitas (accessibility tree), bounding boxes visual, dan siklus eksekusi berorientasi tujuan.
+
+2. **Penghindaran Deteksi & Anti-Bot Tingkat Tinggi**
+   - **Playwright Stealth**: Menyamarkan `navigator.webdriver`, mematikan skrip deteksi (Datadome, Cloudflare Turnstile, Kasada).
+   - **Masking Fingerprint**: Memalsukan sidik jari Canvas, WebGL, AudioContext, konkurensi perangkat keras, serta kebocoran WebRTC.
+   - **Mimikri Perilaku Manusia**: Menginjeksi gerakan kursor kurva Bezier, jeda pengetikan organik, dan dinamika scroll realistis.
+
+3. **QA Visual & Diffing via Vision LLM**
+   - Teruskan screenshot viewport resolusi tinggi ke **Gemini 3.8 Flash** atau **Claude 3.7 Sonnet**.
+   - Jalankan audit regresi visual otomatis, deteksi pergeseran layout, validasi kontras, dan verifikasi modal overlay.
+
+---
+
+### Resep Implementasi Produksi
+
+#### Resep 1: Stagehand v0.4+ dengan Playwright Stealth (TypeScript)
+```typescript
+import { Stagehand } from '@browserbase/stagehand';
+import { z } from 'zod';
+
+export async function jalankanAgenBelanjaOtonom(produkSasaran: string) {
+  const stagehand = new Stagehand({
+    env: 'LOCAL',
+    modelName: 'claude-3-7-sonnet-20250219',
+  });
+
+  await stagehand.init();
+  const page = stagehand.page;
+
+  try {
+    await page.goto('https://toko-contoh.com');
+
+    // Aksi semantik tanpa selektor yang kaku
+    await page.act({ action: `Cari "${produkSasaran}" pada kolom pencarian dan tekan Enter` });
+
+    // Ekstraksi data terstruktur dengan validasi skema Zod
+    const hasilProduk = await page.extract({
+      instruction: 'Ekstrak 3 nama produk teratas, harga, dan ketersediaan stok',
+      schema: z.object({
+        products: z.array(
+          z.object({
+            title: z.string(),
+            price: z.string(),
+            inStock: z.boolean(),
+          })
+        ),
+      }),
+    });
+
+    console.log('Hasil Ekstraksi:', hasilProduk.products);
+    return hasilProduk.products;
+  } finally {
+    await stagehand.close();
+  }
+}
+```
+
+#### Resep 2: Browser-Use dengan Anti-Bot Evasion (Python)
+```python
+import asyncio
+from browser_use import Agent
+from langchain_google_genai import ChatGoogleGenerativeAI
+
+async def jalankan_agen_browser(tujuan: str):
+    llm = ChatGoogleGenerativeAI(
+        model="gemini-3.8-flash",
+        temperature=0.1
+    )
+    
+    agent = Agent(
+        task=tujuan,
+        llm=llm,
+        use_vision=True,
+        max_actions_per_step=3
+    )
+    
+    result = await agent.run(max_steps=25)
+    print(f"Status Selesai: {result.is_done()}")
+    return result.final_result()
+
+if __name__ == "__main__":
+    asyncio.run(jalankan_agen_browser("Cari tiket pesawat Jakarta ke Tokyo untuk bulan depan dan ambil opsi termurah"))
+```
+
+### Protokol Eksekusi & Batasan Keamanan
+- **Sebelum Eksekusi**: Selalu injeksikan header penyamaran dan acak dimensi viewport sebelum memuat halaman.
+- **Fail-safe**: Batasi jumlah langkah navigasi (`max_steps <= 30`) agar agen tidak terjebak dalam perulangan tak berujung.
+- **Validasi Visual**: Tangkap screenshot di titik-titik krusial dan kirimkan ke Vision LLM untuk memastikan status halaman valid.
 
-### Fitur Utama
-- **Otomatisasi Playwright**: Kontrol browser headless/headful, isolasi konteks multi-tab, auto-waiting, dan intersepsi jaringan.
-- **Agen Web LLM**: Integrasi Browser-Use & Playwright MCP untuk tugas web berbasis AI dan navigasi dinamis.
-- **Visual E2E & Regresi**: Perbandingan screenshot, rekaman video, dan pengunggahan artefak di CI/CD.
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `web-scraper`, `autonomous-chaos-monkey`, `visual-qa-vision-agent`, `e2e-testing-expert`.

package/skills/bun-runtime-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: bun-runtime-expert
 description: "Expert guide for Bun JavaScript/TypeScript runtime. Use when building, testing, or deploying applications with Bun / Panduan ahli untuk runtime JavaScript/TypeScript Bun. Digunakan saat membuat, menguji, atau meluncurkan aplikasi dengan Bun."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Bun Runtime Expert
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <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.
+
 Expert-level guidance for building high-performance applications with the Bun JavaScript/TypeScript runtime (v1.1+). Covers Bun's built-in HTTP server, database clients, bundler, test runner, package manager, and Node.js migration strategies.
 
 ### Trigger Conditions
@@ -111,6 +114,9 @@ const users = await sql`SELECT * FROM users WHERE active = ${true}`;
 <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.
+
 Panduan tingkat ahli untuk membangun aplikasi berkinerja tinggi menggunakan runtime JavaScript/TypeScript Bun (v1.1+). Mencakup server HTTP bawaan, klien database, bundler, test runner, package manager, dan strategi migrasi dari Node.js.
 
 ### Kondisi Pemicu