git:20260726.8401a15 to git:20260810.3844eb1

---

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"

---

# Production-Ready Hardener

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>

## English

### Description

The **Production-Ready Hardener** is a master orchestrator skill that combines and delegates to all relevant vibes-plug skills to ensure your application is rock-solid, secure, performant, and production-grade before deployment. It acts as a comprehensive pre-production checklist that leaves no stone unturned — from frontend polish to backend resilience, from data security to observability.

This skill does NOT replace individual skills — it **coordinates** them into a structured, phased audit-and-hardening workflow.

### Orchestrated Skills Map

```

```

### Execution Protocol

When this skill is triggered, execute the following 7-phase hardening process **in order**. Each phase produces findings and recommendations. At the end, compile a **Production Readiness Report**.

---

#### PHASE 1: Architecture & Code Quality Audit

**Checklist:**

- [ ] **Project structure** follows clean architecture (Domain → Use Cases → Adapters → Infrastructure)

- [ ] **SOLID principles** are applied consistently — no god classes, no leaky abstractions

- [ ] **DRY violations** identified and refactored into shared utilities/services

- [ ] **API contracts** are spec-first (OpenAPI/GraphQL schema) with proper versioning

- [ ] **Input validation** on all API boundaries (Zod, Pydantic, or equivalent)

- [ ] **No hardcoded values** — all config via environment variables or config files

---

#### PHASE 2: Frontend Hardening

**Checklist:**

- [ ] **Server Components by default** — `'use client'` only when truly needed (state, events, browser APIs)

- [ ] **Proper Suspense boundaries** with meaningful loading states (skeletons, not spinners)

- [ ] **Error boundaries** on all page segments with user-friendly error UI

- [ ] **No hydration mismatches** — no client-only state (`localStorage`, `window`) in initial render

- [ ] **Image optimization** — `next/image` with proper sizes, WebP/AVIF format, lazy loading

- [ ] **Font optimization** — `next/font` with font-display: swap, preconnect to font CDN

- [ ] **Bundle analysis** — no unnecessary large libraries, proper code splitting & lazy loading

- [ ] **Meta tags** — proper title, description, OG tags, canonical URL on every page

- [ ] **Caching strategy** — proper `staleTime`, `gcTime`, and query key factory patterns

---

**Checklist:**

- [ ] **Proper indexes** on all frequently queried columns (`WHERE`, `JOIN`, `ORDER BY`)

- [ ] **N+1 query prevention** — eager loading or DataLoader pattern for relational data

- [ ] **Query profiling** — `EXPLAIN ANALYZE` run on critical queries, no Seq Scans on large tables

- [ ] **Database backups** — automated backup strategy with tested restore procedures

- [ ] **API rate limiting** — token bucket or sliding window on all public endpoints

- [ ] **Idempotency keys** — all mutation endpoints handle retries safely

- [ ] **Pagination** — cursor-based for large datasets, with consistent response format

- [ ] **Graceful shutdown** — proper SIGTERM handling, drain connections before exit

- [ ] **Health check endpoints** — `/healthz` (liveness) and `/readyz` (readiness) implemented

---

#### PHASE 4: Security Hardening

**Checklist:**

- [ ] **Authorization** — RBAC/ABAC with proper middleware on all protected routes

- [ ] **Security Rules** — Firebase Firestore/Storage rules are strict (no `allow read, write: if true`)

- [ ] **CORS configuration** — explicit allow-list of origins (never `*` in production)

- [ ] **CSP headers** — Content-Security-Policy configured with strict directives

- [ ] **HTTPS enforced** — HSTS header with `max-age=31536000; includeSubDomains; preload`

- [ ] **`.gitignore` audit** — `.env`, `service-account.json`, private keys are excluded

- [ ] **File upload validation** — content-type checking, size limits, no executable uploads

- [ ] **Audit logging** — sensitive operations logged (login, data export, permission changes, admin actions)

---

#### PHASE 5: Testing & Quality Assurance

**Checklist:**

- [ ] **Integration tests** — API endpoint tests with real database (test containers)

---

**Checklist:**

- [ ] **Bundle size** — analyzed and optimized (tree-shaking, dynamic imports, no duplicate deps)

- [ ] **robots.txt** — properly configured (no accidental disallow of important pages)

---

#### PHASE 7: DevOps & Deployment Readiness

**Checklist:**

