vibes-plug 2.11.0 → 2.14.1

package/skills/prd-architect/SKILL.md

@@ -1,207 +1,182 @@
----
-name: prd-architect
-description: "Mandatory guardrail skill that enforces creating a comprehensive Product Requirements Document (PRD), ERD, and Documentation before generating code for new projects / Skill khusus untuk memaksa pembuatan Product Requirements Document (PRD), ERD, dan Dokumentasi secara otomatis sebelum mulai coding pada setiap proyek baru."
+---
+name: prd-architect
+description: "Updated to cover both pre-code PRD/ERD/Docs generation AND post-code continuous documentation updates / Diperbarui untuk mencakup pembuatan PRD/ERD/Docs pra-kode DAN pembaruan dokumentasi kontinu pasca-kode."
 author: "Roedy Rustam"
----
-
-# PRD Architect (2026 — PRD-as-Code Edition)
-
-[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.
-
-### Description
-Mandatory guardrail that enforces creating a comprehensive Product Requirements Document (PRD), Entity Relationship Diagram (ERD), and general Documentation before generating code for any new project. Introduces **PRD-as-Code** — a structured Markdown format designed to be machine-readable by AI agents and version-controlled alongside code.
-
-### Trigger Conditions
-- A user requests building a new application, SaaS, or major feature from scratch.
-- There is no existing PRD, BLUEPRINT.md, or product specification.
-- The project scope is unclear or ambiguous.
-- The user says "build me...", "create a...", "I want to make..." for a new project.
-
-### Why PRD Before Code
-1. **Prevents scope creep**: Defines boundaries before any line of code is written.
-2. **Aligns AI output**: AI agents generate significantly better code when given a structured spec.
-3. **Enables traceability**: Each implemented feature can be traced back to a PRD requirement.
-4. **Reduces rework**: Catches architectural decisions early (DB choice, auth flow, integrations).
-5. **Version-controlled spec**: PRD lives in the repo — changes are tracked and reviewable.
-
-### PRD-as-Code Template
-
-```markdown
-# Product Requirements Document (PRD)
-**Project**: [Project Name]
-**Version**: 1.0.0
-**Status**: Draft | In Review | Approved
-**Created**: YYYY-MM-DD
-**Last Updated**: YYYY-MM-DD
-
----
-
-## 1. Executive Summary
-[2-3 sentences: What is this product? Who is it for? What problem does it solve?]
-
-## 2. Problem Statement
-**Problem**: [Clear description of the problem being solved]
-**Target Users**: [Specific user segments]
-**Current Pain Points**:
-- Pain point 1
-- Pain point 2
-
-## 3. Goals & Success Metrics
-| Goal | Metric | Target |
-|---|---|---|
-| Reduce churn | Monthly churn rate | < 5% |
-| Improve activation | D7 retention | > 40% |
-
-## 4. User Personas
-### Persona 1: [Name]
-- **Role**: [Job title / context]
-- **Goals**: [What they want to achieve]
-- **Frustrations**: [What currently doesn't work]
-- **Key Behaviors**: [How they'll use this product]
-
-## 5. Feature Requirements
-
-### MVP Features (Must Have — v1.0)
-- [ ] **[Feature Name]**: [Description. Acceptance criteria: ...]
-- [ ] **Authentication**: Email/password + Google OAuth. PKCE flow. Session-based.
-- [ ] **Dashboard**: Overview of [key metrics]. Real-time updates via SSE.
-
-### Phase 2 Features (Should Have — v1.x)
-- [ ] **[Feature Name]**: [Description]
-
-### Future Features (Nice to Have — v2.0+)
-- [ ] **[Feature Name]**: [Description]
-
-## 6. Technical Architecture
-
-### Stack Decision
-| Layer | Technology | Rationale |
-|---|---|---|
-| Frontend | Next.js 15 + React 19 | SSR, App Router, RSC |
-| Backend | Hono + Bun | Type-safe RPC, edge-ready |
-| Database | PostgreSQL + Drizzle ORM | ACID, RLS multi-tenant |
-| Auth | Supabase Auth v3 | PKCE, OAuth, MFA |
-| Payments | Stripe / Polar.sh | [Reason for choice] |
-| Deployment | Vercel + Railway | [Reason for choice] |
-
-### Architecture Decisions (ADRs)
-- **ADR-001**: [Decision title] — [Decision made and why]
-- **ADR-002**: Multi-tenancy via RLS — Shared schema with Supabase RLS for isolation
-
-### Multi-Entry Points (if SaaS)
-| Entry Point | Domain | Purpose |
-|---|---|---|
-| Landing Page | `myapp.com` | Marketing, conversion |
-| SaaS App | `app.myapp.com` | Core product |
-| Super Admin | `admin.myapp.com` | Cross-tenant management |
-| API | `api.myapp.com` | Backend (internal + public) |
-
-## 7. Data Model (High-Level)
-```
-users ──belongs_to──> workspaces (via workspace_members)
-workspaces ──has_many──> projects
-projects ──has_many──> tasks
-```
-
-## 8. User Flows
-### Primary Flow: [Name]
-1. User [action 1]
-2. System [response 1]
-3. User [action 2]
-4. System [response 2] → Success state
-
-## 9. Non-Functional Requirements
-| Requirement | Target |
-|---|---|
-| Performance | LCP < 2.5s, INP < 200ms |
-| Availability | 99.9% uptime |
-| Security | SOC 2 Type II compliant |
-| Scalability | Support 10K concurrent users |
-
-## 10. Out of Scope
-- [Explicitly excluded feature or integration]
-- [Another explicitly excluded item]
-
-## 11. Open Questions
-- [ ] [Question that needs a decision before development]
-- [ ] Should we support SSO (SAML) in v1 or defer to v2?
-
-## 12. Approval & Sign-off
-| Stakeholder | Role | Status |
-|---|---|---|
-| [Name] | Product | ✅ Approved |
-| [Name] | Engineering | ⏳ Pending |
-```
-
-### Enforcement Protocol
-1. **Detect**: When user requests a new project build.
-2. **Pause**: Do NOT generate any code.
-3. **Generate PRD, ERD, Docs & Roadmap**: Automatically create a pre-filled PRD draft (`PRD.md`), an Entity Relationship Diagram (`ERD.md`), general Documentation (`DOKUMENTASI.md`), and a Roadmap document (`ROADMAP.md` or `PROGRESS.md`) based on the user's description.
-4. **Review**: Present to user for approval/edits.
-5. **Confirm**: Once the PRD, ERD, Documentation, and Roadmap are approved, proceed to `zero-to-prod-orchestrator` Phase 1.
-6. **Reference**: Cite the PRD, ERD, Documentation, and Roadmap in all subsequent code generation decisions.
-
----
-
-<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.
-
-### Deskripsi
-Guardrail wajib yang memaksa pembuatan secara otomatis Product Requirements Document (PRD) komprehensif, Entity Relationship Diagram (ERD), dan Dokumentasi sebelum membuat kode untuk proyek baru apapun. Memperkenalkan **PRD-as-Code** — format Markdown terstruktur yang dirancang agar dapat dibaca mesin oleh agen AI dan dikontrol versi bersama kode.
-
-### Kondisi Pemicu
-- Pengguna meminta membangun aplikasi, SaaS, atau fitur besar baru dari awal.
-- Tidak ada PRD, BLUEPRINT.md, atau spesifikasi produk yang ada.
-- Ruang lingkup proyek tidak jelas atau ambigu.
-- Pengguna berkata "buatkan saya...", "buat sebuah...", "saya ingin membuat..." untuk proyek baru.
-
-### Mengapa PRD Sebelum Kode
-1. **Mencegah scope creep**: Mendefinisikan batas sebelum satu baris kode pun ditulis.
-2. **Menyelaraskan output AI**: Agen AI menghasilkan kode yang jauh lebih baik saat diberi spesifikasi terstruktur.
-3. **Memungkinkan keterlacakan**: Setiap fitur yang diimplementasikan dapat ditelusuri kembali ke persyaratan PRD.
-4. **Mengurangi pengerjaan ulang**: Menangkap keputusan arsitektur lebih awal (pilihan DB, alur auth, integrasi).
-5. **Spesifikasi dengan kontrol versi**: PRD hidup di repo — perubahan dilacak dan dapat ditinjau.
-
-### Template PRD-as-Code
-Template PRD mencakup 12 bagian:
-1. **Ringkasan Eksekutif**: Apa produk ini, untuk siapa, masalah apa yang diselesaikan.
-2. **Pernyataan Masalah**: Deskripsi masalah yang jelas dengan persona pengguna target.
-3. **Tujuan & Metrik Keberhasilan**: Target terukur yang terkait dengan tujuan bisnis.
-4. **Persona Pengguna**: Peran, tujuan, frustrasi, dan perilaku kunci.
-5. **Persyaratan Fitur**: MVP (Harus Ada), Fase 2 (Sebaiknya Ada), Masa Depan (Bagus Dimiliki).
-6. **Arsitektur Teknis**: Keputusan stack dengan justifikasi, ADR, multi-entry points.
-7. **Model Data**: Hubungan antar entitas tingkat tinggi.
-8. **Alur Pengguna**: Alur langkah-demi-langkah untuk interaksi utama.
-9. **Persyaratan Non-Fungsional**: Performa, ketersediaan, keamanan, skalabilitas.
-10. **Di Luar Ruang Lingkup**: Apa yang secara eksplisit dikecualikan.
-11. **Pertanyaan Terbuka**: Keputusan yang perlu dibuat sebelum pengembangan.
-12. **Persetujuan**: Pemangku kepentingan dan status tanda tangan.
-
-### Protokol Penegakan
-1. **Deteksi**: Saat pengguna meminta pembangunan proyek baru.
-2. **Jeda**: JANGAN hasilkan kode apapun.
-3. **Buat PRD, ERD, Dokumentasi & Roadmap**: Secara otomatis buat draf PRD (`PRD.md`), Entity Relationship Diagram (`ERD.md`), Dokumentasi umum (`DOKUMENTASI.md`), dan dokumen Roadmap (`ROADMAP.md` atau `PROGRESS.md`) yang sudah diisi berdasarkan deskripsi pengguna.
-4. **Tinjau**: Sajikan kepada pengguna untuk persetujuan/edit.
-5. **Konfirmasi**: Setelah PRD, ERD, Dokumentasi, dan Roadmap disetujui, lanjut ke `zero-to-prod-orchestrator` Fase 1.
-6. **Referensi**: Kutip PRD, ERD, Dokumentasi, dan Roadmap dalam semua keputusan pembuatan kode selanjutnya.
-
----
-### 🎨 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.
+---
+
+# PRD Architect & Documentation Lifecycle (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects with `brainstorming`, `zero-to-prod-orchestrator`, `session-memory-manager` to ensure cohesive execution and documentation updates.
+
+### Description
+A mandatory lifecycle guardrail covering two distinct phases:
+- **Phase 1 (Pre-Code):** Enforces creating a comprehensive Product Requirements Document (PRD), ERD, and general Documentation before generating code. Introduces PRD-as-Code — machine-readable and version-controlled.
+- **Phase 2 (Post-Code / Maintenance):** Automatically maintains project documentation after every successful build or feature implementation, updating `CHANGELOG.md`, `BLUEPRINT.md`, `PROGRESS.md`, and Architecture Decision Records (ADRs).
+
+### Trigger Conditions
+- **Phase 1:** User requests building a new app/SaaS/feature from scratch; no existing PRD/blueprint; unclear scope.
+- **Phase 2:** A feature, bug fix, or refactor is successfully implemented; user asks to "update docs" or "save progress"; a significant architectural decision is made; milestone completion.
+
+### Phase 1: Pre-Code Requirements & Enforcement
+**Why PRD Before Code:** Prevents scope creep, aligns AI output, enables traceability, reduces rework, version-controlled.
+
+#### Enforcement Protocol
+1. **Detect**: When user requests a new project build.
+2. **Pause**: Do NOT generate any code.
+3. **Generate Assets**: Automatically create `PRD.md`, `ERD.md`, `DOKUMENTASI.md`, and `ROADMAP.md` (or `PROGRESS.md`).
+4. **Review**: Present to user for approval/edits.
+5. **Confirm**: Proceed to code generation ONLY after approval.
+6. **Reference**: Cite these documents in all subsequent decisions.
+
+#### PRD-as-Code Template (12 Sections)
+```markdown
+# Product Requirements Document (PRD)
+**Project**: [Project Name]
+**Version**: 1.0.0
+**Status**: Draft | In Review | Approved
+**Created**: YYYY-MM-DD
+**Last Updated**: YYYY-MM-DD
+
+---
+## 1. Executive Summary
+[2-3 sentences: What is this product? Who is it for? What problem does it solve?]
+
+## 2. Problem Statement
+**Problem**: [Clear description]
+**Target Users**: [Specific segments]
+**Current Pain Points**: [List]
+
+## 3. Goals & Success Metrics
+| Goal | Metric | Target |
+|---|---|---|
+| [Goal] | [Metric] | [Target] |
+
+## 4. User Personas
+### Persona 1: [Name]
+- **Role**: [Job title]
+- **Goals**: [What they want to achieve]
+- **Frustrations**: [What currently doesn't work]
+- **Key Behaviors**: [How they'll use this product]
+
+## 5. Feature Requirements
+### MVP Features (Must Have — v1.0)
+- [ ] **[Feature Name]**: [Description. Acceptance criteria: ...]
+### Phase 2 Features (Should Have — v1.x)
+- [ ] **[Feature Name]**: [Description]
+### Future Features (Nice to Have — v2.0+)
+- [ ] **[Feature Name]**: [Description]
+
+## 6. Technical Architecture
+### Stack Decision
+| Layer | Technology | Rationale |
+|---|---|---|
+| [Layer] | [Technology] | [Reason] |
+### Architecture Decisions (ADRs)
+- **ADR-001**: [Decision title] — [Decision made and why]
+### Multi-Entry Points (if SaaS)
+| Entry Point | Domain | Purpose |
+|---|---|---|
+| [Entry] | [Domain] | [Purpose] |
+
+## 7. Data Model (High-Level)
+users ──belongs_to──> workspaces (via workspace_members)
+workspaces ──has_many──> projects
+
+## 8. User Flows
+### Primary Flow: [Name]
+1. User [action 1]
+2. System [response 1]
+
+## 9. Non-Functional Requirements
+| Requirement | Target |
+|---|---|
+| Performance | LCP < 2.5s, INP < 200ms |
+
+## 10. Out of Scope
+- [Explicitly excluded item]
+
+## 11. Open Questions
+- [ ] [Question that needs decision]
+
+## 12. Approval & Sign-off
+| Stakeholder | Role | Status |
+|---|---|---|
+| [Name] | [Role] | [Status] |
+```
+
+### Phase 2: Post-Code Maintenance & Update Protocol
+
+After every successful feature implementation:
+1. **CHANGELOG.md**: Add entry under `[Unreleased]` (Keep-a-Changelog standard: Added/Changed/Fixed/Removed/Security).
+2. **BLUEPRINT.md**: Update only if architecture, schema, stack, or entry points changed.
+3. **PROGRESS.md**: Mark completed tasks `[x]`, update next steps.
+4. **ADR**: Create a new ADR (`docs/adr/ADR-NNN-title.md`) if a significant architectural decision was made and update index (`docs/adr/README.md`).
+
+#### Files Maintained Frequency Matrix
+| File | Purpose | Update Frequency |
+|---|---|---|
+| `CHANGELOG.md` | User-facing list of changes | Every PR / feature |
+| `BLUEPRINT.md` | Technical architecture overview | Major structural changes |
+| `PROGRESS.md` | Development roadmap and status | Each work session |
+| `docs/adr/` | Architecture Decision Records | Each key decision |
+
+#### ADR Template
+```markdown
+# ADR-001: [Title]
+**Status**: Accepted | Rejected | Proposed | Deprecated
+**Date**: YYYY-MM-DD
+**Deciders**: [Team/Individual]
+## Context
+[What motivated this decision?]
+## Decision
+[What is being decided?]
+## Rationale
+[Why this choice?]
+## Consequences
+**Positive:** / **Negative:**
+## Superseded By
+[ADR-XXX] (if applicable)
+```
+
+### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
+**MANDATORY**: When building a new application, use `generate_image` to create a custom logo. Use it as:
+1. The primary application logo (header/navbar).
+2. The website favicon (`favicon.ico`).
+3. The Open Graph (OG) image for SEO (`og:image`).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dengan `brainstorming`, `zero-to-prod-orchestrator`, `session-memory-manager`.
+
+### Deskripsi
+Guardrail siklus hidup wajib:
+- **Fase 1 (Pra-Kode):** Memaksa pembuatan PRD, ERD, dan Dokumentasi sebelum kode dibuat.
+- **Fase 2 (Pasca-Kode):** Memelihara dokumentasi setelah setiap fitur sukses: `CHANGELOG.md`, `BLUEPRINT.md`, `PROGRESS.md`, dan ADR.
+
+### Kondisi Pemicu
+- **Fase 1:** Proyek baru dari awal; tidak ada PRD; ruang lingkup tidak jelas.
+- **Fase 2:** Fitur berhasil; pengguna meminta "perbarui docs"; keputusan arsitektur signifikan.
+
+### Fase 1: Protokol Penegakan
+1. Deteksi permintaan proyek baru → 2. Jeda (JANGAN kode) → 3. Buat `PRD.md`, `ERD.md`, `DOKUMENTASI.md`, `ROADMAP.md` → 4. Tinjau & setujui → 5. Baru mulai kode → 6. Referensi selalu.
+
+### Fase 2: Pemeliharaan Pasca-Kode
+1. **CHANGELOG.md**: Tambahkan ke `[Unreleased]` (Added/Changed/Fixed/Removed/Security).
+2. **BLUEPRINT.md**: Perbarui jika struktur berubah.
+3. **PROGRESS.md**: Tandai `[x]`, perbarui langkah selanjutnya.
+4. **ADR**: Buat `docs/adr/ADR-NNN-title.md` untuk keputusan besar.
+
+### 🎨 Mandat Aset Visual Otomatis (KRITIS)
+**WAJIB**: Gunakan `generate_image` untuk membuat logo kustom sebagai logo, favicon, dan OG image.

package/skills/production-ready-hardener/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: production-ready-hardener
 description: "Ultimate production readiness skill that orchestrates all relevant skills (frontend, backend, security, performance, SEO, testing, DevOps) to harden applications before deployment / Skill kesiapan produksi utama yang mengorkestrasi semua skill relevan (frontend, backend, keamanan, performa, SEO, testing, DevOps) untuk mengeraskan aplikasi sebelum deployment."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Production-Ready Hardener
@@ -31,21 +31,20 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │                                                                  │
 │  ┌─── PHASE 1: Architecture & Code Quality ───────────────────┐  │
 │  │  • scalability-clean-code (SOLID, DRY, Clean Architecture)  │  │
-│  │  • fullstack-expert / senior-fullstack (Design & patterns) │  │
-│  │  • app-analyzer-optimizer (Deep codebase & bottleneck audit)│ │
+│  │  • fullstack-expert (Design & polyglot patterns)            │  │
+│  │  • app-analyzer-optimizer (Deep codebase & bottleneck audit)│  │
 │  │  • monorepo-architect (Turborepo & pnpm workspace structure)│  │
 │  │  • dependency-upgrade-migrator (Codemod & package audits)  │  │
-│  │  • vibe-code-gardener (Purge AI slop & context drift)      │  │
+│  │  • anti-slop (Eliminate conversational & code slop)        │  │
 │  │  • typescript-expert (Strict mode & type-safe patterns)    │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 │  ┌─── PHASE 2: Frontend Hardening ────────────────────────────┐  │
 │  │  • senior-frontend (React 19, Next.js 15 App Router)       │  │
-│  │  • design-system-architect (Tokens, Radix, CVA, WCAG 2.2)  │  │
+│  │  • design-system-architect (Tokens, Radix, Base UI, WCAG)  │  │
 │  │  • tailwind-expert (CSS-first config, OKLCH, responsive)   │  │
 │  │  • form-validation-expert (React Hook Form, Zod validation)│  │
 │  │  • state-management-expert (Zustand, Jotai, TanStack Store)│  │
-│  │  • ui-components-expert (Input, nav, container primitives) │  │
 │  │  • ui-ux-pro-max / hig (HIG principles & design system)    │  │
 │  │  • global-a11y-i18n-expert (Web accessibility & i18n)      │  │
 │  │  • mobile-expo-expert / tauri-expert (Mobile & Desktop)    │  │
@@ -53,17 +52,15 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │                                                                  │
 │  ┌─── PHASE 3: Backend & AI Services ─────────────────────────┐  │
 │  │  • js-backend-expert (Node 24, Bun 1.2, Fastify, Hono)     │  │
-│  │  • go-programming-expert (Go 1.24+, microservices, gRPC)   │  │
+│  │  • go-programming-expert (Go 1.25+, microservices, gRPC)   │  │
 │  │  • python-programming-expert (Python 3.13+, FastAPI, uv)   │  │
 │  │  • rust-programming-expert (Rust 2024, Axum, async)        │  │
-│  │  • database-orm-expert (Prisma 6, Drizzle, migrations)    │  │
-│  │  • edge-serverless-db-expert (Neon, Cloudflare D1, Turso)  │  │
+│  │  • database-orm-expert (Prisma 6, Drizzle, Edge DBs, RLS)  │  │
 │  │  • cron-scheduler-expert / async-queue-temporal-expert     │  │
-│  │  • email-notification-expert (Transactional emails)        │  │
+│  │  • email-notification-expert (Email & Push notifications)  │  │
 │  │  • file-upload-media-expert (S3, Presigned URLs, CDN)      │  │
 │  │  • mcp-server-architect (MCP Server Tools & Zod schemas)   │  │
 │  │  • multi-agent-orchestration / ai-llm-integration-expert   │  │
-│  │  • ai-cost-token-optimizer (Prompt caching & token budget) │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 │  ┌─── PHASE 4: Security Hardening ────────────────────────────┐  │
@@ -97,8 +94,8 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │  │  • ci-cd-devops-architect (GitHub Actions, Docker, IaC)    │  │
 │  │  • cloud-hosting-expert (Vercel, Cloudflare Workers, AWS)  │  │
 │  │  • data-telemetry-expert (OpenTelemetry, PostHog metrics)  │  │
-│  │  • session-handoff-resume (Save state checkpoint)          │  │
-│  │  • auto-doc-updater (CHANGELOG & BLUEPRINT automation)     │  │
+│  │  • session-memory-manager (State checkpoints & handoff)    │  │
+│  │  • prd-architect (ADR records & changelog updates)         │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 └──────────────────────────────────────────────────────────────────┘
@@ -122,7 +119,7 @@ When this skill is triggered, execute the following 7-phase hardening process **
 - [ ] **TypeScript strict mode** enabled (`strict: true` in tsconfig), no `any` types (`typescript-expert`)
 - [ ] **Input validation** on all API boundaries (Zod, Pydantic, or equivalent)
 - [ ] **No hardcoded values** — all config via environment variables or config files
-- [ ] **Dead code & AI slop eliminated** — unneeded boilerplate cleaned via `vibe-code-gardener`
+- [ ] **Dead code & AI slop eliminated** — unneeded boilerplate cleaned via `vibe-code-gardener` and `anti-slop`
 - [ ] **Dependency audit** — all packages up-to-date, no known CVEs (`dependency-upgrade-migrator`, `npm audit`)
 
 ---
@@ -323,13 +320,13 @@ Skill ini TIDAK menggantikan skill individual — ia **mengoordinasikan** mereka
 
 | Fase | Skill yang Digunakan | Fokus Utama |
 |------|---------------------|-------------|
-| 1. Arsitektur & Kualitas Kode | `scalability-clean-code`, `fullstack-expert`, `senior-fullstack`, `app-analyzer-optimizer`, `monorepo-architect`, `dependency-upgrade-migrator`, `vibe-code-gardener`, `typescript-expert` | SOLID, DRY, Clean Architecture, RFC 9457 errors, pembersihan AI slop, strict TS |
-| 2. Pengerasan Frontend | `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `ui-components-expert`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert` | React 19, Error Boundaries, validasi Zod + RHF, a11y, state management, UI primitives |
-| 3. Pengerasan Backend | `js-backend-expert`, `go-programming-expert`, `python-programming-expert`, `rust-programming-expert`, `database-orm-expert`, `edge-serverless-db-expert`, `cron-scheduler-expert`, `async-queue-temporal-expert`, `email-notification-expert`, `file-upload-media-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `ai-cost-token-optimizer` | Database migration, ORM, connection pooling, durable background jobs, transactional email, MCP tools, token budget |
+| 1. Arsitektur & Kualitas Kode | `scalability-clean-code`, `fullstack-expert`, `app-analyzer-optimizer`, `monorepo-architect`, `dependency-upgrade-migrator`, `anti-slop`, `typescript-expert` | SOLID, DRY, Clean Architecture, RFC 9457 errors, pembersihan AI slop, strict TS |
+| 2. Pengerasan Frontend | `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert` | React 19, Error Boundaries, validasi Zod + RHF, a11y, state management, UI primitives |
+| 3. Pengerasan Backend | `js-backend-expert`, `go-programming-expert`, `python-programming-expert`, `rust-programming-expert`, `database-orm-expert`, `cron-scheduler-expert`, `async-queue-temporal-expert`, `email-notification-expert`, `file-upload-media-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `ai-llm-integration-expert` | Database migration, ORM, connection pooling, durable background jobs, transactional email, MCP tools, FinOps |
 | 4. Pengerasan Keamanan | `supabase-security-expert`, `firebase-security-expert`, `authentication-identity-expert`, `zero-trust-secret-vault`, `rate-limit-abuse-prevention`, `secure-fuzz-testing`, `fullstack-expert` | RLS, RBAC, OAuth2, Turnstile bot protection, Upstash rate limit, secret vault, fuzzing, XSS/CSRF |
 | 5. Testing & QA | `e2e-testing-expert`, `browser-automation-expert`, `coderabbit`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert` | E2E (Playwright), visual testing, Unit (Vitest), circuit breaker, Sentry & Pino logging |
 | 6. Performa & SEO | `seo`, `seo-geo`, `seo-aeo-landing-page-writer`, `performance-web-vitals`, `app-analyzer-optimizer` | Core Web Vitals (LCP, INP, CLS), bundle, CDN, sitemap, llms.txt & AEO |
-| 7. DevOps & Observability | `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-handoff-resume`, `auto-doc-updater` | Docker, CI/CD pipeline, OpenTelemetry, PostHog, Vercel/Cloudflare, state checkpoint & CHANGELOG |
+| 7. DevOps & Observability | `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-memory-manager`, `prd-architect` | Docker, CI/CD pipeline, OpenTelemetry, PostHog, Vercel/Cloudflare, state checkpoint & CHANGELOG |
 
 ### Protokol Eksekusi
 
@@ -346,7 +343,7 @@ Ketika skill ini dipicu, jalankan **7 fase pengerasan berurutan**. Setiap fase m
 - [ ] TypeScript strict mode aktif (`strict: true`), tanpa tipe `any` (`typescript-expert`)
 - [ ] Validasi input di semua batas API (Zod, Pydantic)
 - [ ] Tidak ada hardcoded value — semua konfigurasi via environment variable
-- [ ] Dead code & AI slop dieliminasi via `vibe-code-gardener`
+- [ ] Dead code & AI slop dieliminasi via `anti-slop`
 - [ ] Audit dependensi — semua paket up-to-date, tanpa CVE (`dependency-upgrade-migrator`)
 
 #### FASE 2: Pengerasan Frontend

package/skills/pwa-offline-first-expert/SKILL.md

@@ -6,9 +6,21 @@ author: "Roedy Rustam"
 
 # PWA & Offline-First Expert (2026 Edition)
 
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
 Expert guide for building enterprise-grade **Local-First** and **Progressive Web Applications (PWA)**. Eliminates loading spinners by reading and writing to local databases (OPFS SQLite, RxDB, IndexedDB) first, replicating seamlessly in the background with zero conflict (CRDTs, ElectricSQL, PowerSync), and packaging to native stores via PWABuilder.
 
-*Panduan ahli untuk membangun aplikasi web Local-First dan PWA kelas enterprise. Menghilangkan loading spinner dengan membaca dan menulis langsung ke database lokal, sinkronisasi otomatis di latar belakang tanpa bentrok data, dan packaging ke app store.*
+### Trigger Conditions
+- Applications requiring full offline functionality (field operations, mobile dashboards, transit apps).
+- User experience demands 0ms local read/write latency without loading spinners.
+- Multi-device sync architecture with automatic conflict resolution.
+- Packaging web apps for distribution on Google Play Store, iOS Safari PWA, or Microsoft Store.
 
 ---
 
@@ -183,3 +195,32 @@ To distribute your web application on **Google Play Store** (TWA - Trusted Web A
 - **`state-management-expert`**: For connecting RxDB / local stores with Zustand or TanStack Store.
 - **`database-orm-expert`**: For designing compatible backend schemas with ElectricSQL / Postgres.
 - **`mobile-push-notification-expert`**: For Web Push Notification subscription handling.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi web **Local-First** dan **Progressive Web Applications (PWA)** kelas enterprise. Menghilangkan ketergantungan loading spinner dengan membaca dan menulis langsung ke database lokal (OPFS SQLite, RxDB, IndexedDB) terlebih dahulu, sinkronisasi otomatis di latar belakang tanpa bentrok data (CRDTs, ElectricSQL, PowerSync), dan packaging ke toko aplikasi native melalui PWABuilder.
+
+### Kondisi Pemicu
+- Aplikasi yang memerlukan fungsionalitas offline penuh (pekerjaan lapangan, dashboard mobile, aplikasi transit).
+- Tuntutan pengalaman pengguna dengan latensi baca/tulis lokal 0ms tanpa loading spinner.
+- Arsitektur sinkronisasi multi-perangkat dengan resolusi konflik data otomatis.
+- Kebutuhan rilis aplikasi web ke Google Play Store, iOS Safari PWA, atau Microsoft Store.
+
+### Ringkasan Prinsip Local-First & PWA
+1. **0ms Latensi Lokal**: Komponen membaca dan menulis ke IndexedDB / OPFS lokal secara instan.
+2. **Sinkronisasi Reaktif Latar Belakang**: Replikasi data berjalan di background worker; mutasi offline dicatat dalam antrean IndexedDB dan di-flush saat jaringan online.
+3. **Pola Service Worker**: Stale-While-Revalidate untuk asset statis dan rute shell utama menggunakan Service Worker v3.
+4. **Distribusi Native**: Menggunakan PWABuilder CLI untuk menghasilkan APK Android TWA dan paket MSIX Windows.
+
+---
+
+## Integrasi Orkestrasi
+
+- **`senior-frontend`**: Integrasi UI indikator status offline dan hook mutasi optimistik.
+- **`state-management-expert`**: Menghubungkan RxDB / local storage ke Zustand atau TanStack Store.
+- **`database-orm-expert`**: Perancangan skema backend PostgreSQL yang kompatibel dengan replikasi CRDT / ElectricSQL.
+- **`mobile-push-notification-expert`**: Penanganan registrasi dan subscription Web Push Notification.