vibes-plug 2.11.0 → 3.9.0

package/skills/wordpress-headless-expert/SKILL.md

@@ -1,144 +1,145 @@
----
-name: wordpress-headless-expert
-description: "Expert guide for headless WordPress architecture — WPGraphQL, ACF Pro, Faust.js, Next.js/Astro frontend, webhooks, and caching / Panduan ahli arsitektur WordPress headless."
-author: "Roedy Rustam"
----
-
-# WordPress Headless Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-- **`headless-cms-expert`**: Comparing and migrating between CMS backends.
-- **`nextjs-app-router-expert`**: Next.js App Router integration with WPGraphQL.
-- **`astro-framework-expert`**: Static site generation and content pipelines from WordPress.
-- **`seo`**: Syncing Yoast SEO / Rank Math metadata to modern frontend head tags.
-- **`performance-web-vitals`**: Caching and Edge SSR optimization for decoupled WordPress.
-
-### Description
-Production guide for architecting, deploying, and maintaining headless WordPress systems. Covers decoupled WordPress backends with WPGraphQL and Advanced Custom Fields (ACF Pro), frontend rendering with Next.js 15 or Astro 5, Faust.js framework integration, webhook-triggered on-demand revalidation, authentication (JWT / Application Passwords), and WooCommerce headless setups.
-
-### Trigger Conditions
-- Decoupling an existing WordPress site into a headless architecture with Next.js/Astro.
-- Querying WordPress content using WPGraphQL and ACF Pro field groups.
-- Synchronizing SEO metadata (Yoast / RankMath) with modern frontend metadata APIs.
-- Setting up on-demand ISR revalidation hooks from WordPress publish events.
-
----
-
-### Core Architecture & Patterns
-
-#### 1. WPGraphQL Query Integration (Next.js 15 Server Component)
-```typescript
-const WP_GRAPHQL_ENDPOINT = process.env.WORDPRESS_API_URL || 'https://cms.example.com/graphql';
-
-interface PostPreview {
-  id: string;
-  title: string;
-  slug: string;
-  date: string;
-  excerpt: string;
-  featuredImage?: {
-    node: {
-      sourceUrl: string;
-      altText: string;
-    };
-  };
-}
-
-export async function fetchWordPressPosts(): Promise<PostPreview[]> {
-  const query = `
-    query GetLatestPosts {
-      posts(first: 10, where: { orderby: { field: DATE, order: DESC } }) {
-        nodes {
-          id
-          title
-          slug
-          date
-          excerpt
-          featuredImage {
-            node {
-              sourceUrl
-              altText
-            }
-          }
-        }
-      }
-    }
-  `;
-
-  const res = await fetch(WP_GRAPHQL_ENDPOINT, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ query }),
-    next: { tags: ['wordpress:posts'], revalidate: 3600 },
-  });
-
-  const { data } = await res.json();
-  return data?.posts?.nodes ?? [];
-}
-```
-
-#### 2. Yoast / RankMath SEO Metadata Extraction
-```typescript
-export async function generateMetadata({ params }: { params: { slug: string } }) {
-  const query = `
-    query GetPostSEO($slug: ID!) {
-      post(id: $slug, idType: SLUG) {
-        title
-        seo {
-          title
-          metaDesc
-          opengraphTitle
-          opengraphDescription
-          opengraphImage {
-            sourceUrl
-          }
-        }
-      }
-    }
-  `;
-
-  const res = await fetch(WP_GRAPHQL_ENDPOINT, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ query, variables: { slug: params.slug } }),
-  });
-
-  const { data } = await res.json();
-  const seo = data?.post?.seo;
-
-  return {
-    title: seo?.title || data?.post?.title,
-    description: seo?.metaDesc,
-    openGraph: {
-      title: seo?.opengraphTitle,
-      description: seo?.opengraphDescription,
-      images: seo?.opengraphImage ? [{ url: seo.opengraphImage.sourceUrl }] : [],
-    },
-  };
-}
-```
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-- **`headless-cms-expert`**: Pemilihan dan perbandingan CMS backend.
-- **`nextjs-app-router-expert`**: Integrasi Next.js App Router dengan query WPGraphQL.
-- **`seo`**: Sinkronisasi data meta Yoast/RankMath ke tag metadata frontend modern.
-
-### Deskripsi
-Panduan produksi untuk membangun dan memelihara arsitektur WordPress headless. Menggunakan WPGraphQL, ACF Pro, Faust.js, Next.js 15, atau Astro 5, revalidasi ISR instan via webhook, autentikasi aman, dan integrasi WooCommerce decoupled.
-
-### Kondisi Pemicu
-- Memisahkan frontend WordPress ke arsitektur decoupled (Next.js/Astro).
-- Mengambil konten WordPress via WPGraphQL dan grup field ACF Pro.
-- Mengonfigurasi revalidasi instan saat konten diterbitkan di WordPress.
+---
+name: wordpress-headless-expert
+description: "Expert guide for headless WordPress architecture — WPGraphQL, ACF Pro, Faust.js, Next.js/Astro frontend, webhooks, and caching / Panduan ahli arsitektur WordPress headless."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# WordPress Headless Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`headless-cms-expert`**: Comparing and migrating between CMS backends.
+- **`nextjs-app-router-expert`**: Next.js App Router integration with WPGraphQL.
+- **`astro-framework-expert`**: Static site generation and content pipelines from WordPress.
+- **`seo`**: Syncing Yoast SEO / Rank Math metadata to modern frontend head tags.
+- **`performance-web-vitals`**: Caching and Edge SSR optimization for decoupled WordPress.
+
+### Description
+Production guide for architecting, deploying, and maintaining headless WordPress systems. Covers decoupled WordPress backends with WPGraphQL and Advanced Custom Fields (ACF Pro), frontend rendering with Next.js 15 or Astro 5, Faust.js framework integration, webhook-triggered on-demand revalidation, authentication (JWT / Application Passwords), and WooCommerce headless setups.
+
+### Trigger Conditions
+- Decoupling an existing WordPress site into a headless architecture with Next.js/Astro.
+- Querying WordPress content using WPGraphQL and ACF Pro field groups.
+- Synchronizing SEO metadata (Yoast / RankMath) with modern frontend metadata APIs.
+- Setting up on-demand ISR revalidation hooks from WordPress publish events.
+
+---
+
+### Core Architecture & Patterns
+
+#### 1. WPGraphQL Query Integration (Next.js 15 Server Component)
+```typescript
+const WP_GRAPHQL_ENDPOINT = process.env.WORDPRESS_API_URL || 'https://cms.example.com/graphql';
+
+interface PostPreview {
+  id: string;
+  title: string;
+  slug: string;
+  date: string;
+  excerpt: string;
+  featuredImage?: {
+    node: {
+      sourceUrl: string;
+      altText: string;
+    };
+  };
+}
+
+export async function fetchWordPressPosts(): Promise<PostPreview[]> {
+  const query = `
+    query GetLatestPosts {
+      posts(first: 10, where: { orderby: { field: DATE, order: DESC } }) {
+        nodes {
+          id
+          title
+          slug
+          date
+          excerpt
+          featuredImage {
+            node {
+              sourceUrl
+              altText
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await fetch(WP_GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query }),
+    next: { tags: ['wordpress:posts'], revalidate: 3600 },
+  });
+
+  const { data } = await res.json();
+  return data?.posts?.nodes ?? [];
+}
+```
+
+#### 2. Yoast / RankMath SEO Metadata Extraction
+```typescript
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  const query = `
+    query GetPostSEO($slug: ID!) {
+      post(id: $slug, idType: SLUG) {
+        title
+        seo {
+          title
+          metaDesc
+          opengraphTitle
+          opengraphDescription
+          opengraphImage {
+            sourceUrl
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await fetch(WP_GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, variables: { slug: params.slug } }),
+  });
+
+  const { data } = await res.json();
+  const seo = data?.post?.seo;
+
+  return {
+    title: seo?.title || data?.post?.title,
+    description: seo?.metaDesc,
+    openGraph: {
+      title: seo?.opengraphTitle,
+      description: seo?.opengraphDescription,
+      images: seo?.opengraphImage ? [{ url: seo.opengraphImage.sourceUrl }] : [],
+    },
+  };
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`headless-cms-expert`**: Pemilihan dan perbandingan CMS backend.
+- **`nextjs-app-router-expert`**: Integrasi Next.js App Router dengan query WPGraphQL.
+- **`seo`**: Sinkronisasi data meta Yoast/RankMath ke tag metadata frontend modern.
+
+### Deskripsi
+Panduan produksi untuk membangun dan memelihara arsitektur WordPress headless. Menggunakan WPGraphQL, ACF Pro, Faust.js, Next.js 15, atau Astro 5, revalidasi ISR instan via webhook, autentikasi aman, dan integrasi WooCommerce decoupled.
+
+### Kondisi Pemicu
+- Memisahkan frontend WordPress ke arsitektur decoupled (Next.js/Astro).
+- Mengambil konten WordPress via WPGraphQL dan grup field ACF Pro.
+- Mengonfigurasi revalidasi instan saat konten diterbitkan di WordPress.

package/skills/zero-tech-debt-auditor/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: zero-tech-debt-auditor
+description: "Autonomous orchestrator that scans, refactors, and eradicates technical debt at the end of the development lifecycle to achieve a Zero Debt codebase / Orkestrator otonom untuk menghapus utang teknis sebelum rilis."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Zero Tech Debt Auditor 🧹
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Autonomous orchestrator that scans, refactors, and eradicates technical debt at the end of the development lifecycle to achieve a "Zero Debt" codebase before production release.
+
+**CRITICAL RULE**: Applications are NOT considered "Production-Ready" until they pass the Zero Technical Debt (Zero Debt) audit. This skill must be invoked at the final stage of development.
+
+### Core Philosophy
+Technical debt slows down future scaling. The `zero-tech-debt-auditor` acts as an autonomous SonarQube. It does not just report issues; it **fixes** them autonomously.
+
+### Trigger Conditions
+- Invoked at the final verification phase before deployment (Phase 9 of zero-to-prod).
+- When preparing an existing project for refactoring or technical debt elimination.
+- When running comprehensive code health, deduplication, and dead code cleanup sweeps.
+
+### Audit Dimensions
+
+#### 1. Code Duplication & DRY Enforcement
+- Scan the entire codebase for repeated logic.
+- Extract duplicated UI elements into reusable generic components.
+- Extract duplicated business logic into shared utility functions or custom hooks.
+
+#### 2. Dead Code Elimination (Knip Protocol)
+- Identify and remove unused files, exports, dependencies, and types.
+- Review `package.json` and remove any library that is not actively imported.
+
+#### 3. Type Safety Rigidity (TypeScript Strictness)
+- Search for `any` or `@ts-ignore` and replace them with strict `Zod` schemas, discriminated unions, or generic types.
+- Ensure all function returns are explicitly typed.
+
+#### 4. Hardcoded Secrets & Magic Numbers
+- Audit the codebase for hardcoded API URLs, keys, or "magic numbers" (e.g., `const timeout = 5000;`).
+- Refactor them into centralized constant files (`constants.ts`) or environment variables (`process.env`).
+
+#### 5. Test Coverage Handoff
+- Ensure that critical business logic (e.g., payment webhooks, auth guards) have at least basic unit tests.
+- If tests are missing, automatically generate them.
+
+### Execution Protocol
+When triggered, the Swarm Director must:
+1. **Analyze:** Read the entire `src` directory.
+2. **Report:** Generate a `TECH_DEBT_REPORT.md` (Artifact) listing the violations found.
+3. **Eradicate:** Autonomously edit the files to fix the violations.
+4. **Verify:** Run `npm run lint` and `npm run build` to ensure the eradications did not break the app.
+
+### Orchestration & Integration
+- Connected to `zero-to-prod-orchestrator`: Acts as Phase 9 (Final Handoff).
+- Connected to `biome-linter-formatter-expert`: Uses strict linting rules to enforce consistency.
+- Connected to `autonomous-tdd-debugger`: Fixes any tests broken during the refactoring process.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Orkestrator otonom yang memindai, melakukan refactoring, dan menghapus utang teknis (technical debt) di akhir siklus hidup pengembangan untuk mencapai basis kode "Zero Debt" sebelum rilis ke produksi.
+
+**ATURAN KRUSIAL**: Aplikasi TIDAK dianggap "Siap Produksi" sampai lulus audit Zero Technical Debt. Skill ini wajib dijalankan pada tahap akhir pengembangan.
+
+### Filosofi Utama
+Utang teknis memperlambat skalabilitas masa depan. `zero-tech-debt-auditor` bertindak seperti SonarQube otonom. Bukan hanya melaporkan masalah, melainkan **memperbaikinya secara otonom**.
+
+### Kondisi Pemicu
+- Dijalankan pada fase verifikasi akhir sebelum peluncuran (Fase 9 zero-to-prod).
+- Saat mempersiapkan proyek yang sudah ada untuk pembersihan atau refaktorisasi utang teknis.
+- Saat melakukan pembersihan menyeluruh terhadap kode mati, duplikasi, dan inkonsistensi tipe.
+
+### Dimensi Audit
+
+#### 1. Duplikasi Kode & Penegakan DRY
+- Pindai seluruh codebase untuk logika berulang.
+- Ekstrak elemen UI yang berulang menjadi komponen generic yang dapat digunakan kembali.
+- Ekstrak logika bisnis yang berulang ke fungsi utilitas bersama atau custom hook.
+
+#### 2. Eliminasi Kode Mati (Protokol Knip)
+- Identifikasi dan hapus file, ekspor, dependensi, dan tipe yang tidak terpakai.
+- Tinjau `package.json` dan hapus dependensi yang tidak pernah diimpor.
+
+#### 3. Ketelitian Tipe (TypeScript Strictness)
+- Cari penggunaan `any` atau `@ts-ignore` dan ganti dengan skema `Zod`, discriminated unions, atau tipe generic yang ketat.
+- Pastikan semua nilai kembalian fungsi memiliki tipe eksplisit.
+
+#### 4. Kunci Rahasia & Angka Ajaib (Magic Numbers)
+- Audit codebase untuk URL API, kunci rahasia, atau konstanta ajaib yang di-hardcode.
+- Refaktor ke dalam file konstanta terpusat (`constants.ts`) atau variabel lingkungan (`process.env`).
+
+#### 5. Cakupan Pengujian
+- Pastikan logika bisnis penting (seperti webhook pembayaran, penjaga autentikasi) memiliki unit test dasar.
+- Buat test otomatis jika belum ada.
+
+### Protokol Eksekusi
+1. **Analisis:** Pindai seluruh direktori `src`.
+2. **Laporan:** Buat artifak `TECH_DEBT_REPORT.md` yang merinci pelanggaran yang ditemukan.
+3. **Pemberantasan:** Edit file secara mandiri untuk memperbaiki masalah.
+4. **Verifikasi:** Jalankan linting dan build untuk memastikan perbaikan tidak merusak aplikasi.
+
+### Integrasi Orkestrasi
+- Terhubung ke `zero-to-prod-orchestrator`: Bertindak sebagai Fase 9 (Serah Terima Akhir).
+- Terhubung ke `biome-linter-formatter-expert`: Memakai aturan linting ketat untuk menjaga konsistensi.
+- Terhubung ke `autonomous-tdd-debugger`: Memperbaiki pengujian yang terganggu selama proses refactoring.