- [ ] **Docker** — multi-stage builds, non-root user, HEALTHCHECK, `.dockerignore` configured

- [ ] **SLIs/SLOs defined** — error rate < 0.1%, p99 latency < 500ms, uptime > 99.9%

- [ ] **Backup & disaster recovery** — automated database backups, tested restore procedure

---

### Automated Readiness Scanner

An automated Python scanner script is included at [production_readiness_scanner.py](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/scripts/production_readiness_scanner.py) to perform all check phases automatically. It automatically detects technology stacks (Vite, React 19, Supabase, Vitest, Playwright, ESLint) and parses local developer logs (`tsc_errors.txt`, `eslint_output.txt`, etc.) to calculate a live readiness score and compile an interactive, clickable markdown report (`PRODUCTION_READINESS_REPORT.md`).

**Usage:**

```bash

# Run basic static checklist checks on a project

python scripts/production_readiness_scanner.py /path/to/project

# Run active compilation, linting, and test execution diagnostics

python scripts/production_readiness_scanner.py /path/to/project --run-tsc --run-lint --run-tests --run-build

```

---

### Production Readiness Report Format

After completing all 7 phases, compile a **Production Readiness Report** with:

```markdown

# Production Readiness Report

## Executive Summary

Overall readiness score (0-100) with letter grade (A/B/C/D/F).

## Phase Scores

| Phase | Score | Critical Issues | Warnings |

|-------|-------|-----------------|----------|

| 1. Architecture & Code Quality | XX/100 | N | N |

| 2. Frontend Hardening | XX/100 | N | N |

| 3. Backend Hardening | XX/100 | N | N |

| 4. Security Hardening | XX/100 | N | N |

| 5. Testing & QA | XX/100 | N | N |

| 6. Performance & SEO | XX/100 | N | N |

| 7. DevOps & Deployment | XX/100 | N | N |

## 🔴 Critical Issues (Must Fix Before Production)

List of blockers that MUST be resolved.

## 🟡 Warnings (Should Fix)

List of important improvements.

## 🔵 Recommendations (Nice to Have)

List of enhancements for future iterations.

## Remediation Plan

Step-by-step action items ordered by priority.

```

### Scoring Methodology

Each phase is scored 0-100 based on checklist completion:

- **95-100**: Production-ready ✅

- **80-94**: Needs minor fixes ⚠️

- **60-79**: Significant issues 🟡

- **Below 60**: Not production-ready 🔴

**Overall Score** = Weighted average:

- Architecture (10%) + Frontend (15%) + Backend (15%) + **Security (25%)** + Testing (15%) + Performance (10%) + DevOps (10%)

> **Note:** Security is weighted highest because data breaches and vulnerabilities are the most damaging production issues.

### Trigger Conditions

Active whenever the user asks to:

1. Prepare an application for production deployment.

2. Run a production readiness review, pre-launch checklist, or hardening audit.

3. Ensure an application is secure, performant, and robust before going live.

4. Perform a comprehensive quality audit across frontend, backend, and infrastructure.

---

<a name="bahasa-indonesia"></a>

## Bahasa Indonesia

### Deskripsi

**Production-Ready Hardener** adalah skill orkestrator utama yang menggabungkan dan mendelegasikan ke semua skill vibes-plug yang relevan untuk memastikan aplikasi Anda kokoh, aman, berperforma tinggi, dan siap produksi sebelum deployment. Skill ini berfungsi sebagai checklist pra-produksi komprehensif yang tidak meninggalkan celah — dari polish frontend hingga ketahanan backend, dari keamanan data hingga observability.

Skill ini TIDAK menggantikan skill individual — ia **mengoordinasikan** mereka ke dalam alur kerja audit-dan-pengerasan yang terstruktur dan bertahap.

### Peta Skill yang Diorkestrasi

### Protokol Eksekusi

Ketika skill ini dipicu, jalankan **7 fase pengerasan berurutan**. Setiap fase menghasilkan temuan dan rekomendasi. Di akhir, compile sebuah **Laporan Kesiapan Produksi**.

---

#### FASE 1: Audit Arsitektur & Kualitas Kode

- [ ] Struktur proyek mengikuti clean architecture

- [ ] Prinsip SOLID diterapkan konsisten

- [ ] Pelanggaran DRY diidentifikasi dan di-refactor

- [ ] Kontrak API menggunakan desain spec-first (OpenAPI/GraphQL)

