vibes-plug 2.14.1 → 3.9.0

package/skills/webxr-ar-vr-expert/SKILL.md

@@ -1,162 +1,163 @@
----
-name: webxr-ar-vr-expert
-description: "Expert guide for WebXR spatial computing, Web-based Virtual Reality (VR), Mixed Reality (MR), and Augmented Reality (AR) using Babylon.js and Three.js. Covers Apple Vision Pro, Meta Quest 3, hand tracking, and hit-testing / Panduan ahli WebXR spatial computing (VR/AR/MR)."
-author: "vibes-plug-swarm"
----
-
-# WebXR Spatial Computing Expert (VR, AR & MR)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-Connects and orchestrates with relevant domain skills:
-- `web-3d-graphics-expert` — WebGPU/WebGL 3D scene rendering, lighting, and model optimization.
-- `web-game-engine-expert` — Spatial physics, grabbing interactions, and fixed-timestep motion.
-- `apple-ecosystem-expert` — Apple Vision Pro visionOS Safari WebXR features and spatial guidelines.
-- `glsl-shader-expert` — Passthrough blending and spatial holographic shaders.
-- `performance-web-vitals` — Maintaining rock-solid 72/90/120 FPS to prevent simulator sickness.
-
-### Description
-Production-grade guidance for architecting immersive **Virtual Reality (VR)**, **Mixed Reality (MR)**, and **Augmented Reality (AR)** in the browser via the **WebXR Device API**. Covers modern head-mounted displays (**Meta Quest 3/3S**, **Apple Vision Pro**) and mobile AR, focusing on Babylon.js and Three.js with `@react-three/xr`.
-
-### Trigger Conditions
-Activate this skill when the user is:
-- Developing spatial computing web applications or immersive web experiences.
-- Setting up WebXR sessions (`immersive-vr`, `immersive-ar`).
-- Implementing Hand Tracking (joint poses, pinch gestures) or spatial controller interactions.
-- Adding Mixed Reality passthrough or depth sensing.
-- Implementing AR Hit-Testing to snap 3D models onto real-world planes (floors, walls, tabletops).
-- Optimizing XR framerates (fixed foveated rendering) to eliminate motion sickness.
-
----
-
-### Key Capabilities & Headset Targets (2026)
-
-| Target Platform | Session Mode | Key Features |
-| :--- | :--- | :--- |
-| **Meta Quest 3 / 3S** | `immersive-vr`, `immersive-ar` | Full-color stereo passthrough, high-precision hand tracking, fixed foveation levels 0-3. |
-| **Apple Vision Pro (visionOS)** | `immersive-vr`, `immersive-ar` | Eye-gaze + pinch interaction, 90/120Hz display refresh, strict privacy hand tracking. |
-| **Mobile AR (Android / iOS WebKit)** | `immersive-ar` | Surface hit-testing, ambient light estimation, instant plane detection. |
-
----
-
-### 1. Babylon.js WebXR Setup (Gold Standard)
-
-Babylon.js provides the most comprehensive out-of-the-box WebXR implementation with integrated teleportation, controller profiles, and physics:
-
-```typescript
-import { Scene, WebXRExperienceHelper, WebXRFeatureName } from '@babylonjs/core';
-
-export async function initBabylonXR(scene: Scene) {
-  const xr = await scene.createDefaultXRExperienceAsync({
-    uiOptions: {
-      sessionMode: 'immersive-ar', // Fallback to 'immersive-vr' if AR is unsupported
-      referenceSpaceType: 'local-floor'
-    },
-    optionalFeatures: ['hit-test', 'hand-tracking', 'anchors', 'plane-detection']
-  });
-
-  // Enable Fixed Foveated Rendering to reclaim 20-30% GPU performance on Quest
-  const foveation = xr.baseExperience.featuresManager.enableFeature(
-    WebXRFeatureName.FOVEATION,
-    'latest',
-    { foveationLevel: 2 }
-  );
-
-  // Listen for Hand Tracking
-  const handTracking = xr.baseExperience.featuresManager.enableFeature(
-    WebXRFeatureName.HAND_TRACKING,
-    'latest',
-    { xrInput: xr.input }
-  );
-
-  return xr;
-}
-```
-
----
-
-### 2. React Three Fiber Setup (`@react-three/xr`)
-
-```tsx
-import { Canvas } from '@react-three/fiber';
-import { XR, createXRStore, Hands, Controllers } from '@react-three/xr';
-
-const store = createXRStore({
-  foveation: 1,
-  handTracking: true
-});
-
-export function SpatialApp() {
-  return (
-    <>
-      <button className="xr-btn" onClick={() => store.enterAR()}>
-        Enter Mixed Reality
-      </button>
-      <Canvas>
-        <XR store={store}>
-          <ambientLight intensity={0.8} />
-          <directionalLight position={[5, 10, 5]} />
-          <Controllers />
-          <Hands />
-          {/* Spatial 3D Objects */}
-          <mesh position={[0, 1.2, -1]}>
-            <boxGeometry args={[0.3, 0.3, 0.3]} />
-            <meshStandardMaterial color="royalblue" />
-          </mesh>
-        </XR>
-      </Canvas>
-    </>
-  );
-}
-```
-
----
-
-### Best Practices for Spatial Performance
-1. **Rock-Solid Framerates:** VR requires stable 72, 90, or 120 FPS. Any frame drop causes instant vestibular nausea.
-2. **Fixed Foveated Rendering (FFR):** Reduces fragment shader resolution in the user's peripheral vision, freeing substantial GPU overhead.
-3. **No 2D DOM Overlays in VR:** Standard HTML elements cannot render inside an immersive session. Render spatial 3D UI panels using world-space 3D meshes or canvas textures.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan:
-- `web-3d-graphics-expert` — Rendering scene 3D WebGPU/WebGL, pencahayaan, dan optimasi model.
-- `web-game-engine-expert` — Fisika spasial, interaksi menggenggam objek, dan pergerakan fixed-timestep.
-- `apple-ecosystem-expert` — Fitur WebXR Safari di Apple Vision Pro visionOS dan pedoman spasial.
-- `glsl-shader-expert` — Shader hologram dan blending passthrough AR.
-- `performance-web-vitals` — Menjaga kestabilan 72/90/120 FPS demi mencegah *motion sickness*.
-
-### Deskripsi
-Panduan produksi untuk membangun aplikasi spasial imersif **Virtual Reality (VR)**, **Mixed Reality (MR)**, dan **Augmented Reality (AR)** di browser melalui **WebXR Device API**. Mencakup headset modern (**Meta Quest 3/3S**, **Apple Vision Pro**) serta perangkat mobile AR.
-
-### Kondisi Pemicu
-Aktifkan skill ini ketika pengguna:
-- Mengembangkan aplikasi web *Spatial Computing* (VR/AR/MR).
-- Menginisialisasi sesi WebXR (`immersive-vr`, `immersive-ar`).
-- Mengimplementasikan *Hand Tracking* (pelacakan sendi tangan, gerakan cubit/pinch) atau kontroler spasial.
-- Mengaktifkan *Passthrough* warna Mixed Reality.
-- Menggunakan AR *Hit-Testing* untuk menempatkan objek 3D di lantai atau meja fisik.
-- Mengoptimalkan performa VR dengan *Fixed Foveated Rendering* (FFR).
-
----
-
-### Panduan Inti Pengembangan Spasial
-
-1. **Stabilitas Frame Rate Mutlak**:
-   - Targetkan 72–90 FPS tanpa toleransi *stutter*. Pada kacamata VR, keterlambatan frame (*latency hitch*) langsung memicu rasa mual (*motion sickness*).
-2. **Fixed Foveated Rendering (FFR)**:
-   - Aktifkan fitur foveation pada Meta Quest untuk menurunkan resolusi tepi lensa (periferi mata), menghemat 20-30% daya GPU.
-3. **Antarmuka 3D Spasial (Bukan HTML DOM)**:
-   - Elemen HTML standar tidak dapat ditampilkan di dalam sesi imersif. Buat UI berupa panel 3D melayang (*world-space meshes*).
-4. **Hit-Testing untuk AR**:
-   - Manfaatkan *Hit-Test API* bawaan WebXR untuk mendeteksi bidang nyata permukaan meja atau lantai secara instan sebelum meletakkan objek 3D.
+---
+name: webxr-ar-vr-expert
+description: "Expert guide for WebXR spatial computing, Web-based Virtual Reality (VR), Mixed Reality (MR), and Augmented Reality (AR) using Babylon.js and Three.js. Covers Apple Vision Pro, Meta Quest 3, hand tracking, and hit-testing / Panduan ahli WebXR spatial computing (VR/AR/MR)."
+author: "vibes-plug-swarm"
+version: "3.0.0"
+---
+
+# WebXR Spatial Computing Expert (VR, AR & MR)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills:
+- `web-3d-graphics-expert` — WebGPU/WebGL 3D scene rendering, lighting, and model optimization.
+- `web-game-engine-expert` — Spatial physics, grabbing interactions, and fixed-timestep motion.
+- `apple-ecosystem-expert` — Apple Vision Pro visionOS Safari WebXR features and spatial guidelines.
+- `glsl-shader-expert` — Passthrough blending and spatial holographic shaders.
+- `performance-web-vitals` — Maintaining rock-solid 72/90/120 FPS to prevent simulator sickness.
+
+### Description
+Production-grade guidance for architecting immersive **Virtual Reality (VR)**, **Mixed Reality (MR)**, and **Augmented Reality (AR)** in the browser via the **WebXR Device API**. Covers modern head-mounted displays (**Meta Quest 3/3S**, **Apple Vision Pro**) and mobile AR, focusing on Babylon.js and Three.js with `@react-three/xr`.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Developing spatial computing web applications or immersive web experiences.
+- Setting up WebXR sessions (`immersive-vr`, `immersive-ar`).
+- Implementing Hand Tracking (joint poses, pinch gestures) or spatial controller interactions.
+- Adding Mixed Reality passthrough or depth sensing.
+- Implementing AR Hit-Testing to snap 3D models onto real-world planes (floors, walls, tabletops).
+- Optimizing XR framerates (fixed foveated rendering) to eliminate motion sickness.
+
+---
+
+### Key Capabilities & Headset Targets (2026)
+
+| Target Platform | Session Mode | Key Features |
+| :--- | :--- | :--- |
+| **Meta Quest 3 / 3S** | `immersive-vr`, `immersive-ar` | Full-color stereo passthrough, high-precision hand tracking, fixed foveation levels 0-3. |
+| **Apple Vision Pro (visionOS)** | `immersive-vr`, `immersive-ar` | Eye-gaze + pinch interaction, 90/120Hz display refresh, strict privacy hand tracking. |
+| **Mobile AR (Android / iOS WebKit)** | `immersive-ar` | Surface hit-testing, ambient light estimation, instant plane detection. |
+
+---
+
+### 1. Babylon.js WebXR Setup (Gold Standard)
+
+Babylon.js provides the most comprehensive out-of-the-box WebXR implementation with integrated teleportation, controller profiles, and physics:
+
+```typescript
+import { Scene, WebXRExperienceHelper, WebXRFeatureName } from '@babylonjs/core';
+
+export async function initBabylonXR(scene: Scene) {
+  const xr = await scene.createDefaultXRExperienceAsync({
+    uiOptions: {
+      sessionMode: 'immersive-ar', // Fallback to 'immersive-vr' if AR is unsupported
+      referenceSpaceType: 'local-floor'
+    },
+    optionalFeatures: ['hit-test', 'hand-tracking', 'anchors', 'plane-detection']
+  });
+
+  // Enable Fixed Foveated Rendering to reclaim 20-30% GPU performance on Quest
+  const foveation = xr.baseExperience.featuresManager.enableFeature(
+    WebXRFeatureName.FOVEATION,
+    'latest',
+    { foveationLevel: 2 }
+  );
+
+  // Listen for Hand Tracking
+  const handTracking = xr.baseExperience.featuresManager.enableFeature(
+    WebXRFeatureName.HAND_TRACKING,
+    'latest',
+    { xrInput: xr.input }
+  );
+
+  return xr;
+}
+```
+
+---
+
+### 2. React Three Fiber Setup (`@react-three/xr`)
+
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { XR, createXRStore, Hands, Controllers } from '@react-three/xr';
+
+const store = createXRStore({
+  foveation: 1,
+  handTracking: true
+});
+
+export function SpatialApp() {
+  return (
+    <>
+      <button className="xr-btn" onClick={() => store.enterAR()}>
+        Enter Mixed Reality
+      </button>
+      <Canvas>
+        <XR store={store}>
+          <ambientLight intensity={0.8} />
+          <directionalLight position={[5, 10, 5]} />
+          <Controllers />
+          <Hands />
+          {/* Spatial 3D Objects */}
+          <mesh position={[0, 1.2, -1]}>
+            <boxGeometry args={[0.3, 0.3, 0.3]} />
+            <meshStandardMaterial color="royalblue" />
+          </mesh>
+        </XR>
+      </Canvas>
+    </>
+  );
+}
+```
+
+---
+
+### Best Practices for Spatial Performance
+1. **Rock-Solid Framerates:** VR requires stable 72, 90, or 120 FPS. Any frame drop causes instant vestibular nausea.
+2. **Fixed Foveated Rendering (FFR):** Reduces fragment shader resolution in the user's peripheral vision, freeing substantial GPU overhead.
+3. **No 2D DOM Overlays in VR:** Standard HTML elements cannot render inside an immersive session. Render spatial 3D UI panels using world-space 3D meshes or canvas textures.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `web-3d-graphics-expert` — Rendering scene 3D WebGPU/WebGL, pencahayaan, dan optimasi model.
+- `web-game-engine-expert` — Fisika spasial, interaksi menggenggam objek, dan pergerakan fixed-timestep.
+- `apple-ecosystem-expert` — Fitur WebXR Safari di Apple Vision Pro visionOS dan pedoman spasial.
+- `glsl-shader-expert` — Shader hologram dan blending passthrough AR.
+- `performance-web-vitals` — Menjaga kestabilan 72/90/120 FPS demi mencegah *motion sickness*.
+
+### Deskripsi
+Panduan produksi untuk membangun aplikasi spasial imersif **Virtual Reality (VR)**, **Mixed Reality (MR)**, dan **Augmented Reality (AR)** di browser melalui **WebXR Device API**. Mencakup headset modern (**Meta Quest 3/3S**, **Apple Vision Pro**) serta perangkat mobile AR.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna:
+- Mengembangkan aplikasi web *Spatial Computing* (VR/AR/MR).
+- Menginisialisasi sesi WebXR (`immersive-vr`, `immersive-ar`).
+- Mengimplementasikan *Hand Tracking* (pelacakan sendi tangan, gerakan cubit/pinch) atau kontroler spasial.
+- Mengaktifkan *Passthrough* warna Mixed Reality.
+- Menggunakan AR *Hit-Testing* untuk menempatkan objek 3D di lantai atau meja fisik.
+- Mengoptimalkan performa VR dengan *Fixed Foveated Rendering* (FFR).
+
+---
+
+### Panduan Inti Pengembangan Spasial
+
+1. **Stabilitas Frame Rate Mutlak**:
+   - Targetkan 72–90 FPS tanpa toleransi *stutter*. Pada kacamata VR, keterlambatan frame (*latency hitch*) langsung memicu rasa mual (*motion sickness*).
+2. **Fixed Foveated Rendering (FFR)**:
+   - Aktifkan fitur foveation pada Meta Quest untuk menurunkan resolusi tepi lensa (periferi mata), menghemat 20-30% daya GPU.
+3. **Antarmuka 3D Spasial (Bukan HTML DOM)**:
+   - Elemen HTML standar tidak dapat ditampilkan di dalam sesi imersif. Buat UI berupa panel 3D melayang (*world-space meshes*).
+4. **Hit-Testing untuk AR**:
+   - Manfaatkan *Hit-Test API* bawaan WebXR untuk mendeteksi bidang nyata permukaan meja atau lantai secara instan sebelum meletakkan objek 3D.

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.