- [ ] Validasi input di semua batas API (Zod, Pydantic)

- [ ] Tidak ada hardcoded value — semua konfigurasi via environment variable

#### FASE 2: Pengerasan Frontend

- [ ] Server Components secara default

- [ ] Suspense boundary dengan loading state bermakna

- [ ] Error boundary di setiap segmen halaman

- [ ] Tidak ada hydration mismatch

- [ ] Optimasi gambar dengan `next/image`, WebP/AVIF, lazy loading

- [ ] Analisis bundle — tanpa library besar yang tidak perlu

- [ ] Meta tags lengkap di setiap halaman

#### FASE 3: Pengerasan Backend

- [ ] Index yang tepat pada kolom yang sering di-query

- [ ] Pencegahan N+1 query

- [ ] Graceful shutdown dengan penanganan SIGTERM

- [ ] Health check endpoint (`/healthz`, `/readyz`)

#### FASE 4: Pengerasan Keamanan

- [ ] Otorisasi RBAC/ABAC pada semua route dilindungi

- [ ] Firebase Security Rules ketat

- [ ] CORS dengan allow-list eksplisit (bukan `*`)

- [ ] CSP headers dikonfigurasi

- [ ] HTTPS dipaksakan dengan HSTS

- [ ] `.gitignore` mencakup `.env` dan file sensitif

- [ ] Pencegahan SQL injection, XSS, CSRF

- [ ] Validasi file upload (content-type, size limit)

#### FASE 5: Testing & Quality Assurance

- [ ] Unit test (≥80% coverage)

- [ ] Integration test dengan database real

- [ ] Type checking dan linting di CI tanpa error

#### FASE 6: Optimasi Performa & SEO

- [ ] Bundle size dioptimasi

- [ ] CDN untuk aset statis

- [ ] Caching multi-tier (Browser → CDN → Redis → Database)

#### FASE 7: DevOps & Kesiapan Deployment

- [ ] Docker multi-stage build, non-root user, HEALTHCHECK

- [ ] Structured logging format JSON

---

### Scanner Kesiapan Otomatis

Script scanner Python otomatis tersedia di [production_readiness_scanner.py](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/scripts/production_readiness_scanner.py) untuk menjalankan seluruh fase pemeriksaan secara otomatis. Scanner ini mendeteksi stack teknologi (Vite, React 19, Supabase, Vitest, Playwright, ESLint) serta mem-parsing file log error lokal (`tsc_errors.txt`, `eslint_output.txt`, dll) untuk mengkalkulasi skor kesiapan rilis dan menyusun laporan markdown interaktif (`PRODUCTION_READINESS_REPORT.md`).

**Cara Penggunaan:**

```bash

# Jalankan pemeriksaan checklist statis dasar pada proyek

python scripts/production_readiness_scanner.py /path/to/project

# Jalankan diagnostik aktif termasuk typecheck tsc, linter eslint, unit test, dan bundle build

python scripts/production_readiness_scanner.py /path/to/project --run-tsc --run-lint --run-tests --run-build

```

---

### Metodologi Penilaian

Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:

- **95-100**: Siap produksi ✅

- **80-94**: Perlu perbaikan minor ⚠️

- **60-79**: Ada masalah signifikan 🟡

- **Di bawah 60**: Belum siap produksi 🔴

**Skor Keseluruhan** = Rata-rata berbobot:

- Arsitektur (10%) + Frontend (15%) + Backend (15%) + **Keamanan (25%)** + Testing (15%) + Performa (10%) + DevOps (10%)

> **Catatan:** Keamanan diberi bobot tertinggi karena pelanggaran data dan kerentanan adalah masalah produksi yang paling merusak.

### Kondisi Pemicu

Aktif setiap kali pengguna meminta untuk:

1. Mempersiapkan aplikasi untuk deployment produksi.

2. Menjalankan review kesiapan produksi, checklist pra-peluncuran, atau audit pengerasan.

3. Memastikan aplikasi aman, berperforma tinggi, dan kokoh sebelum go-live.

4. Melakukan audit kualitas komprehensif di seluruh frontend, backend, dan infrastruktur.

### Referensi Dokumentasi

- [Production Readiness Checklist](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/production_checklist.md)

- [Security Hardening Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/security_hardening_guide.md)

- [Performance Optimization Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/performance_optimization.md)