` yang diberi handler `onClick`. Browser sudah menyediakan dukungan keyboard dan screen reader gratis pada elemen asli.
+2. **Kontras Warna Minimal 4.5:1**: Teks harus memiliki kontras minimal 4.5:1 terhadap warna latar belakangnya (standar WCAG 2.2 AA).
+3. **Gunakan Properti Logika CSS**: Hindari `margin-left` atau `padding-right`. Gunakan `margin-inline-start` dan `padding-inline-end` agar tata letak otomatis menyesuaikan saat dibuka dalam mode bahasa Arab (RTL).
+
+## Integrasi Orkestrasi
+- **`accessibility-testing-expert`**: Menjalankan pengujian otomatis axe-core di pipeline CI/CD.
+- **`ui-ux-pro-max`**: Menjamin keterbacaan tipografi dan kontras warna yang nyaman di mata.
+- **`senior-frontend`**: Membangun komponen UI aksesibel menggunakan HTML semantik.
+- **`nextjs-app-router-expert`**: Mengelola perutean dinamis berbasis bahasa pada URL.
\ No newline at end of file
diff --git a/vibes-plug/skills/glsl-shader-expert/SKILL.md b/vibes-plug/skills/glsl-shader-expert/SKILL.md
new file mode 100644
index 000000000..3f0c9e1d1
--- /dev/null
+++ b/vibes-plug/skills/glsl-shader-expert/SKILL.md
@@ -0,0 +1,191 @@
+---
+name: glsl-shader-expert
+description: "Expert guide for modern web shaders: Three Shading Language (TSL), WebGPU WGSL, Compute Shaders, and WebGL GLSL in Three.js and Babylon.js. Covers procedural generation, compute kernels, and post-processing / Panduan ahli shader web modern: TSL, WGSL, Compute Shader, dan GLSL."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Modern Web Shader Expert (TSL, WGSL, Compute Shaders & GLSL)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills:
+- `web-3d-graphics-expert` — WebGPU/WebGL scene rendering and NodeMaterial binding.
+- `web-game-engine-expert` — Physics simulations, particle systems, and VFX materials.
+- `ui-ux-pro-max` — Modern visual effects, glassmorphism, and screen-space distortion.
+- `performance-web-vitals` — GPU profiling, draw call reduction, and compute shader optimization.
+
+### Description
+Production-grade guidance for authoring, compiling, and optimizing GPU shaders for modern web applications. Focuses on the cutting-edge **TSL (Three Shading Language)** node system which cross-compiles to both **WGSL (WebGPU)** and **GLSL (WebGL2)**, standalone **WGSL Compute Shaders** for parallel processing (particles, boids, simulation), and legacy **GLSL** optimization.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Writing custom shader materials in Three.js or Babylon.js.
+- Refactoring legacy GLSL shaders to Three Shading Language (TSL) or WebGPU WGSL.
+- Implementing WebGPU Compute Shaders (`@compute` workgroups, storage buffers).
+- Creating procedural VFX: fluid simulations, volumetric clouds, noise-based terrain, or holographic shields.
+- Designing post-processing screen passes (bloom, chromatic aberration, SSAO/GTAO, depth of field).
+- Optimizing GPU bottlenecks, thread divergence, or ALU instruction counts.
+
+---
+
+### Modern Web Shader Paradigms (2026)
+
+| Paradigm | Target API | Key Advantages | When to Use |
+| :--- | :--- | :--- | :--- |
+| **TSL (Three Shading Language)** | WebGPU + WebGL2 | Cross-compiles node trees to WGSL and GLSL; type-safe JavaScript/TypeScript syntax. | Default standard for modern Three.js (r170+) materials and post-processing. |
+| **WGSL (WebGPU Shading Language)** | WebGPU native | Direct GPU memory access, structured storage buffers, atomic operations. | Raw WebGPU apps, Babylon.js WebGPU compute, custom WebGPU pipelines. |
+| **Compute Shaders** | WebGPU | General-purpose GPU (GPGPU) computing; runs without rasterization or vertex buffers. | 100,000+ particle systems, cloth physics, fluid simulation, GPU boids. |
+| **GLSL (ES 3.0)** | WebGL2 fallback | Universal device compatibility on legacy hardware. | Legacy Three.js/Babylon.js projects and fallback pipelines. |
+
+---
+
+### 1. Three Shading Language (TSL) Node System
+
+TSL replaces string-concatenated GLSL with modular, type-safe node expressions that Three.js automatically compiles to WGSL on WebGPU and GLSL on WebGL2.
+
+```typescript
+import * as THREE from 'three/webgpu';
+import { Fn, float, vec3, color, uv, time, positionLocal, sin, uniform } from 'three/tsl';
+
+// Define custom dynamic uniforms
+const uFrequency = uniform(3.0);
+const uSpeed = uniform(1.5);
+
+// Reusable TSL shader function (Node-based)
+const waterWave = Fn(([freq, spd]) => {
+ const coord = uv();
+ const wave = sin(coord.x.mul(freq).add(time.mul(spd)))
+ .add(sin(coord.y.mul(freq).add(time.mul(spd))))
+ .mul(0.5);
+ return wave;
+});
+
+// Vertex Position displacement in TSL
+const displacedPosition = Fn(() => {
+ const wave = waterWave(uFrequency, uSpeed);
+ const newPos = positionLocal.add(vec3(0.0, wave.mul(0.2), 0.0));
+ return newPos;
+});
+
+// Create Node Material
+const oceanMaterial = new THREE.MeshStandardNodeMaterial();
+oceanMaterial.positionNode = displacedPosition();
+oceanMaterial.colorNode = Fn(() => {
+ const wave = waterWave(uFrequency, uSpeed);
+ const baseColor = color(0x004488);
+ const foamColor = color(0x88eeff);
+ return baseColor.mix(foamColor, wave.add(0.5));
+})();
+```
+
+---
+
+### 2. WebGPU Compute Shaders (GPGPU Parallel Processing)
+
+Compute shaders run arbitrary mathematical workloads across thousands of GPU threads simultaneously:
+
+```typescript
+import * as THREE from 'three/webgpu';
+import { Fn, float, vec3, uniform, storage, instanceIndex } from 'three/tsl';
+
+const PARTICLE_COUNT = 65536;
+
+// Create GPU Storage Buffers
+const positionBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
+const velocityBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);
+
+const posStorage = storage(positionBuffer, 'vec3', PARTICLE_COUNT);
+const velStorage = storage(velocityBuffer, 'vec3', PARTICLE_COUNT);
+
+// TSL Compute Kernel (executes per particle on GPU)
+const computeParticles = Fn(() => {
+ const index = instanceIndex;
+ const pos = posStorage.element(index);
+ const vel = velStorage.element(index);
+
+ // Update position based on velocity
+ pos.addAssign(vel.mul(0.016));
+
+ // Bounce off boundaries [-5, 5]
+ vel.y.assign(pos.y.lessThan(-5.0).select(vel.y.abs(), vel.y));
+ vel.y.assign(pos.y.greaterThan(5.0).select(vel.y.abs().negate(), vel.y));
+})().compute(PARTICLE_COUNT);
+
+// In the render loop:
+// renderer.compute(computeParticles);
+// renderer.render(scene, camera);
+```
+
+---
+
+### 3. High-Performance Shader Rules (GPU Architecture)
+
+1. **Eliminate Branching Divergence:**
+ - GPU threads execute in lockstep warps (NVIDIA: 32 threads, AMD/Apple: 32-64 threads).
+ - If threads inside the same warp take different branches in an `if/else`, both paths are evaluated serially, destroying throughput.
+ - **Use Math Primitives:** Replace branches with `step()`, `smoothstep()`, `mix()`, `clamp()`, or `select()`.
+ ```glsl
+ // BAD: Divergent GPU branch
+ if (vDepth > 0.5) { color = vec3(1.0); } else { color = vec3(0.0); }
+
+ // GOOD: Branchless step function
+ color = vec3(step(0.5, vDepth));
+ ```
+
+2. **Precision Management:**
+ - Always specify precision for mobile GPUs.
+ - Use `mediump` (16-bit float) for colors, normal vectors, and UVs to gain 2x arithmetic throughput and save bandwidth.
+ - Reserve `highp` (32-bit float) for world-space coordinates and depth calculations.
+
+3. **Precompute on CPU or Vertex Shader:**
+ - Never compute values in the fragment shader (millions of pixels) that are constant across the mesh or linear across vertices.
+ - Move matrix inversions, static lighting directions, or uniform transformations to the CPU or Vertex stage.
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `web-3d-graphics-expert` — Rendering scene WebGPU/WebGL dan integrasi NodeMaterial.
+- `web-game-engine-expert` — Simulasi fisika, sistem partikel, dan material efek game.
+- `ui-ux-pro-max` — Efek visual modern, glassmorphism, dan distorsi screen-space.
+- `performance-web-vitals` — Profiling GPU, optimasi draw call, dan compute shader.
+
+### Deskripsi
+Panduan produksi untuk menulis, mengompilasi, dan mengoptimalkan shader GPU untuk aplikasi web modern. Fokus pada sistem node **TSL (Three Shading Language)** yang dapat dikompilasi silang menjadi **WGSL (WebGPU)** dan **GLSL (WebGL2)**, **Compute Shader WGSL** mandiri untuk pemrosesan paralel GPU skala masif (partikel, boids, simulasi cairan), dan optimasi **GLSL**.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna:
+- Menulis *custom shader material* pada Three.js atau Babylon.js.
+- Merefaktor shader GLSL lama menjadi Three Shading Language (TSL) atau WebGPU WGSL.
+- Mengimplementasikan WebGPU Compute Shader (`@compute` workgroups, storage buffers).
+- Membuat efek visual prosedural (simulasi air, awan volumetrik, medan prosedural, perisai hologram).
+- Merancang *post-processing passes* (bloom, chromatic aberration, SSAO, depth of field).
+- Mengatasi bottleneck GPU, *thread divergence*, atau instruksi ALU berlebih.
+
+---
+
+### Prinsip Utama Shader Modern
+
+1. **Adopsi TSL (Three Shading Language)**:
+ - Hindari menulis shader dalam bentuk *string concatenation* GLSL mentah pada proyek modern. Gunakan TSL (`Fn`, `color`, `uv`, `positionLocal`). TSL menjaga keamanan tipe (type-safety) dan otomatis menghasilkan WGSL atau GLSL sesuai runtime.
+
+2. **GPGPU dengan Compute Shader**:
+ - Manfaatkan WebGPU Compute Shader untuk kalkulasi ribuan partikel atau simulasi matematika tanpa melalui tahap rasterisasi atau vertex buffer tradisional.
+
+3. **Aturan Anti-Branching (Branchless Shader)**:
+ - GPU mengeksekusi instruksi dalam kelompok thread (*warp/wavefront*). Percabangan `if/else` yang tidak seragam akan memaksa GPU mengeksekusi kedua cabang secara berurutan (*branch penalty*).
+ - Gunakan fungsi matematika seperti `step()`, `smoothstep()`, dan `mix()` alih-alih percabangan logika kondisional.
+
+4. **Manajemen Presisi**:
+ - Gunakan `mediump` (16-bit float) untuk warna, koordinat UV, dan vektor normal untuk melipatgandakan kecepatan komputasi pada GPU smartphone.
+ - Gunakan `highp` (32-bit float) hanya untuk posisi ruang dunia (*world space*) dan perhitungan kedalaman (*depth*).
\ No newline at end of file
diff --git a/vibes-plug/skills/go-programming-expert/SKILL.md b/vibes-plug/skills/go-programming-expert/SKILL.md
new file mode 100644
index 000000000..cb27fd453
--- /dev/null
+++ b/vibes-plug/skills/go-programming-expert/SKILL.md
@@ -0,0 +1,302 @@
+---
+name: go-programming-expert
+description: "Expert-level skill for Go programming (Go 1.25+). Covers high-performance microservices, concurrency patterns, sqlc, net/http, Gin/Echo/Fiber, gRPC, and testing in English and Indonesian."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Go Programming Expert (Go 1.25 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Expert-level Go development for building high-performance microservices, APIs, and CLI tools. Covers **Go 1.25** features (range-over-func iterators, generic type aliases, weak pointers), structured logging with `slog`, `net/http` with the new ServeMux patterns, Gin/Echo/Fiber frameworks, sqlc for type-safe SQL, gRPC, and production testing patterns.
+
+### Trigger Conditions
+- Writing Go 1.24+ / 1.25+ microservices or APIs.
+- Implementing concurrency patterns with goroutines, channels, and `sync` primitives.
+- Using structured logging with `log/slog`.
+- Building HTTP servers with `net/http` ServeMux (Go 1.22+) or Gin/Echo/Fiber.
+- Writing type-safe SQL with **sqlc** or using **GORM**.
+- Implementing gRPC services with protobuf.
+- Writing Go tests with the standard `testing` package + `testify`.
+
+### Go 1.25 — Key Features
+
+#### Range-Over-Func (Go 1.22 → Stable in 1.24/1.25)
+Range over custom iterators — enables functional-style collection operations:
+```go
+// Define an iterator function
+func Fibonacci() iter.Seq[int] {
+ return func(yield func(int) bool) {
+ a, b := 0, 1
+ for {
+ if !yield(a) {
+ return
+ }
+ a, b = b, a+b
+ }
+ }
+}
+
+// Range over it naturally
+for n := range Fibonacci() {
+ if n > 100 {
+ break
+ }
+ fmt.Println(n)
+}
+```
+
+#### Generic Type Aliases (Go 1.24/1.25)
+```go
+// Type alias with generic parameters
+type Set[T comparable] = map[T]struct{}
+type Result[T any] = struct{ Value T; Err error }
+
+// Usage
+var s Set[string] = make(map[string]struct{})
+```
+
+#### Weak Pointers (Go 1.24/1.25)
+```go
+import "weak"
+
+// Weak pointer — does not prevent GC collection
+ptr := weak.Make(&myStruct{})
+if val := ptr.Value(); val != nil {
+ // Still alive
+}
+```
+
+### Structured Logging with `log/slog`
+```go
+package main
+
+import (
+ "log/slog"
+ "os"
+)
+
+func main() {
+ // Production JSON logger
+ logger := slog.New(slog.NewJSONHandler(os.Stdout, &slog.HandlerOptions{
+ Level: slog.LevelInfo,
+ AddSource: true, // include file:line
+ }))
+ slog.SetDefault(logger)
+
+ slog.Info("server started", "port", 8080, "env", "production")
+ slog.Error("database connection failed", "error", err, "host", dbHost)
+
+ // Grouped context
+ reqLogger := logger.WithGroup("request").With(
+ "trace_id", traceID,
+ "user_id", userID,
+ )
+ reqLogger.Info("handler called", "method", r.Method, "path", r.URL.Path)
+}
+```
+
+### HTTP Server — net/http ServeMux (Go 1.22+)
+Go 1.22 upgraded the standard ServeMux with method-based routing and path parameters — reducing the need for external routers:
+```go
+package main
+
+import (
+ "encoding/json"
+ "net/http"
+ "log/slog"
+)
+
+func main() {
+ mux := http.NewServeMux()
+
+ // Method + path pattern matching (Go 1.22+)
+ mux.HandleFunc("GET /api/users", listUsers)
+ mux.HandleFunc("POST /api/users", createUser)
+ mux.HandleFunc("GET /api/users/{id}", getUser) // path params
+ mux.HandleFunc("DELETE /api/users/{id}", deleteUser)
+
+ slog.Info("starting server", "addr", ":8080")
+ http.ListenAndServe(":8080", mux)
+}
+
+func getUser(w http.ResponseWriter, r *http.Request) {
+ id := r.PathValue("id") // Extract path parameter
+ // ...
+ w.Header().Set("Content-Type", "application/json")
+ json.NewEncoder(w).Encode(user)
+}
+```
+
+### Type-Safe SQL with sqlc
+```bash
+# Install sqlc
+go install github.com/sqlc-dev/sqlc/cmd/sqlc@latest
+
+# sqlc.yaml
+version: "2"
+sql:
+ - engine: "postgresql"
+ queries: "queries/"
+ schema: "schema/"
+ gen:
+ go:
+ package: "db"
+ out: "internal/db"
+ emit_json_tags: true
+ emit_interface: true
+```
+
+```sql
+-- queries/users.sql
+-- name: GetUser :one
+SELECT * FROM users WHERE id = $1 LIMIT 1;
+
+-- name: ListUsers :many
+SELECT * FROM users ORDER BY created_at DESC LIMIT $1 OFFSET $2;
+
+-- name: CreateUser :one
+INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *;
+```
+
+```go
+// Generated type-safe Go code (used in handlers)
+user, err := queries.GetUser(ctx, userID) // Fully typed!
+users, err := queries.ListUsers(ctx, db.ListUsersParams{Limit: 20, Offset: 0})
+```
+
+### Concurrency Patterns
+
+#### errgroup for Parallel Work
+```go
+import "golang.org/x/sync/errgroup"
+
+g, ctx := errgroup.WithContext(context.Background())
+
+g.Go(func() error { return fetchA(ctx) })
+g.Go(func() error { return fetchB(ctx) })
+
+if err := g.Wait(); err != nil {
+ // First error from any goroutine
+ return fmt.Errorf("parallel fetch: %w", err)
+}
+```
+
+#### Worker Pool Pattern
+```go
+func workerPool(jobs <-chan Job, results chan<- Result, numWorkers int) {
+ var wg sync.WaitGroup
+ for range numWorkers {
+ wg.Add(1)
+ go func() {
+ defer wg.Done()
+ for job := range jobs {
+ results <- process(job)
+ }
+ }()
+ }
+ wg.Wait()
+ close(results)
+}
+```
+
+### Testing Best Practices
+```go
+package user_test
+
+import (
+ "testing"
+ "github.com/stretchr/testify/assert"
+ "github.com/stretchr/testify/require"
+)
+
+func TestGetUser(t *testing.T) {
+ t.Parallel() // Always parallelize independent tests
+
+ // Table-driven tests
+ tests := []struct{
+ name string
+ userID string
+ want *User
+ wantErr bool
+ }{
+ {"valid user", "user-123", &User{ID: "user-123"}, false},
+ {"not found", "missing", nil, true},
+ }
+
+ for _, tt := range tests {
+ t.Run(tt.name, func(t *testing.T) {
+ t.Parallel()
+ got, err := GetUser(context.Background(), tt.userID)
+ if tt.wantErr {
+ require.Error(t, err)
+ return
+ }
+ require.NoError(t, err)
+ assert.Equal(t, tt.want.ID, got.ID)
+ })
+ }
+}
+```
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan Go tingkat ahli untuk membangun microservices, API, dan CLI tool berkinerja tinggi. Mencakup fitur **Go 1.25** (range-over-func, generic type alias, weak pointer), structured logging dengan `slog`, ServeMux `net/http` dengan pola baru (Go 1.22+), framework Gin/Echo/Fiber, sqlc untuk SQL type-safe, gRPC, dan pola pengujian produksi.
+
+### Kondisi Pemicu
+- Menulis microservices atau API Go 1.24+/1.25+.
+- Mengimplementasikan pola konkurensi dengan goroutine, channel, dan primitif `sync`.
+- Menggunakan structured logging dengan `log/slog`.
+- Membangun HTTP server dengan ServeMux `net/http` (Go 1.22+) atau Gin/Echo/Fiber.
+- Menulis SQL type-safe dengan **sqlc** atau GORM.
+- Mengimplementasikan layanan gRPC dengan protobuf.
+
+### Go 1.25 — Fitur Utama
+
+#### Range-Over-Func (Stabil di 1.24/1.25)
+Go 1.24/1.25 menstabilkan range over iterator function — memungkinkan koleksi gaya fungsional yang idiomatis tanpa mengekspos slice internal.
+
+#### Generic Type Alias
+Go 1.24/1.25 memungkinkan alias tipe dengan parameter generic, meningkatkan komposibilitas tipe.
+
+#### Weak Pointer
+`weak.Make()` membuat pointer lemah yang tidak mencegah GC mengumpulkan objek — berguna untuk cache.
+
+### Structured Logging dengan `log/slog`
+Paket `log/slog` bawaan Go (sejak 1.21) mendukung output JSON terstruktur, level log, dan pengelompokan atribut. Gunakan sebagai standar logging di semua proyek Go baru.
+
+### HTTP Server — net/http ServeMux (Go 1.22+)
+ServeMux Go 1.22 mendukung pencocokan berdasarkan metode HTTP dan parameter path — mengurangi kebutuhan router eksternal untuk API sederhana.
+
+### SQL Type-Safe dengan sqlc
+`sqlc` menghasilkan kode Go yang fully typed dari query SQL dan skema database — menghilangkan kebutuhan ORM untuk sebagian besar kasus.
+
+### Pola Konkurensi
+
+#### errgroup
+Gunakan `errgroup.WithContext()` dari `golang.org/x/sync/errgroup` untuk menjalankan goroutine paralel dan mengumpulkan error pertama secara aman.
+
+#### Worker Pool
+Gunakan pola worker pool dengan channel untuk memproses pekerjaan secara paralel dengan jumlah goroutine yang terkendali.
+
+### Best Practices Pengujian
+- Gunakan `t.Parallel()` untuk semua test independen.
+- Gunakan table-driven tests untuk menguji banyak skenario dengan kode minimal.
+- Gunakan `testify/assert` dan `testify/require` untuk assertion yang ekspresif.
\ No newline at end of file
diff --git a/vibes-plug/skills/graph-rag-knowledge-expert/SKILL.md b/vibes-plug/skills/graph-rag-knowledge-expert/SKILL.md
new file mode 100644
index 000000000..a55db6985
--- /dev/null
+++ b/vibes-plug/skills/graph-rag-knowledge-expert/SKILL.md
@@ -0,0 +1,241 @@
+---
+name: graph-rag-knowledge-expert
+description: "Expert guide for Knowledge Graphs, GraphRAG, Microsoft GraphRAG, Neo4j Text2Cypher, multi-hop relational retrieval, and hybrid vector-graph search / Panduan ahli Knowledge Graph, GraphRAG, dan pencarian relasional multi-hop."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# GraphRAG & Knowledge Graph Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Description
+Expert guide for implementing Knowledge Graph-augmented Retrieval (GraphRAG), solving the fatal weaknesses of vector search: multi-hop reasoning, relationship discovery, and global corpus understanding. Covers Microsoft GraphRAG, Neo4j Text2Cypher, FalkorDB, and hybrid Vector + Graph retrieval pipelines.
+
+### Trigger Conditions
+- Complex multi-hop queries where entities are linked through multiple intermediate nodes.
+- High hallucination rate using standard vector RAG on interconnected data.
+- Global corpus queries requiring domain-wide thematic summarization across thousands of documents.
+- Enterprise knowledge bases containing explicitly structured relational entities (e.g., organizations, code dependencies, regulatory rules).
+
+---
+
+## 1. Why GraphRAG Over Pure Vector Search?
+
+| Capability | Pure Vector Search (RAG) | GraphRAG (Graph + Vector) |
+| :--- | :--- | :--- |
+| **Direct Similarity ("What is X?")** | 🟢 Fast, accurate | 🟢 High accuracy |
+| **Multi-Hop Traversal ("How does X affect Z via Y?")** | 🔴 Blind (returns fragmented chunks) | 🟢 Explores interconnected graph edges |
+| **Global Corpus Query ("What are the main themes across all documents?")** | 🔴 Fails (limited to Top-K chunks) | 🟢 Hierarchical Community Summaries |
+| **Hallucination Rate on Complex Queries** | 🔴 Moderate to High (context stitching) | 🟢 Grounded in explicit knowledge edges |
+
+---
+
+## 2. Production Recipe: Text2Cypher Knowledge Graph Querying (TypeScript)
+
+Using Neo4j with deterministic schema introspection, preventing arbitrary syntax hallucinations.
+
+```typescript
+// text2cypher.ts - Safe Neo4j Query Generation & Execution
+import neo4j, { Driver } from 'neo4j-driver';
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+export class GraphRAGService {
+ private driver: Driver;
+
+ constructor(uri: string, user: string, pass: string) {
+ this.driver = neo4j.driver(uri, neo4j.auth.basic(user, pass));
+ }
+
+ // 1. Fetch live Graph Schema to ground the LLM
+ private async getGraphSchema(): Promise
{
+ const session = this.driver.session();
+ try {
+ const result = await session.run(`
+ CALL apoc.meta.schema() YIELD value
+ RETURN value
+ `);
+ return JSON.stringify(result.records[0]?.get('value') || {});
+ } finally {
+ await session.close();
+ }
+ }
+
+ // 2. Synthesize strict read-only Cypher query
+ public async queryGraph(userQuestion: string): Promise {
+ const schema = await this.getGraphSchema();
+
+ const { text: cypherQuery } = await generateText({
+ model: openai('gpt-4o-mini'),
+ system: `
+ You are an expert Neo4j Cypher generator.
+ Generate ONLY valid, read-only CYPHER queries based on this schema:
+ ${schema}
+
+ Rules:
+ - Never generate CREATE, MERGE, DELETE, or SET statements.
+ - Always use parameterization where appropriate.
+ - Output ONLY the raw Cypher query, without markdown or backticks.
+ `,
+ prompt: `Translate this question into Cypher: ${userQuestion}`,
+ });
+
+ const sanitizedCypher = cypherQuery.trim().replace(/^```cypher|```$/g, '');
+
+ // 3. Execute with read-only transaction
+ const session = this.driver.session({ defaultAccessMode: neo4j.session.READ });
+ try {
+ const res = await session.run(sanitizedCypher);
+ return res.records.map((r) => r.toObject());
+ } finally {
+ await session.close();
+ }
+ }
+
+ public async close(): Promise {
+ await this.driver.close();
+ }
+}
+```
+
+---
+
+## 3. Production Recipe: Entity & Relation Extraction (Python)
+
+```python
+# graph_extractor.py - Structured Entity & Relation Extraction
+from typing import List
+from pydantic import BaseModel, Field
+import instructor
+from openai import OpenAI
+
+client = instructor.from_openai(OpenAI())
+
+class Entity(BaseModel):
+ name: str = Field(description="Normalized entity name, uppercase")
+ type: str = Field(description="ORGANIZATION, PERSON, TECHNOLOGY, CONCEPT, LOCATION")
+ description: str = Field(description="Summary of entity role")
+
+class Relationship(BaseModel):
+ source_entity: str
+ target_entity: str
+ relation_type: str = Field(description="USES, DEVELOPS, OWNS, LOCATED_IN, DEPENDS_ON")
+ weight: float = Field(default=1.0, ge=0.0, le=1.0)
+ description: str
+
+class KnowledgeGraph(BaseModel):
+ entities: List[Entity]
+ relationships: List[Relationship]
+
+def extract_knowledge_graph(document_text: str) -> KnowledgeGraph:
+ """Extracts entities and relationships from raw text into structured schema."""
+ return client.chat.completions.create(
+ model="gpt-4o-mini",
+ response_model=KnowledgeGraph,
+ messages=[
+ {
+ "role": "system",
+ "content": (
+ "Extract all named entities and factual relationships between them. "
+ "Ensure entity names are canonicalized and relationships are directed."
+ ),
+ },
+ {"role": "user", "content": document_text},
+ ],
+ temperature=0.0,
+ )
+```
+
+---
+
+## 4. Microsoft GraphRAG: Hierarchical Communities
+
+For high-level summaries ("Summarize all technical debts reported across the system"):
+1. **Extraction**: Chunk documents ➔ Extract Entities & Relationships.
+2. **Clustering**: Apply **Leiden Algorithm** to detect hierarchical communities (Level 0: Micro, Level 1: Sub-domain, Level 2: Macro domain).
+3. **Summarization**: LLM generates pre-computed summaries for each community cluster.
+4. **Global Search**: Query runs across pre-computed community summaries in parallel, eliminating the need to read millions of tokens at inference time.
+
+---
+
+## Orchestration & Integration
+
+- **`vector-db-rag-expert`**: For hybrid dense-vector similarity search combined with graph path discovery.
+- **`database-orm-expert`**: For maintaining transactional relational mappings alongside graph stores.
+- **`ai-llm-integration-expert`**: Connects reasoning models to multi-hop graph context.
+- **`search-engine-expert`**: For keyword lexical indexing of graph node attributes.
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`vector-db-rag-expert`**: Integrasi hybrid RAG (penggabungan penelusuran vektor teks dan graf relasional).
+- **`ai-llm-integration-expert`**: Sintesis jawaban berbasis graf dan mitigasi halusinasi.
+- **`database-orm-expert`**: Desain skema data relasional dan konektivitas Neo4j / PostgreSQL.
+
+### Deskripsi
+Panduan ahli untuk mengimplementasikan Knowledge Graph-augmented Retrieval (GraphRAG), memecahkan kelemahan fatal pencarian vektor konvensional: penalaran multi-langkah (*multi-hop reasoning*), penemuan relasi antar-entitas, dan pemahaman korpus global. Mencakup Microsoft GraphRAG, Neo4j Text2Cypher, FalkorDB, dan pipeline hybrid Vector + Graph.
+
+### Kondisi Pemicu
+- Kueri multi-hop kompleks di mana entitas terhubung melalui banyak simpul perantara.
+- Tingkat halusinasi tinggi saat menggunakan RAG vektor standar pada data yang saling terhubung erat.
+- Kueri korpus global yang membutuhkan ringkasan tematis di seluruh dokumen enterprise.
+- Basis pengetahuan perusahaan yang mengandung relasi eksplisit (struktur organisasi, dependensi kode, kepatuhan regulasi).
+
+---
+
+### Implementasi Pola Kunci (TypeScript & Neo4j)
+
+#### 1. Query Text2Cypher Aman dengan Introspeksi Skema
+```typescript
+import neo4j, { Driver } from 'neo4j-driver';
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+export class LayananGraphRAG {
+ private driver: Driver;
+
+ constructor(uri: string, user: string, pass: string) {
+ this.driver = neo4j.driver(uri, neo4j.auth.basic(user, pass));
+ }
+
+ // Ambil skema graf langsung untuk grounding LLM
+ private async ambilSkemaGraf(): Promise {
+ const session = this.driver.session();
+ try {
+ const hasil = await session.run('CALL apoc.meta.schema() YIELD value RETURN value');
+ return JSON.stringify(hasil.records[0]?.get('value') || {});
+ } finally {
+ await session.close();
+ }
+ }
+
+ // Sintesis query Cypher read-only yang aman
+ public async tanyaGraf(pertanyaanPengguna: string): Promise {
+ const skema = await this.ambilSkemaGraf();
+
+ const { text: queryCypher } = await generateText({
+ model: openai('gpt-4o-mini'),
+ system: `Anda adalah ahli pembuat query Neo4j Cypher. Buat HANYA query Cypher read-only berdasarkan skema:\n${skema}\nAturan: Dilarang membuat perintah mutasi CREATE/DELETE.`,
+ prompt: `Terjemahkan pertanyaan berikut ke Cypher: ${pertanyaanPengguna}`,
+ });
+
+ const cypherBersih = queryCypher.trim().replace(/^\`\`\`cypher|\`\`\`$/g, '');
+ const session = this.driver.session({ defaultAccessMode: neo4j.session.READ });
+ try {
+ const hasil = await session.run(cypherBersih);
+ return hasil.records.map((r) => r.toObject());
+ } finally {
+ await session.close();
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/vibes-plug/skills/graphql-apollo-expert/SKILL.md b/vibes-plug/skills/graphql-apollo-expert/SKILL.md
new file mode 100644
index 000000000..b717cd353
--- /dev/null
+++ b/vibes-plug/skills/graphql-apollo-expert/SKILL.md
@@ -0,0 +1,175 @@
+---
+name: graphql-apollo-expert
+description: "Expert guide for designing and consuming GraphQL APIs. Covers Apollo Server/Client, NestJS GraphQL (Code-First & Schema-First), TypeGraphQL, caching, and N+1 query optimization."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# GraphQL & Apollo Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Production-grade guidance for building and consuming **GraphQL APIs**. Focuses on the **Apollo** ecosystem (Apollo Server, Apollo Client, Federation), **NestJS GraphQL** integration, and solving common performance pitfalls like the N+1 query problem using DataLoaders.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Setting up a GraphQL server with NestJS, Express, or Apollo Server.
+- Using `@apollo/client` or `@vue/apollo-composable` on the frontend.
+- Deciding between Code-First vs. Schema-First GraphQL design.
+- Optimizing backend database queries triggered by GraphQL resolvers (N+1 problem).
+- Implementing GraphQL Subscriptions via WebSockets.
+
+### Core Concepts
+
+#### 1. Code-First vs Schema-First (NestJS)
+- **Code-First (Recommended for TypeScript):** Define resolvers and object types using TS decorators. The schema `.gql` file is automatically generated. Ensures a single source of truth.
+- **Schema-First:** Write raw `.gql` files and use tools to generate TypeScript interfaces.
+
+```typescript
+// NestJS Code-First Example
+import { ObjectType, Field, Int } from '@nestjs/graphql';
+
+@ObjectType()
+export class User {
+ @Field(() => Int)
+ id: number;
+
+ @Field()
+ email: string;
+}
+
+import { Resolver, Query } from '@nestjs/graphql';
+
+@Resolver(() => User)
+export class UserResolver {
+ @Query(() => [User])
+ async users(): Promise {
+ return [{ id: 1, email: 'user@example.com' }];
+ }
+}
+```
+
+#### 2. The N+1 Problem & DataLoader
+GraphQL's resolver architecture easily causes the N+1 query problem (e.g., querying authors and their posts results in 1 query for authors, and N queries for each author's posts).
+**Solution:** Always use `DataLoader` to batch and cache database requests within a single GraphQL execution tick.
+
+#### 3. Apollo Client (Frontend)
+Use Apollo Client for robust caching and normalized state management on the frontend.
+```tsx
+import { useQuery, gql } from '@apollo/client';
+
+const GET_USERS = gql`
+ query GetUsers {
+ users {
+ id
+ email
+ }
+ }
+`;
+
+function UserList() {
+ const { loading, error, data } = useQuery(GET_USERS);
+ if (loading) return Loading...
;
+ return {data.users[0].email}
;
+}
+```
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `js-backend-expert` — For setting up the underlying Node.js/NestJS server architecture.
+- `database-orm-expert` — For connecting Prisma/Drizzle ORM directly to GraphQL resolvers and DataLoaders.
+- `senior-frontend` / `vue-frontend-expert` — For integrating Apollo Client into React or Vue applications.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "API Design & Contracts".
+- `zero-to-prod-orchestrator` — Phase 4 (Backend APIs).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
+- `js-backend-expert` — Setup arsitektur server Node.js/NestJS.
+- `database-orm-expert` — Menghubungkan Prisma/Drizzle ORM ke resolver GraphQL dan DataLoader.
+- `senior-frontend` / `vue-frontend-expert` — Integrasi Apollo Client ke aplikasi frontend.
+
+### Deskripsi
+Panduan produksi untuk membangun dan mengonsumsi API **GraphQL**. Mencakup ekosistem **Apollo** (Apollo Server, Apollo Client, Federation), integrasi **NestJS GraphQL**, dan pemecahan masalah bottleneck query N+1 menggunakan DataLoader.
+
+### Kondisi Pemicu
+- Mengonfigurasi server GraphQL menggunakan NestJS atau Apollo Server.
+- Mengintegrasikan Apollo Client pada frontend React atau Vue.
+- Memilih antara pendekatan Code-First vs Schema-First di TypeScript.
+- Menyelesaikan masalah query berulang N+1 pada relasi database bersarang.
+
+---
+
+### Implementasi Pola Kunci
+
+#### 1. Pendekatan Code-First dengan NestJS GraphQL
+```typescript
+import { ObjectType, Field, Int, Resolver, Query } from '@nestjs/graphql';
+
+@ObjectType()
+export class Pengguna {
+ @Field(() => Int)
+ id: number;
+
+ @Field()
+ email: string;
+}
+
+@Resolver(() => Pengguna)
+export class PenggunaResolver {
+ @Query(() => [Pengguna])
+ async daftarPengguna(): Promise {
+ return [{ id: 1, email: 'pengguna@example.com' }];
+ }
+}
+```
+
+#### 2. Mengatasi Masalah N+1 Query dengan DataLoader
+```typescript
+import DataLoader from 'dataloader';
+
+// Kumpulkan ID dan lakukan satu query batch (IN clause)
+export const pemuatDataPenulis = new DataLoader(async (daftarId) => {
+ const baris = await db.penulis.findMany({
+ where: { id: { in: [...daftarId] } },
+ });
+ const mapPenulis = new Map(baris.map((p) => [p.id, p]));
+ return daftarId.map((id) => mapPenulis.get(id)!);
+});
+```
+
+#### 3. Konsumsi di Sisi Klien dengan Apollo Client
+```tsx
+import { useQuery, gql } from '@apollo/client';
+
+const QUERY_PENGGUNA = gql`
+ query AmbilDaftarPengguna {
+ daftarPengguna {
+ id
+ email
+ }
+ }
+`;
+
+export function KomponenDaftarPengguna() {
+ const { loading, error, data } = useQuery(QUERY_PENGGUNA);
+ if (loading) return Memuat data...
;
+ if (error) return Terjadi galat: {error.message}
;
+ return Email: {data.daftarPengguna[0]?.email}
;
+}
+```
\ No newline at end of file
diff --git a/vibes-plug/skills/headless-cms-expert/SKILL.md b/vibes-plug/skills/headless-cms-expert/SKILL.md
new file mode 100644
index 000000000..3d235887d
--- /dev/null
+++ b/vibes-plug/skills/headless-cms-expert/SKILL.md
@@ -0,0 +1,242 @@
+---
+name: headless-cms-expert
+description: "Expert guide for Headless CMS integration (Sanity, Payload CMS, Strapi, Contentful, Storyblok) with modern frameworks / Panduan ahli integrasi Headless CMS (Sanity, Payload, Strapi, Contentful) dengan framework modern."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Headless CMS Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+- **`nextjs-app-router-expert`**: SSR/ISR content fetching and caching strategies.
+- **`api-design-expert`**: REST/GraphQL API patterns for CMS queries.
+- **`seo`**: Structured data, sitemaps, and metadata from CMS content.
+- **`astro-framework-expert`**: Content collections and static site generation with CMS.
+- **`rich-text-editor-expert`**: Custom editor components for CMS authoring.
+
+### Description
+Expert guide for selecting, integrating, and optimizing Headless CMS platforms in modern web applications. Covers Sanity v3 (GROQ, Portable Text, Content Lake), Payload CMS 3.x (TypeScript-first, code-defined schemas), Strapi 5 (open-source, self-hosted), Contentful (enterprise, GraphQL), and Storyblok (visual editing). Includes content modeling, preview mode, webhook-based revalidation, and migration strategies.
+
+### Trigger Conditions
+- Choosing or integrating a headless CMS.
+- Building content-driven websites (blogs, docs, marketing sites).
+- Implementing CMS preview/draft mode in Next.js or Astro.
+- Designing content models and structured content schemas.
+- Migrating from WordPress or monolithic CMS to headless.
+
+---
+
+### CMS Selection Guide
+
+| Criteria | Sanity v3 | Payload 3.x | Strapi 5 | Contentful | Storyblok |
+|----------|-----------|-------------|----------|------------|-----------|
+| Hosting | Cloud (free tier) | Self-hosted / Cloud | Self-hosted | Cloud | Cloud |
+| Schema Definition | Code (JS/TS) | Code (TS) | Admin UI / Code | Web UI | Web UI |
+| Query Language | GROQ | REST / GraphQL | REST / GraphQL | GraphQL / REST | REST / GraphQL |
+| Rich Text | Portable Text | Lexical / Slate | Blocks | Rich Text API | Rich Text |
+| TypeScript | ★★★★★ | ★★★★★ | ★★★★ | ★★★ | ★★★ |
+| Real-time | ★★★★★ | ★★★★ | ★★★ | ★★★ | ★★★★ |
+| Visual Editing | Sanity Studio | Admin Panel | Admin Panel | Web App | Visual Editor |
+| **Best For** | Developers | Code-first teams | Open-source fans | Enterprise | Marketing teams |
+
+**Recommendation:** Use **Sanity v3** for developer-heavy teams. Use **Payload CMS** when you need full TypeScript control and self-hosting. Use **Strapi** for open-source requirements.
+
+### Core Patterns
+
+#### 1. Sanity v3 Integration
+
+```typescript
+// sanity.config.ts — Schema-as-code
+import { defineConfig, defineField, defineType } from 'sanity';
+
+export const postSchema = defineType({
+ name: 'post',
+ title: 'Blog Post',
+ type: 'document',
+ fields: [
+ defineField({ name: 'title', type: 'string', validation: (r) => r.required() }),
+ defineField({ name: 'slug', type: 'slug', options: { source: 'title' } }),
+ defineField({ name: 'body', type: 'array', of: [{ type: 'block' }] }),
+ defineField({ name: 'publishedAt', type: 'datetime' }),
+ ],
+});
+```
+
+```typescript
+// Fetching with GROQ in Next.js App Router
+import { createClient } from 'next-sanity';
+
+const client = createClient({
+ projectId: process.env.SANITY_PROJECT_ID!,
+ dataset: 'production',
+ apiVersion: '2026-08-01',
+ useCdn: true,
+});
+
+// Server Component
+async function BlogPage() {
+ const posts = await client.fetch(
+ `*[_type == "post"] | order(publishedAt desc) {
+ title, slug, publishedAt,
+ "excerpt": array::join(string::split(pt::text(body), "")[0..200], "")
+ }`
+ );
+ return ;
+}
+```
+
+#### 2. Payload CMS 3.x Integration
+
+```typescript
+// payload.config.ts
+import { buildConfig } from 'payload';
+import { postgresAdapter } from '@payloadcms/db-postgres';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export default buildConfig({
+ db: postgresAdapter({ pool: { connectionString: process.env.DATABASE_URL! } }),
+ editor: lexicalEditor(),
+ collections: [
+ {
+ slug: 'posts',
+ fields: [
+ { name: 'title', type: 'text', required: true },
+ { name: 'content', type: 'richText' },
+ { name: 'status', type: 'select', options: ['draft', 'published'] },
+ ],
+ },
+ ],
+});
+```
+
+#### 3. Webhook Revalidation (Next.js)
+
+```typescript
+// app/api/revalidate/route.ts
+import { revalidateTag } from 'next/cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+ const secret = req.headers.get('x-webhook-secret');
+ if (secret !== process.env.REVALIDATION_SECRET) {
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ }
+ const body = await req.json();
+ revalidateTag(body._type); // Revalidate by content type
+ return NextResponse.json({ revalidated: true });
+}
+```
+
+#### 4. Preview Mode Pattern
+
+```typescript
+// app/api/draft/route.ts — Sanity preview
+import { draftMode } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function GET(req: NextRequest) {
+ const { searchParams } = new URL(req.url);
+ const secret = searchParams.get('secret');
+ const slug = searchParams.get('slug');
+ if (secret !== process.env.SANITY_PREVIEW_SECRET) {
+ return new Response('Invalid token', { status: 401 });
+ }
+ (await draftMode()).enable();
+ redirect(`/posts/${slug}`);
+}
+```
+
+### Production Checklist
+- [ ] Webhook-based ISR revalidation configured.
+- [ ] Preview/draft mode working with CMS studio.
+- [ ] Image optimization pipeline (next/image or Sanity image URL builder).
+- [ ] Content backup/export strategy defined.
+- [ ] CORS and API permissions locked down.
+- [ ] CDN caching for API responses configured.
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`nextjs-app-router-expert`**: Pola pengambilan konten SSR/ISR dan strategi caching.
+- **`api-design-expert`**: Pola API REST/GraphQL untuk query CMS.
+- **`seo`**: Data terstruktur, sitemap, dan sinkronisasi metadata CMS.
+- **`astro-framework-expert`**: Content collections dan static site generation.
+
+### Deskripsi
+Panduan ahli untuk memilih, mengintegrasikan, dan mengoptimalkan platform Headless CMS dalam aplikasi web modern. Mencakup Sanity v3 (GROQ, Portable Text), Payload CMS 3.x (TypeScript-first, schema-as-code), Strapi 5 (open-source self-hosted), Contentful, dan Storyblok (visual editor). Termasuk modeling konten, preview mode, dan revalidasi instan berbasis webhook.
+
+### Kondisi Pemicu
+- Memilih dan mengintegrasikan headless CMS untuk aplikasi konten.
+- Membangun situs web kaya konten (blog, portal media, dokumentasi, landing page).
+- Menerapkan fitur live preview / draft mode di Next.js atau Astro.
+- Mengonfigurasi revalidasi cache instan saat konten diterbitkan di CMS.
+
+---
+
+### Implementasi Pola Kunci (TypeScript)
+
+#### 1. Definisi Skema Sanity v3 (Schema-as-Code)
+```typescript
+// sanity.config.ts
+import { defineConfig, defineField, defineType } from 'sanity';
+
+export const skemaArtikel = defineType({
+ name: 'artikel',
+ title: 'Artikel Blog',
+ type: 'document',
+ fields: [
+ defineField({ name: 'judul', type: 'string', validation: (r) => r.required() }),
+ defineField({ name: 'slug', type: 'slug', options: { source: 'judul' } }),
+ defineField({ name: 'isi', type: 'array', of: [{ type: 'block' }] }),
+ defineField({ name: 'diterbitkanPada', type: 'datetime' }),
+ ],
+});
+```
+
+#### 2. Query GROQ di Next.js 15 Server Component
+```typescript
+import { createClient } from 'next-sanity';
+
+const sanity = createClient({
+ projectId: process.env.SANITY_PROJECT_ID!,
+ dataset: 'production',
+ apiVersion: '2026-08-01',
+ useCdn: true,
+});
+
+export async function ambilDaftarArtikel() {
+ return await sanity.fetch(
+ `*[_type == "artikel"] | order(diterbitkanPada desc) {
+ judul, slug, diterbitkanPada,
+ "ringkasan": pt::text(isi)[0..200]
+ }`
+ );
+}
+```
+
+#### 3. Revalidasi Cache Otomatis via Webhook Next.js
+```typescript
+// app/api/revalidasi/route.ts
+import { revalidateTag } from 'next/cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+ const secret = req.headers.get('x-webhook-secret');
+ if (secret !== process.env.REVALIDATION_SECRET) {
+ return NextResponse.json({ error: 'Tidak sah' }, { status: 401 });
+ }
+ const body = await req.json();
+ revalidateTag(body._type); // Revalidasi cache berdasarkan tipe konten
+ return NextResponse.json({ sukses: true });
+}
+```
\ No newline at end of file
diff --git a/vibes-plug/skills/hig/SKILL.md b/vibes-plug/skills/hig/SKILL.md
new file mode 100644
index 000000000..2f32dc75f
--- /dev/null
+++ b/vibes-plug/skills/hig/SKILL.md
@@ -0,0 +1,300 @@
+---
+name: hig
+description: "Applies Human Interface Guidelines (HIG) principles — Hierarchy, Harmony, and Consistency — to UI/UX designs to ensure intuitive and cohesive interfaces / Menerapkan prinsip Human Interface Guidelines (HIG) — Hierarchy, Harmony, dan Consistency — pada desain UI/UX untuk memastikan antarmuka yang intuitif dan kohesif."
+author: "Roedy Rustam"
+
+version: "4.3.0"
+---
+
+# Human Interface Guidelines (HIG) Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `anti-slop`, `ui-ux-pro-max`, `design-system-architect`, `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Applies Human Interface Guidelines (HIG) principles to web and mobile UI/UX designs. Covers the core triad (Hierarchy, Harmony, Consistency), Apple's HIG 2026 updates, Google Material Design 3, spatial design for Apple Vision Pro, and modern accessibility requirements.
+
+### Trigger Conditions
+- Reviewing or critiquing a UI design for HIG violations.
+- Making design decisions about typography scale, color usage, or layout hierarchy.
+- Designing for multiple platforms (iOS, Android, web) with consistent patterns.
+- Evaluating whether a UI feels "premium" or "amateur".
+- Ensuring UI components follow platform conventions (button placement, nav patterns).
+
+### The Core HIG Triad
+
+#### 1. Hierarchy — Guide the User's Eye
+Visual hierarchy controls where the user looks first, how attention flows across information, and how confident they feel taking action (Linear/Apple/Stripe caliber).
+
+**Modular Typographic Hierarchy & Optical Tracking:**
+```css
+/* Strict 5-tier typographic scale with optical letter-spacing */
+.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
+.h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-text-primary); }
+.h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-text-primary); }
+.h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--color-text-primary); }
+.body { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0em; line-height: 1.6; color: var(--color-text-secondary); }
+.caption { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.01em; color: var(--color-text-tertiary); }
+.metric { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
+```
+
+**Spatial & Depth Hierarchy (Z-axis Surface Tiers):**
+- **Canvas (L0)**: Neutral background base (`bg-neutral-50 dark:bg-neutral-950`).
+- **Surface (L1)**: Content cards and panels — crisp 1px border (`border-neutral-200/80 dark:border-neutral-800`) + subtle ambient shadow (`shadow-xs`).
+- **Raised (L2)**: Active popovers, dropdown menus, hover elevation — (`shadow-md border border-neutral-200 dark:border-neutral-700`).
+- **Overlay (L3)**: Modals, slide-over sheets with backdrop blur — (`shadow-xl`).
+- **Floating (L4)**: Global toasts, command palette, floating action docks — (`shadow-2xl`).
+
+**Color & Focus Hierarchy (60-30-10 Principle):**
+- **60% Base**: Canvas and neutral containers.
+- **30% Structure**: Cards, borders, headers, and secondary surfaces.
+- **10% Accent**: Reserved strictly for the single primary conversion moment.
+- **Single Primary CTA Law**: Exactly ONE primary emphasized button per screen. All secondary actions must use outline, tonal, or ghost styling to eliminate choice paralysis.
+- **Destructive Actions**: Placed apart from primary paths, styled in danger color, with mandatory confirmation modals.
+
+**Gestalt Proximity & Layout Scanability:**
+- **Law of Proximity**: Control-label pairs must sit within 4–6px (`gap-1.5`). Distinct fieldsets sit at 16–24px. Page sections sit at 64–96px (`py-16 md:py-24`).
+- **F-Pattern Layout**: Left-aligned anchors for analytical dashboards, documents, and data tables.
+- **Z-Pattern Layout**: Diagonal flow for landing heroes and marketing narratives.
+
+#### 2. Harmony — Visual Cohesion
+All elements should feel like they belong to the same family.
+
+**Spacing Scale (8pt Grid):**
+```
+4px → xs gaps (icon padding, tight list items)
+8px → sm (between related elements)
+16px → md (card padding, section spacing)
+24px → lg (between sections)
+32px → xl (between major blocks)
+48px → 2xl (page-level separation)
+```
+
+**Border Radius Consistency:**
+- Small elements (badges, chips): `rounded-full` or `rounded-sm`
+- Medium elements (inputs, buttons): `rounded-md`
+- Large elements (cards, modals): `rounded-xl`
+- Never mix `rounded-none` with `rounded-2xl` in the same screen
+
+**Color Harmony:**
+```
+Analogous: Brand + ±30° hue neighbors (natural, calm)
+Complementary: Brand + 180° (high contrast, CTAs)
+Triadic: Brand + 120°/240° (vibrant, use sparingly)
+Monochromatic: Single hue, varying lightness (professional)
+```
+
+#### 3. Consistency — Reduce Cognitive Load
+Users should never wonder "how does this work?" — patterns should be predictable.
+
+**Platform Conventions (Web):**
+- Primary CTA: top-right (desktop nav) or bottom-center (mobile)
+- Destructive actions: always require confirmation dialogs
+- Form submission: Enter key submits, Escape cancels/closes
+- Navigation: Breadcrumbs for 3+ depth levels
+- Empty states: Always provide an actionable CTA
+
+**Component Consistency Checklist:**
+- [ ] Visual hierarchy is unmistakable: primary CTA stands out, secondary actions are subdued.
+- [ ] Typographic scale applies optical tracking (`tracking-tight` on large titles, `tracking-wider` on eyebrows).
+- [ ] Tabular numerals (`tabular-nums`) are enforced on all metrics, prices, and counters.
+- [ ] All buttons use the same radius (`rounded-md` everywhere).
+- [ ] All modals have the same padding (`p-6`) and close behavior (Escape key).
+- [ ] All form inputs have the same height (`h-9`) and focus ring style.
+- [ ] All error messages appear in the same position (below the input field).
+- [ ] All tables use the same row height, tabular numerals, and hover style.
+
+### Apple HIG 2026 Updates
+
+#### Spatial Design (Vision Pro)
+- Use **depth** as an organizational tool — foreground elements are more important.
+- Avoid placing interactive elements outside comfortable viewing angles (±45° center).
+- Use **glass morphism** (`backdrop-blur`) for panels to maintain spatial context.
+- Prefer indirect input (gaze + pinch) over precise pointer interactions.
+
+#### iOS 18 Design Patterns
+- **Liquid Glass**: Full glass-morphism on navigation bars and toolbars.
+- **Adaptive layouts**: Single codebase adapts from iPhone to iPad to Mac.
+- **Symbols**: SF Symbols 6 with variable rendering (multicolor, hierarchical).
+- **Menu patterns**: Context menus replace modal bottom sheets where possible.
+
+### Material Design 3 (Google) — Modern Architecture (https://m3.material.io/)
+
+#### 1. Dynamic Color & Algorithmic HCT System
+M3 generates accessible, harmonious color palettes dynamically from a seed color or wallpaper using Google's **HCT (Hue, Chroma, Tone)** perceptual color model:
+```typescript
+import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
+
+// Generates 5 tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant)
+const theme = themeFromSourceColor(argbFromHex('#6750A4'));
+// light/dark schemes guarantee WCAG AA contrast (Tone difference >= 40 or 50)
+```
+
+#### 2. Surface Container Hierarchy (Shadowless Elevation)
+Rather than relying solely on heavy drop shadows, modern M3 establishes depth through **Surface Container Tonal Tiers**:
+- `surface-dim` / `surface` / `surface-bright`: Root viewport surfaces.
+- `surface-container-lowest` & `surface-container-low`: Recessed or grouped cards.
+- `surface-container`: Default card, dialog, and panel containment.
+- `surface-container-high` & `surface-container-highest`: Elevated sheets, menus, and search bars.
+
+#### 3. Component Hierarchy & Tonal Tiers
+- **Buttons (5 Tiers)**:
+ - `Filled`: High-emphasis primary action (`bg-primary text-on-primary`).
+ - `Tonal`: Medium-high emphasis alternative (`bg-secondary-container text-on-secondary-container`).
+ - `Elevated`: High emphasis on textured/busy backgrounds with subtle shadow.
+ - `Outlined`: Medium-low emphasis secondary actions with clean border (`border-outline`).
+ - `Text`: Lowest emphasis action inside cards, dialog actions, or flat lists.
+- **Cards (3 Tiers)**: `Elevated` (resting 1dp shadow), `Filled` (`surface-container-highest`), and `Outlined` (`border-outline-variant`).
+- **Chips (4 Types)**: `Assist` (smart actions), `Filter` (toggled state), `Input` (tags/recipients), `Suggestion` (AI prompts).
+- **Navigation Adaptive Tiers**:
+ - `Compact (<600dp)`: Navigation Bar (Bottom 80dp, active pill indicator).
+ - `Medium (600-839dp)`: Navigation Rail (Side 80dp, top FAB + icon destinations).
+ - `Expanded (>=840dp)`: Navigation Drawer (Side 280-360dp, full persistent sidebar).
+
+#### 4. Design Triad Synthesis: Apple HIG vs Google M3
+| Dimension | Apple Human Interface Guidelines (HIG) | Google Material Design 3 (M3) |
+| :--- | :--- | :--- |
+| **Core Philosophy** | Content-First, Deference, Clarity | Expressive, Adaptive, Personalization (Material You) |
+| **Depth & Materials** | Liquid Glass, Vibrancy, Backdrop Blurs | Surface Container Tonal Tiers + Tonal Tinting |
+| **Color Model** | Semantic System Colors + Dark Mode Pairs | Algorithmic HCT Space + 5 Dynamic Tonal Palettes |
+| **Iconography** | SF Symbols 6 (Multicolor, Hierarchical) | Material Symbols (Variable axes: Weight, Grade, Fill) |
+| **Touch Targets** | Minimum 44×44pt | Recommended 48×48dp (Minimum 24×24dp) |
+| **Corner Curvature** | Continuous Squircle / Superellipse | Explicit Radii Scale (0, 4, 8, 12, 16, 28, 9999px) |
+
+### HIG Audit Protocol
+When reviewing a design, check:
+1. **Hierarchy**: Is the primary action immediately obvious? Is text contrast sufficient?
+2. **Harmony**: Is spacing consistent (8pt grid)? Are border radii uniform?
+3. **Consistency**: Do interactive elements follow platform conventions?
+4. **Accessibility**: Does it pass WCAG 2.2? Are touch targets ≥ 24×24px?
+5. **Platform fit**: Does it feel native to its target platform?
+6. **Anti-Slop Visual Cleanliness (`anti-slop`)**: Are generic purple/cyan AI gradients banned? Are all 5 interactive states accounted for? Is the content free of "Lorem Ipsum" filler? Are border-radii coherent across the entire view?
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `anti-slop`, `ui-ux-pro-max`, `design-system-architect`, `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Menerapkan prinsip Human Interface Guidelines (HIG) pada desain UI/UX web dan mobile. Mencakup triad inti (Hierarchy, Harmony, Consistency), pembaruan Apple HIG 2026, Google Material Design 3, desain spasial untuk Apple Vision Pro, dan persyaratan aksesibilitas modern.
+
+### Kondisi Pemicu
+- Meninjau atau mengkritik desain UI untuk pelanggaran HIG.
+- Membuat keputusan desain tentang skala tipografi, penggunaan warna, atau hierarki tata letak.
+- Merancang untuk berbagai platform (iOS, Android, web) dengan pola yang konsisten.
+- Mengevaluasi apakah UI terasa "premium" atau "amatir".
+- Memastikan komponen UI mengikuti konvensi platform.
+
+### Triad HIG Inti
+
+#### 1. Hierarki — Pandu Mata Pengguna
+Hierarki visual mengontrol ke mana pengguna melihat pertama kali, bagaimana perhatian mengalir melintasi informasi, dan memunculkan rasa percaya diri saat mengambil aksi (standar kaliber Apple/Linear/Stripe).
+
+- **Skala Tipografi Modular & Tracking Optik**:
+ - **Eyebrow**: 11px / 0.6875rem, bobot 600, `tracking-wider`, uppercase — konteks kategori tanpa berebut fokus.
+ - **Judul Utama (H1)**: 40px / 2.5rem, bobot 700, `tracking-tight`, leading padat (1.15) — jangkar otoritas visual.
+ - **Subjudul (H2)**: 28px / 1.75rem, bobot 600, `tracking-tight`, leading 1.25.
+ - **Judul Bagian (H3)**: 20px / 1.25rem, bobot 600, leading 1.35.
+ - **Teks Tubuh (Body)**: 15–16px, bobot 400, leading santai (1.6) untuk kenyamanan membaca.
+ - **Angka Metrik**: Wajib menggunakan angka tabular (`tabular-nums`) agar angka metrik dan tabel tidak bergeser horizontal saat berubah.
+
+- **Tingkatan Permukaan & Elevasi Sumbu-Z**:
+ - **Kanvas (L0)**: Latar belakang aplikasi netral (`bg-neutral-50 dark:bg-neutral-950`).
+ - **Surface (L1)**: Kartu dan panel konten — border 1px tajam (`border-neutral-200/80 dark:border-neutral-800`) dipadu bayangan ambient mikro (`shadow-xs`).
+ - **Raised (L2)**: Popover, dropdown, kartu hover (`shadow-md border border-neutral-200 dark:border-neutral-700`).
+ - **Overlay (L3)**: Dialog modal, slide-over dengan backdrop halus (`shadow-xl`).
+ - **Floating (L4)**: Toast notifikasi, command palette, dock navigasi melayang (`shadow-2xl`).
+
+- **Hierarki Warna & Fokus (Aturan 60-30-10)**:
+ - **60% Basis**: Kanvas dan latar belakang netral.
+ - **30% Struktur**: Kartu, batas pembatas, header, dan permukaan sekunder.
+ - **10% Aksen**: Dikhususkan eksklusif untuk momen konversi utama.
+ - **Hukum Single Primary CTA**: Hanya SATU tombol aksi utama yang menonjol per layar. Aksi sekunder wajib bergaya outline atau ghost.
+ - **Aksi Destruktif**: Berwarna merah, diletakkan terpisah dari CTA utama, wajib dengan dialog konfirmasi.
+
+- **Kedekatan Gestalt & Pola Pindai**:
+ - **Hukum Kedekatan**: Label dan kontrol berjarak rapat (4–6px). Grup form berjarak 16–24px. Seksi halaman berjarak lega (64–96px).
+ - **Pola F**: Untuk dashboard analitik, feed data, dan tabel.
+ - **Pola Z**: Untuk landing page promosi dan alur pengenalan produk.
+
+#### 2. Harmoni — Kohesi Visual
+Semua elemen harus terasa seperti milik keluarga yang sama.
+- **Skala spacing (grid 8pt)**: 4px, 8px, 16px, 24px, 32px, 48px.
+- **Konsistensi border radius**: Elemen kecil (rounded-full), sedang (rounded-md), besar (rounded-xl). Jangan campurkan rounded-none dengan rounded-2xl di layar yang sama.
+- **Harmoni warna**: Analogis, komplementer, triadik, atau monokromatik — pilih satu skema dan patuhi.
+
+#### 3. Konsistensi — Kurangi Beban Kognitif
+Pengguna tidak pernah bertanya-tanya "bagaimana cara ini bekerja?" — pola harus dapat diprediksi.
+- Konvensi platform: CTA utama di kanan atas (nav desktop) atau bawah tengah (mobile).
+- Aksi destruktif selalu memerlukan dialog konfirmasi.
+- Semua komponen sejenis menggunakan radius, padding, dan perilaku yang sama.
+
+### Pembaruan Apple HIG 2026
+
+#### Desain Spasial (Vision Pro)
+Gunakan kedalaman sebagai alat organisasi. Gunakan glass-morphism (`backdrop-blur`) untuk panel. Hindari elemen interaktif di luar sudut pandang yang nyaman.
+
+#### Pola iOS 18
+Liquid Glass untuk navigation bar. Tata letak adaptif dari iPhone ke iPad ke Mac. SF Symbols 6 dengan rendering variabel.
+
+### Material Design 3 (Google) — Arsitektur Modern (https://m3.material.io/)
+
+#### 1. Warna Dinamis & Sistem HCT Algoritmik
+M3 menghasilkan palet warna yang harmonis dan aksesibel secara dinamis dari warna seed atau wallpaper pengguna menggunakan model warna perseptual **HCT (Hue, Chroma, Tone)**:
+```typescript
+import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
+
+// Menghasilkan 5 palet tonal (Primary, Secondary, Tertiary, Neutral, Neutral Variant)
+const theme = themeFromSourceColor(argbFromHex('#6750A4'));
+// Skema mode terang/gelap menjamin kontras WCAG AA (perbedaan Tone >= 40 atau 50)
+```
+
+#### 2. Hierarki Surface Container (Elevasi Tanpa Bayangan Tebal)
+Alih-alih hanya mengandalkan drop shadow tebal, M3 modern menetapkan kedalaman melalui **Tingkatan Tonal Surface Container**:
+- `surface-dim` / `surface` / `surface-bright`: Permukaan viewport dasar.
+- `surface-container-lowest` & `surface-container-low`: Kartu bersarang atau pengelompokan list.
+- `surface-container`: Kontainer default kartu, dialog, dan panel.
+- `surface-container-high` & `surface-container-highest`: Lembar melayang (sheet), menu, dan search bar.
+
+#### 3. Hierarki Komponen & Tingkatan Tonal
+- **Tombol (5 Tingkatan)**:
+ - `Filled`: Aksi utama berpenekanan tinggi (`bg-primary text-on-primary`).
+ - `Tonal`: Alternatif berpenekanan sedang-tinggi (`bg-secondary-container text-on-secondary-container`).
+ - `Elevated`: Penekanan tinggi pada latar belakang bertekstur/sibuk dengan bayangan halus.
+ - `Outlined`: Aksi sekunder berpenekanan sedang-rendah dengan garis batas bersih (`border-outline`).
+ - `Text`: Aksi berpenekanan terendah di dalam kartu, dialog, atau list datar.
+- **Kartu (3 Tingkat)**: `Elevated` (bayangan 1dp saat diam), `Filled` (`surface-container-highest`), dan `Outlined` (`border-outline-variant`).
+- **Chip (4 Tipe)**: `Assist` (aksi pintar), `Filter` (status toggle), `Input` (tag/entitas), `Suggestion` (rekomendasi AI).
+- **Navigasi Adaptif M3**:
+ - `Compact (<600dp)`: Navigation Bar (Bawah 80dp, indikator pil aktif).
+ - `Medium (600-839dp)`: Navigation Rail (Sisi vertikal 80dp, FAB atas + ikon destinasi).
+ - `Expanded (>=840dp)`: Navigation Drawer (Sidebar permanen 280-360dp).
+
+#### 4. Sintesis Triad Desain: Apple HIG vs Google M3
+| Dimensi | Apple Human Interface Guidelines (HIG) | Google Material Design 3 (M3) |
+| :--- | :--- | :--- |
+| **Filosofi Inti** | Content-First, Deference, Kejelasan | Ekspresif, Adaptif, Personalisasi (Material You) |
+| **Kedalaman & Material** | Liquid Glass, Vibrancy, Efek Blur | Tingkatan Tonal Surface Container + Surface Tinting |
+| **Model Warna** | Semantic System Colors + Pasangan Dark Mode | Ruang Algoritmik HCT + 5 Palet Tonal Dinamis |
+| **Ikonografi** | SF Symbols 6 (Multicolor, Hierarchical) | Material Symbols (Variabel: Weight, Grade, Fill) |
+| **Target Sentuh** | Minimal 44×44pt | Disarankan 48×48dp (Minimal 24×24dp) |
+| **Kelengkungan Sudut** | Continuous Squircle / Superellipse | Skala Radius Eksplisit (0, 4, 8, 12, 16, 28, 9999px) |
+
+### Protokol Audit HIG
+Saat meninjau desain, periksa:
+1. **Hierarki**: Apakah aksi utama langsung terlihat jelas? Apakah kontras teks memadai?
+2. **Harmoni**: Apakah spacing konsisten (grid 8pt)? Apakah border radius seragam?
+3. **Konsistensi**: Apakah elemen interaktif mengikuti konvensi platform?
+4. **Aksesibilitas**: Apakah lulus WCAG 2.2? Apakah target sentuh ≥ 24×24px?
+5. **Kesesuaian Platform**: Apakah terasa native untuk platform target?
+6. **Kebersihan Visual Anti-Slop (`anti-slop`)**: Apakah gradien neon AI ungu/sian generik dilarang? Apakah kelima status interaktif terpenuhi? Apakah konten bebas dari teks pengisi "Lorem Ipsum"? Apakah border-radius seragam dan koheren di seluruh layar?
\ No newline at end of file
diff --git a/vibes-plug/skills/js-backend-expert/SKILL.md b/vibes-plug/skills/js-backend-expert/SKILL.md
new file mode 100644
index 000000000..aaebfce51
--- /dev/null
+++ b/vibes-plug/skills/js-backend-expert/SKILL.md
@@ -0,0 +1,221 @@
+---
+name: js-backend-expert
+description: "Expert-level skill for Node.js 24+ (LTS), Bun 1.2+, and Deno 2.x backend development. Covers Express 5, Fastify 5, Hono v4, NestJS, Prisma 6, Drizzle ORM, WebSockets, BullMQ, OpenTelemetry, and microservices in English and Indonesian."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# JS Backend Expert (Node.js 24 LTS / Bun 1.2 / Deno 2.x Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Description
+Production-grade guidance for building fast, scalable, and resilient JavaScript/TypeScript backend APIs, microservices, and serverless functions across **Node.js 24 (LTS)**, **Bun 1.2+**, and **Deno 2.x**. Covers high-throughput frameworks (Fastify 5, Hono, Express 5, NestJS), type-safe ORMs (Drizzle, Prisma 6), **Hono RPC** for type-safe full-stack communication, Edge Runtime patterns, WebSockets, BullMQ background jobs, graceful shutdown handling, and self-healing test pipelines.
+
+### Trigger Conditions
+- Bootstrapping or refactoring a Node.js, Bun, or Deno backend application or microservice.
+- Writing RESTful, GraphQL, WebSocket, or SSE (Server-Sent Events) API endpoints.
+- Developing web servers using **Fastify 5**, **Hono**, **Express 5**, or **NestJS**.
+- Building type-safe full-stack apps with **Hono RPC** or **tRPC**.
+- Deploying backend logic to Edge Runtimes (Cloudflare Workers, Vercel Edge).
+- Interacting with databases using **Drizzle ORM**, **Prisma 6**, or **Kysely**.
+- Setting up background job processing with **BullMQ** and **Redis**.
+- Implementing rate limiting, CORS, Content Security Policy (CSP), and JWT/Session authentication.
+- Writing backend tests using **Vitest**, **Supertest**, or Node's native `node:test` runner with automated self-healing.
+
+### Runtime Matrix (Node.js 24 vs Bun 1.2 vs Deno 2.x)
+
+| Feature / Runtime | Node.js 24 (LTS) | Bun 1.2+ | Deno 2.x |
+|---|---|---|---|
+| Module Standard | Native ESM / CJS | Native ESM / CJS | Native ESM |
+| `.env` Loading | Native `--env-file` | Native | Native |
+| TypeScript Execution | Native `--experimental-strip-types` / `tsx` | Native (Zero-config) | Native (Zero-config) |
+| HTTP Server | `node:http` / `Fastify` | `Bun.serve()` / `Hono` | `Deno.serve()` / `Hono` |
+| Native WebSockets | Built-in (`WebSocket`) | Built-in (`Bun.serve`) | Built-in (`Deno.upgradeWebSocket`) |
+| Package Manager | npm / pnpm | bun (built-in) | npm / jsr |
+| Test Runner | `node:test` / Vitest | `bun test` | `deno test` |
+| Edge Deploy | Vercel Serverless | Railway / Fly.io | Deno Deploy |
+
+### Framework Guidance
+
+#### 1. Fastify 5 (High-Throughput & Schema Validation)
+Use Fastify for performance-critical REST APIs. Always validate input using **TypeBox** or **Zod**:
+```typescript
+import Fastify from 'fastify';
+import { z } from 'zod';
+
+const app = Fastify({ logger: true });
+
+app.post('/api/users', async (request, reply) => {
+ const bodySchema = z.object({
+ email: z.string().email(),
+ name: z.string().min(2),
+ });
+ const data = bodySchema.parse(request.body);
+ return reply.status(201).send({ status: 'created', user: data });
+});
+```
+
+#### 2. Hono (Multi-Runtime & Hono RPC)
+Use Hono for cross-runtime backends. The killer feature in 2026 is **Hono RPC** — end-to-end type-safe API calls without code generation:
+```typescript
+// server.ts
+import { Hono } from 'hono';
+import { zValidator } from '@hono/zod-validator';
+import { z } from 'zod';
+
+const app = new Hono()
+ .get('/health', (c) => c.json({ status: 'ok' }))
+ .post(
+ '/users',
+ zValidator('json', z.object({ name: z.string(), email: z.string().email() })),
+ async (c) => {
+ const body = c.req.valid('json');
+ const user = await db.user.create({ data: body });
+ return c.json(user, 201);
+ }
+ );
+
+export type AppType = typeof app;
+export default app;
+
+// client.ts — fully type-safe, no codegen needed
+import { hc } from 'hono/client';
+import type { AppType } from './server';
+
+const client = hc('http://localhost:3000');
+const res = await client.users.$post({ json: { name: 'Alice', email: 'alice@example.com' } });
+const user = await res.json(); // Fully typed!
+```
+
+#### 3. NestJS (Enterprise Architecture)
+Use NestJS for large-scale, enterprise-grade applications. It enforces a strict modular architecture (Controllers, Providers, Modules) inspired by Angular.
+- **Dependency Injection**: Leverage built-in DI for testable, loosely coupled services.
+- **TypeScript First**: Decorators (`@Controller()`, `@Get()`) provide clean, declarative routing.
+- **Under the Hood**: By default uses Express, but can be switched to Fastify for higher performance using `platform-fastify`.
+
+#### 4. Express 5
+Express 5 natively catches rejected promises in async route handlers — eliminating the need for `express-async-errors`. While less opinionated than NestJS and slower than Fastify, its ecosystem is unparalleled. Ideal for teams migrating legacy apps.
+
+#### 5. Edge Runtime (Cloudflare Workers / Vercel Edge)
+For ultra-low latency at the edge, use **Hono** (runs natively on all edge platforms):
+```typescript
+// Cloudflare Worker
+export default {
+ async fetch(request: Request, env: Env): Promise {
+ return app.fetch(request, env);
+ }
+};
+```
+Edge Runtime restrictions: No Node.js built-ins (`fs`, `path`), limited memory, no long-running processes. Use `fetch`, Web Crypto API, and Cloudflare KV/D1/R2.
+
+---
+
+### Type-Safe Data Layer (Drizzle ORM & Prisma 6)
+- **Drizzle ORM**: Prefer for zero-overhead, SQL-like TypeScript query building in serverless/edge applications.
+- **Prisma 6**: Prefer for complex relational schema modeling, auto-generated TypeScript client, and rich `prisma studio` tooling.
+- **Connection Pooling**: Always use connection poolers (PgBouncer, Supavisor, Neon Hyperdrive) when deploying serverless handlers.
+
+### Background Jobs (BullMQ + Redis)
+```typescript
+import { Queue, Worker } from 'bullmq';
+import { Redis } from 'ioredis';
+
+const connection = new Redis({ maxRetriesPerRequest: null });
+const emailQueue = new Queue('email', { connection });
+
+// Enqueue
+await emailQueue.add('welcome-email', { userId: '123' }, { delay: 1000 });
+
+// Worker
+const worker = new Worker('email', async (job) => {
+ await sendWelcomeEmail(job.data.userId);
+}, { connection, concurrency: 5 });
+```
+
+### Graceful Shutdown & Resilience
+Never terminate the process abruptly. Clean up database pools, HTTP listeners, and Redis queues:
+```typescript
+const shutdown = async (signal: string) => {
+ console.log(`Received ${signal}. Shutting down gracefully...`);
+ await server.close();
+ await dbPool.end();
+ await worker.close();
+ process.exit(0);
+};
+
+process.on('SIGTERM', () => shutdown('SIGTERM'));
+process.on('SIGINT', () => shutdown('SIGINT'));
+```
+
+## Orchestration & Integration
+- **Upstream Orchestrator**: Executes during **Phase 4** of `zero-to-prod-orchestrator` or after backend decision lock in `brainstorming`.
+- **API Contracts & Specs**: Delegate OpenAPI / GraphQL / gRPC design to `api-design-expert` and TypeScript type generation to `typescript-expert`.
+- **Database & ORM Layer**: Delegate schema design, migrations, and pooling to `database-orm-expert`.
+- **Authentication & Security**: Delegate JWT/OAuth2 flows to `authentication-identity-expert` and environment secret security to `zero-trust-secret-vault`.
+- **Durable Async Jobs**: Delegate fault-tolerant long-running workflows to `async-queue-temporal-expert`.
+- **Error Resilience**: Implement error handling patterns and circuit breakers via `error-resilience-expert`.
+- **Automated Testing & Self-Healing**: Delegate test suites to `e2e-testing-expert` and autonomous terminal stack trace fixing to `autonomous-tdd-debugger`. Update change logs via `prd-architect`.
+- **Zero-Slop Production Readiness**: Enforce `anti-slop` compliance (100% complete handlers, no placeholder returns, no swallowed catch blocks) and verify with `node scripts/check-anti-slop.js --strict`.
+
+---
+
+
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan tingkat produksi untuk membangun API backend JavaScript/TypeScript yang cepat, skalabel, dan tangguh di lingkungan **Node.js 24 LTS**, **Bun 1.2+**, dan **Deno 2.x**. Mencakup framework berkinerja tinggi (Fastify 5, Hono v4, Express 5, NestJS), ORM type-safe (Drizzle, Prisma 6), **Hono RPC** untuk komunikasi full-stack type-safe, pola Edge Runtime, WebSocket, background jobs (BullMQ), OpenTelemetry, penanganan *graceful shutdown*, dan pipeline pengujian self-healing.
+
+### Kondisi Pemicu
+- Merancang atau merefaktor aplikasi backend Node.js, Bun, atau Deno.
+- Menulis endpoint RESTful, GraphQL, WebSocket, atau SSE.
+- Membangun web server dengan Fastify 5, Hono, Express 5, atau NestJS.
+- Membangun aplikasi full-stack type-safe dengan **Hono RPC** atau tRPC.
+- Men-deploy logika backend ke Edge Runtime (Cloudflare Workers, Vercel Edge).
+- Berinteraksi dengan database menggunakan Drizzle ORM, Prisma 6, atau Kysely.
+- Mengatur background job dengan BullMQ dan Redis.
+
+### Matriks Runtime
+Node.js 24 sebagai LTS terbaru, Bun 1.2+ untuk performa maksimal dan zero-config TypeScript, Deno 2.x untuk keamanan bawaan dan kompatibilitas npm.
+
+### Panduan Framework
+
+#### 1. Fastify 5 — Kinerja Tinggi & Validasi Skema
+Gunakan untuk REST API dengan throughput tinggi. Selalu validasi input menggunakan TypeBox atau Zod.
+
+#### 2. Hono & Hono RPC — Multi-Runtime & Type-Safe Full-Stack
+Hono berjalan di Node.js, Bun, Cloudflare Workers, dan Deno. **Hono RPC** adalah fitur unggulan 2026 — panggilan API end-to-end yang fully type-safe tanpa code generation. Klien mendapatkan tipe yang tepat dari definisi server secara otomatis.
+
+#### 3. NestJS — Arsitektur Enterprise
+Gunakan NestJS untuk aplikasi skala besar tingkat *enterprise*. NestJS memaksakan arsitektur modular yang ketat dengan Dependency Injection dan Decorators. NestJS menggunakan Express secara bawaan, namun dapat dialihkan ke Fastify untuk performa lebih tinggi.
+
+#### 4. Express 5
+Express 5 otomatis menangkap rejected promises di async route handler tanpa butuh library tambahan. Sangat cocok untuk tim yang sudah familiar dengan ekosistem Express.
+
+#### 5. Edge Runtime (Cloudflare Workers / Vercel Edge)
+Gunakan Hono untuk latensi ultra-rendah di edge. Batasan edge: tanpa built-in Node.js (`fs`, `path`), memori terbatas, tanpa proses long-running. Gunakan `fetch`, Web Crypto API, dan Cloudflare KV/D1/R2.
+
+### Lapisan Data Type-Safe
+- **Drizzle ORM**: Ideal untuk serverless/edge dengan query bergaya SQL dan zero overhead.
+- **Prisma 6**: Ideal untuk pemodelan skema relasional kompleks dan tooling prisma studio yang kaya.
+- **Connection Pooling**: Wajib di lingkungan serverless — gunakan PgBouncer, Supavisor, atau Neon Hyperdrive.
+
+### Background Jobs (BullMQ + Redis)
+Gunakan BullMQ dengan Redis untuk pemrosesan tugas latar belakang yang andal dengan retry otomatis, delay, dan konkurensi yang dapat dikonfigurasi.
+
+### Graceful Shutdown
+Jangan hentikan proses secara mendadak. Bersihkan connection pool, HTTP server, dan worker queue sebelum keluar.
+
+## Integrasi Orkestrasi
+- **Orkestrator Utama**: Dieksekusi pada **Fase 4** dari `zero-to-prod-orchestrator` atau setelah finalisasi backend di `brainstorming`.
+- **Kontrak & Spesifikasi API**: Delegasikan desain OpenAPI / GraphQL / gRPC ke `api-design-expert` dan tipe TypeScript ke `typescript-expert`.
+- **Database & ORM**: Delegasikan desain skema, migrasi, dan pooling ke `database-orm-expert`.
+- **Autentikasi & Keamanan**: Delegasikan alur JWT/OAuth2 ke `authentication-identity-expert` dan keamanan kredensial ke `zero-trust-secret-vault`.
+- **Pekerjaan Asinkron Tahan Gagal**: Delegasikan workflow kompleks ke `async-queue-temporal-expert`.
+- **Ketahanan Error**: Terapkan pola penanganan error dan circuit breaker melalui `error-resilience-expert`.
+- **Pengujian & Self-Healing**: Delegasikan pengujian integrasi ke `e2e-testing-expert` dan perbaikan otomatis stack trace error terminal ke `autonomous-tdd-debugger`. Perbarui catatan perubahan via `prd-architect`.
\ No newline at end of file
diff --git a/vibes-plug/skills/kv-cache-prefix-optimizer/SKILL.md b/vibes-plug/skills/kv-cache-prefix-optimizer/SKILL.md
new file mode 100644
index 000000000..5de24f057
--- /dev/null
+++ b/vibes-plug/skills/kv-cache-prefix-optimizer/SKILL.md
@@ -0,0 +1,219 @@
+---
+name: kv-cache-prefix-optimizer
+description: "Expert guide for deterministic prompt prefix engineering, KV-cache locking for Gemini 4 Pro / Claude 5.5 / GPT Astra 6, canonical tool sorting, and achieving 90%+ prompt cache hit rates / Panduan ahli rekayasa prefix prompt deterministik, penguncian KV-cache untuk Gemini 4 Pro / Claude 5.5 / GPT Astra 6, pengurutan kanonikal tool, dan pencapaian 90%+ cache hit rate."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# kv-cache-prefix-optimizer — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with `brainstorming`, `zero-to-prod-orchestrator`, `frontier-ai-models-expert`, `llm-finops-router`, `gemini-agent-booster`, and `vercel-ai-sdk-expert` to structure multi-turn prompts for maximum KV-cache reuse, slashing token billing by up to 80% and reducing Time-to-First-Token (TTFT) by up to 10x.
+
+### Description
+Production guide for engineering deterministic prompt prefixes, stabilizing KV-cache boundaries, and optimizing context reuse across frontier models (Google Gemini 4 Pro / 3.x context caching, Anthropic Claude 5.5 prompt caching, and OpenAI prefix caching). Delivers architectures that guarantee 90%+ cache hit rates through canonical tool definition sorting, stable JSON serialization, and dynamic context partitioning.
+
+### Trigger Conditions
+Activate this skill when:
+- Operating large-context agents (>100k tokens) where recurring prompt costs dominate operational budgets.
+- Experiencing high Time-to-First-Token (TTFT) latencies in interactive chat or agentic coding loops.
+- Configuring model caching primitives (`cache_control: { type: 'ephemeral' }` or Gemini explicit cache tokens).
+- Architecting system instructions, tool schemas, and workspace context maps for multi-turn sessions.
+
+---
+
+### Core Concepts & Patterns
+
+#### 1. The Anatomy of a High-Cache Prompt
+Modern frontier models utilize prefix-matching algorithms. Even a single changed byte (such as a timestamp, random ID, or altered tool order) invalidates all subsequent cached tokens:
+
+```
+[STATIC PREFIX: CACHE PINNED (90%+ HIT RATE)]
+ ├── System Directives & Behavioral Guardrails (Immutable)
+ ├── 140-Skill Ecosystem Registry (Canonical Alphabetical Order)
+ ├── Tool Definitions (Strictly Sorted Keys & Parameters)
+ └── Workspace Schema & Architecture Map (Immutable per Session)
+------------------------ [CACHE BOUNDARY PIN] ------------------------
+[DYNAMIC SUFFIX: VOLATILE PER TURN]
+ ├── Ephemeral Turn Timestamp & User Message
+ └── Real-Time Tool Execution Results
+```
+
+#### 2. Deterministic Prompt & Cache Pinning (TypeScript Implementation)
+
+```typescript
+export interface ToolDefinition {
+ name: string;
+ description: string;
+ parameters: Record;
+}
+
+export function serializeCanonicalJson(obj: unknown): string {
+ if (obj === null || typeof obj !== 'object') {
+ return JSON.stringify(obj);
+ }
+ if (Array.isArray(obj)) {
+ return `[${obj.map((item) => serializeCanonicalJson(item)).join(',')}]`;
+ }
+ const sortedKeys = Object.keys(obj as Record).sort();
+ const entries = sortedKeys.map(
+ (key) => `${JSON.stringify(key)}:${serializeCanonicalJson((obj as Record)[key])}`
+ );
+ return `{${entries.join(',')}}`;
+}
+
+export function sortToolsCanonically(tools: ToolDefinition[]): ToolDefinition[] {
+ return [...tools].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export interface PromptPayload {
+ systemPrompt: string;
+ cachedContextBlock: {
+ type: 'text';
+ text: string;
+ cache_control: { type: 'ephemeral' };
+ };
+ messages: Array<{ role: 'user' | 'assistant'; content: string }>;
+}
+
+export function constructCacheOptimizedPayload(
+ systemDirectives: string,
+ staticWorkspaceContext: string,
+ tools: ToolDefinition[],
+ userTurns: Array<{ role: 'user' | 'assistant'; content: string }>
+): PromptPayload {
+ const sortedTools = sortToolsCanonically(tools);
+ const canonicalToolSpecs = serializeCanonicalJson(sortedTools);
+
+ const staticPinnedBlock = [
+ '=== IMMUTABLE SYSTEM CONTEXT ===',
+ systemDirectives,
+ '=== CANONICAL TOOL REGISTRY ===',
+ canonicalToolSpecs,
+ '=== PROJECT ARCHITECTURAL MAP ===',
+ staticWorkspaceContext
+ ].join('\n\n');
+
+ return {
+ systemPrompt: 'You are an advanced sovereign AI coding agent operating under strict anti-slop guidelines.',
+ cachedContextBlock: {
+ type: 'text',
+ text: staticPinnedBlock,
+ cache_control: { type: 'ephemeral' }
+ },
+ messages: userTurns
+ };
+}
+```
+
+#### 3. Cache Performance & Telemetry Targets
+
+| Metric | Unoptimized Baseline | KV-Cache Optimized Target | Improvement Factor |
+| :--- | :--- | :--- | :--- |
+| **Cache Hit Ratio** | 0% - 20% | **90% - 98%** | **4.5x - 5x higher** |
+| **Time-to-First-Token (TTFT)** | 3,200ms - 5,500ms | **250ms - 450ms** | **~10x faster response** |
+| **Prompt Token Cost** | 100% full rate | **20% - 25% discounted rate** | **75% - 80% cost reduction** |
+
+---
+
+### Best Practices
+
+1. **Never Insert Timestamps in System Prompts**: Place dates or timestamps exclusively in the final volatile user message, never in the static system prompt.
+2. **Sort Tool Definitions Alphabetically**: Always sort tool names and their JSON schema parameter keys canonically before sending requests.
+3. **Partition Dynamic Context to the Tail**: Ensure all large documentation and code context maps appear before volatile conversation history.
+4. **Monitor Cache Read Discrepancies**: Log `usage.prompt_tokens_details.cached_tokens` in application telemetry to catch accidental prefix cache busts immediately.
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Operational Consequence | Engineering Remedy |
+| :--- | :--- | :--- |
+| Dynamic session IDs embedded in the system prompt | 100% cache invalidation on every user session | Relocate session IDs to application state headers |
+| Randomized order of tools from `Object.values(tools)` | Non-deterministic JSON payload busts KV cache | Sort tools alphabetically by name and schema keys |
+| Modifying instruction wording midway through conversation | Re-reads entire 100k+ token context at full price | Keep static prompt templates strictly versioned and immutable |
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+- `frontier-ai-models-expert` — Align with caching specs across Gemini 4 Pro, Claude 5.5, and GPT Astra 6.
+- `llm-finops-router` — Calculate financial savings and route cache-heavy workloads to optimal endpoints.
+- `gemini-agent-booster` — Exploit Google Cloud native 2M context caching mechanisms.
+- `vercel-ai-sdk-expert` — Implement provider options for Anthropic and Google cache controls.
+
+### Referenced By Orchestrators (MANDATORY)
+
+- `brainstorming` — Added to "Integrasi AI & LLM" and "Frontier AI & Simulation" matrix rows.
+- `zero-to-prod-orchestrator` — Integrated in Phase 4 (Backend APIs, Microservices & AI Agents).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi dengan `brainstorming`, `zero-to-prod-orchestrator`, `frontier-ai-models-expert`, `llm-finops-router`, `gemini-agent-booster`, dan `vercel-ai-sdk-expert` untuk menyusun prompt multi-turn dengan efisiensi KV-cache maksimal, menghemat biaya token hingga 80% dan memangkas waktu respons awal (TTFT) hingga 10x lebih cepat.
+
+### Deskripsi
+Panduan produksi untuk merekayasa awalan (*prefix*) prompt yang deterministik, mengunci batas KV-cache, dan memaksimalkan penggunaan ulang konteks pada model frontier (Google Gemini 4 Pro / 3.x context caching, Anthropic Claude 5.5 prompt caching, dan OpenAI prefix caching). Memberikan arsitektur yang menjamin tingkat keberhasilan cache (*cache hit rate*) di atas 90% melalui pengurutan definisi tool kanonikal, serialisasi JSON stabil, dan partisi konteks dinamis.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika:
+- Mengelola agen berkonteks besar (>100k token) dengan biaya input token berulang yang signifikan.
+- Mengalami latensi tinggi pada Time-to-First-Token (TTFT) saat percakapan atau coding loop interaktif.
+- Mengonfigurasi parameter caching model (`cache_control: { type: 'ephemeral' }` atau Gemini explicit caching).
+- Merancang instruksi sistem, skema tool, dan peta repositori untuk sesi multi-turn.
+
+---
+
+### Konsep Inti & Pola Praktik
+
+#### 1. Anatomi Prompt Ber-Cache Tinggi
+Model frontier mencocokkan token awalan secara persis (*prefix matching*). Perubahan satu karakter saja di awal prompt akan merusak seluruh cache setelahnya:
+- **Blok Statis (Terkunci)**: Instruksi sistem, daftar 140 skill, skema tool terurut, dan peta arsitektur proyek.
+- **Titik Kunci Cache (*Cache Pin*)**: Menandai akhir blok statis dengan header kontrol cache.
+- **Blok Volatil (Dinamis)**: Riwayat percakapan terkini dan hasil eksekusi tool giliran terakhir.
+
+#### 2. Serialisasi JSON Kanonikal
+Kunci objek JSON wajib diurutkan secara alfabetis sebelum dikirimkan ke model agar representasi string biner tidak berubah antar permintaan.
+
+---
+
+### Praktik Terbaik
+
+1. **Jangan Taruh Timestamp di System Prompt**: Masukkan waktu atau tanggal hanya pada pesan user paling akhir, bukan pada blok instruksi utama.
+2. **Urutkan Definisi Tool Secara Alfabetis**: Selalu lakukan *sorting* pada daftar nama fungsi dan parameter tool.
+3. **Posisikan Data Dinamis di Bagian Akhir**: Taruh seluruh dokumen referensi dan kode sebelum giliran pesan pengguna.
+4. **Pantau Metrik Cache**: Pantau token yang terbaca dari cache melalui telemetri guna mendeteksi jika terjadi *cache bust* yang tidak disengaja.
+
+---
+
+### Jebakan Umum yang Harus Dihindari
+
+| Praktik Buruk | Dampak Buruk | Solusi Rekayasa |
+| :--- | :--- | :--- |
+| Menyisipkan ID sesi acak ke dalam system prompt | Cache batal 100% pada setiap sesi baru | Pindahkan ID sesi ke header aplikasi di luar prompt |
+| Urutan tool berubah-ubah dari `Object.values(tools)` | Representasi string berubah dan membatalkan KV cache | Urutkan tool secara alfabetis berdasarkan namanya |
+| Mengubah redaksi instruksi di tengah percakapan | Membaca ulang 100k+ token dengan harga penuh | Kunci template instruksi dalam keadaan statis dan terversi |
+
+---
+
+### Integrasi dengan Skill Lain (WAJIB)
+
+- `frontier-ai-models-expert` — Sinkronisasi spesifikasi caching pada Gemini 4 Pro, Claude 5.5, dan GPT Astra 6.
+- `llm-finops-router` — Menghitung efisiensi anggaran dan mengarahkan beban kerja ber-cache tinggi.
+- `gemini-agent-booster` — Memanfaatkan mekanisme context caching native Google Cloud 2M.
+- `vercel-ai-sdk-expert` — Mengimplementasikan opsi provider untuk kontrol caching Anthropic dan Google.
+
+### Direferensikan oleh Orchestrator (WAJIB)
+
+- `brainstorming` — Tambahkan ke baris "Integrasi AI & LLM" dan "Frontier AI & Simulation" pada Matriks Orkestrasi.
+- `zero-to-prod-orchestrator` — Tambahkan ke Fase 4 (Backend APIs, Microservices & AI Agents).
diff --git a/vibes-plug/skills/legacy-code-translator/SKILL.md b/vibes-plug/skills/legacy-code-translator/SKILL.md
new file mode 100644
index 000000000..b230db0ca
--- /dev/null
+++ b/vibes-plug/skills/legacy-code-translator/SKILL.md
@@ -0,0 +1,148 @@
+---
+name: legacy-code-translator
+description: "Methodological guide for the AI Agent to safely and systematically translate, refactor, and modernize giant legacy codebases (PHP, Python 2, old React) into modern stacks."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Legacy Code Translator (Strangler Fig & Refactoring Engine)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Description
+A systematic, risk-mitigated engineering methodology for migrating large, business-critical legacy codebases (PHP 5/7, Python 2, jQuery, old React Class Components, AngularJS) to modern 2026 enterprise stacks (Next.js 15, TypeScript 5.8+, Bun, Rust, Go) without business downtime or regression. Employs the Strangler Fig pattern, Shadow Execution Harnesses, and AST-driven module decomposition to prevent context exhaustion and hallucinated logic.
+
+### Trigger Conditions
+- Large-scale framework migrations (e.g., PHP monolith -> Next.js + Bun/Hono microservices).
+- Translating legacy scripts across languages (e.g., Python 2/3 CPU-bound routines -> Rust/Go).
+- Refactoring sprawling React Class components (>1,000 lines) into modern hooks and Server Components.
+- Decoupling legacy database queries from direct presentation templates.
+
+### The 4-Phase Strangler Migration Protocol
+
+```
+┌────────────────────────────────────────────────────────┐
+│ 1. MAP & ISOLATE (AST Boundary Definition) │
+│ Document I/O contracts in `migration_plan.md` │
+└───────────────────────────┬────────────────────────────┘
+ │
+ ▼
+┌────────────────────────────────────────────────────────┐
+│ 2. SHADOW HARNESS IMPLEMENTATION │
+│ Run legacy and new code in parallel; log diffs │
+└───────────────────────────┬────────────────────────────┘
+ │
+ ▼
+┌────────────────────────────────────────────────────────┐
+│ 3. SIDE-BY-SIDE REFACTORING (Function-by-Function) │
+│ Maintain old file while building typed modern clone │
+└───────────────────────────┬────────────────────────────┘
+ │
+ ▼
+┌────────────────────────────────────────────────────────┐
+│ 4. TRAFFIC CUTOVER & CLEANUP │
+│ 100% parity verified ──► Deprecate legacy file │
+└────────────────────────────────────────────────────────┘
+```
+
+### Shadow Testing Harness Example (TypeScript)
+
+```typescript
+// src/migration/shadow-harness.ts
+export interface ShadowComparison {
+ legacyOutput: T;
+ modernOutput: T;
+ isMatch: boolean;
+ discrepancies?: string[];
+}
+
+export async function executeWithShadowTesting(
+ input: TInput,
+ legacyFn: (data: TInput) => Promise,
+ modernFn: (data: TInput) => Promise,
+ onDiscrepancy?: (diff: ShadowComparison) => void
+): Promise {
+ // 1. Run legacy function as ground truth for customer
+ const legacyPromise = legacyFn(input);
+
+ // 2. Execute modern implementation in shadow mode (non-blocking)
+ const modernPromise = modernFn(input).catch((err) => {
+ console.error('[Shadow-Harness] Modern function threw error:', err);
+ return null as unknown as TOutput;
+ });
+
+ const [legacyResult, modernResult] = await Promise.all([legacyPromise, modernPromise]);
+
+ // 3. Compare JSON representation for structural equality
+ const legacyJson = JSON.stringify(legacyResult);
+ const modernJson = JSON.stringify(modernResult);
+
+ if (legacyJson !== modernJson) {
+ const diffReport: ShadowComparison = {
+ legacyOutput: legacyResult,
+ modernOutput: modernResult,
+ isMatch: false,
+ };
+ if (onDiscrepancy) onDiscrepancy(diffReport);
+ console.warn('[Shadow-Harness] Discrepancy detected between legacy and modern outputs.');
+ }
+
+ // Always return the legacy result during the shadow probation phase
+ return legacyResult;
+}
+```
+
+### The 4 Non-Negotiable Agent Constraints
+1. **Never Overwrite In-Place**: Never directly modify or delete the legacy source file during initial drafting. Always create the modernized file side-by-side (`order-calc.legacy.php` -> `order-calc.service.ts`).
+2. **Context Window Token Slicing**: Never attempt to translate a file exceeding 400 lines in a single turn. Decompose the module by distinct subroutines or AST nodes to prevent hallucinated truncations (`// ...rest of code`).
+3. **Preserve "Quirks as Features"**: Legacy edge cases (e.g., custom rounding rules or implicit type coercion) are often relied upon by downstream billing systems. Document and preserve them with explicit regression tests.
+4. **Enforce Type Contracts**: The modern code MUST be 100% strictly typed (no `any`, no phantom SDK imports).
+
+## Orchestration & Integration
+- **`autonomous-tdd-debugger`**: Runs comparison tests against legacy fixtures to prove zero regression.
+- **`prd-architect`**: Documents reverse-engineered business rules into `PRD.md` before coding.
+- **`database-orm-expert`**: Bridges legacy SQL schemas with Prisma or Drizzle ORM models.
+- **`anti-slop`**: Eliminates lazy mock returns and incomplete stubs during refactoring.
+
+---
+
+
+## Bahasa Indonesia
+
+### Deskripsi
+Metodologi rekayasa sistematis dan aman bagi agen AI untuk memigrasikan basis kode warisan (*legacy codebase*) skala besar (PHP 5/7, Python 2, jQuery, React Class Component lawas) ke stack modern 2026 (Next.js 15, TypeScript 5.8+, Bun, Rust, Go) tanpa gangguan operasional (*zero downtime*) dan tanpa regresi logika bisnis. Menerapkan pola *Strangler Fig*, *Shadow Execution*, dan dekomposisi berbasis pohon sintaks (AST).
+
+### Kondisi Pemicu
+- Migrasi skala besar (misal: monolit PHP lawas ke microservices Next.js + Bun/Hono).
+- Penerjemahan kode antar bahasa (misal: skrip kalkulasi Python lambat ke modul Go/Rust berkecepatan tinggi).
+- Pemecahan komponen React Class raksasa (>1.000 baris) menjadi Server Components dan hooks modular.
+- Pemisahan kueri database yang menempel langsung pada file template HTML/PHP.
+
+### 4 Aturan Ketat Agen Selama Migrasi
+1. **Dilarang Menimpa File Asli Secara Langsung**: Jangan pernah langsung mengedit atau menghapus file lama pada langkah pertama. Buat file baru bersisian (`UserService.legacy.php` -> `user-service.ts`) agar kode lama tetap menjadi acuan kebenaran.
+2. **Pecah File Raksasa (Token Slicing)**: Jangan pernah meminta LLM menerjemahkan file di atas 400 baris dalam satu giliran. Pecah per fungsi atau blok logika untuk menghindari pemotongan kode (`// TODO: sisa kode`).
+3. **Hargai Perilaku Khusus (Quirks)**: Seringkali kejanggalan pada kode lama (misal: pembulatan desimal khusus) merupakan aturan bisnis yang disengaja. Jangan ubah aturan tersebut tanpa bukti pengujian (*regression test*).
+4. **Wajib Type-Safe**: Seluruh kode baru wajib menggunakan TypeScript mode ketat tanpa `any`.
+
+### Pola Pengujian Bayangan (Shadow Testing)
+
+```typescript
+// Membandingkan output kode lama vs baru secara real-time
+const total = await executeWithShadowTesting(
+ cartData,
+ (cart) => hitungTotalLegacyPHP(cart),
+ (cart) => hitungTotalModernTS(cart),
+ (diff) => catatKeLogMonitoring(diff)
+);
+```
+
+## Integrasi Orkestrasi
+- **`autonomous-tdd-debugger`**: Memvalidasi kesesuaian output antara fungsi lama dan fungsi baru.
+- **`prd-architect`**: Mencatat aturan bisnis yang diekstraksi dari kode lama ke dalam dokumentasi formal.
+- **`database-orm-expert`**: Memetakan kueri SQL lama ke skema ORM modern.
+- **`anti-slop`**: Memastikan kode modern yang dihasilkan utuh, bersih, dan dapat langsung dieksekusi.
\ No newline at end of file
diff --git a/vibes-plug/skills/living-codebase-ast-graph/SKILL.md b/vibes-plug/skills/living-codebase-ast-graph/SKILL.md
new file mode 100644
index 000000000..295124eb5
--- /dev/null
+++ b/vibes-plug/skills/living-codebase-ast-graph/SKILL.md
@@ -0,0 +1,267 @@
+---
+name: living-codebase-ast-graph
+description: "Expert guide for in-memory Abstract Syntax Tree (AST) code knowledge graphs, real-time symbol dependency mapping, refactoring blast radius calculation, and dead code eradication / Panduan ahli graf pengetahuan AST kode in-memory, pemetaan dependensi simbol real-time, kalkulasi radius dampak refaktor, dan pembersihan kode mati."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# living-codebase-ast-graph — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with `brainstorming`, `zero-to-prod-orchestrator`, `typescript-expert`, `scalability-clean-code`, `zero-tech-debt-auditor`, and `autonomous-api-drift-healer` to provide real-time AST dependency graphs, blast-radius calculation, and structural intelligence for multi-agent code transformations.
+
+### Description
+Production guide for constructing and querying in-memory Abstract Syntax Tree (AST) knowledge graphs across multi-file and monorepo codebases. Enables autonomous agents to navigate complex symbol relationships, calculate refactoring blast radii, eliminate circular dependencies, determine optimal topological generation sequences, and prune unreachable code without relying on fuzzy string matching.
+
+### Trigger Conditions
+Activate this skill when:
+- Executing large-scale codebase refactoring or renaming symbols across multiple packages.
+- Analyzing architectural blast radius before making breaking changes to data models or API signatures.
+- Detecting and resolving circular dependencies in TypeScript, JavaScript, Python, or Go codebases.
+- Ordering code generation tasks topologically so underlying dependencies are created before dependent modules.
+- Identifying dead exports, unreferenced functions, and ghost imports with absolute precision.
+
+---
+
+### Core Concepts & Patterns
+
+#### 1. In-Memory AST Dependency Extractor (TypeScript Compiler API)
+
+```typescript
+import ts from 'typescript';
+import fs from 'fs';
+import path from 'path';
+
+export interface SymbolNode {
+ filePath: string;
+ name: string;
+ kind: 'function' | 'class' | 'interface' | 'variable' | 'type';
+ dependencies: string[];
+}
+
+export interface CodebaseGraph {
+ nodes: Map;
+ edges: Map>;
+}
+
+export class LivingCodebaseASTGraph {
+ private program: ts.Program;
+ private checker: ts.TypeChecker;
+ private graph: CodebaseGraph;
+
+ constructor(rootFiles: string[], options: ts.CompilerOptions = {}) {
+ this.program = ts.createProgram(rootFiles, {
+ target: ts.ScriptTarget.ES2022,
+ module: ts.ModuleKind.NodeNext,
+ ...options
+ });
+ this.checker = this.program.getTypeChecker();
+ this.graph = {
+ nodes: new Map(),
+ edges: new Map()
+ };
+ this.buildGraph();
+ }
+
+ private buildGraph(): void {
+ for (const sourceFile of this.program.getSourceFiles()) {
+ if (sourceFile.isDeclarationFile || sourceFile.fileName.includes('node_modules')) {
+ continue;
+ }
+ this.analyzeSourceFile(sourceFile);
+ }
+ }
+
+ private analyzeSourceFile(sourceFile: ts.SourceFile): void {
+ const filePath = path.resolve(sourceFile.fileName);
+
+ ts.forEachChild(sourceFile, (node) => {
+ if (ts.isFunctionDeclaration(node) && node.name) {
+ this.registerSymbol(filePath, node.name.text, 'function', node);
+ } else if (ts.isClassDeclaration(node) && node.name) {
+ this.registerSymbol(filePath, node.name.text, 'class', node);
+ } else if (ts.isInterfaceDeclaration(node) && node.name) {
+ this.registerSymbol(filePath, node.name.text, 'interface', node);
+ }
+ });
+ }
+
+ private registerSymbol(
+ filePath: string,
+ name: string,
+ kind: SymbolNode['kind'],
+ node: ts.Node
+ ): void {
+ const symbolKey = `${filePath}#${name}`;
+ const dependencies: string[] = [];
+
+ const visit = (child: ts.Node) => {
+ if (ts.isIdentifier(child)) {
+ const symbol = this.checker.getSymbolAtLocation(child);
+ if (symbol && symbol.declarations && symbol.declarations.length > 0) {
+ const declFile = symbol.declarations[0].getSourceFile().fileName;
+ if (!declFile.includes('node_modules') && !declFile.endsWith('.d.ts')) {
+ const targetKey = `${path.resolve(declFile)}#${symbol.getName()}`;
+ if (targetKey !== symbolKey) {
+ dependencies.push(targetKey);
+ }
+ }
+ }
+ }
+ ts.forEachChild(child, visit);
+ };
+
+ visit(node);
+
+ this.graph.nodes.set(symbolKey, { filePath, name, kind, dependencies });
+ if (!this.graph.edges.has(symbolKey)) {
+ this.graph.edges.set(symbolKey, new Set(dependencies));
+ }
+ }
+
+ public calculateBlastRadius(symbolKey: string): string[] {
+ const affected = new Set();
+ const queue = [symbolKey];
+
+ while (queue.length > 0) {
+ const current = queue.shift()!;
+ for (const [nodeKey, deps] of this.graph.edges.entries()) {
+ if (deps.has(current) && !affected.has(nodeKey)) {
+ affected.add(nodeKey);
+ queue.push(nodeKey);
+ }
+ }
+ }
+ return Array.from(affected);
+ }
+}
+```
+
+#### 2. Topological Code Generation Sorter
+Autonomous swarms must construct files in strict topological order to avoid compiling against non-existent types:
+
+```
+[Core Domain Types / Schemas]
+ │
+ ▼
+[Persistence Layer & ORM Repositories]
+ │
+ ▼
+[Business Services & Interactors]
+ │
+ ▼
+[API Handlers / Controllers]
+ │
+ ▼
+[Client SDKs & Frontend Hooks]
+```
+
+---
+
+### Best Practices
+
+1. **Reject String RegEx for Semantic Audits**: Never use regex or text matching to find symbol usages; use static AST symbol declarations.
+2. **Compute Blast Radius Before Refactoring**: When a core database model or API payload changes, compute all affected frontend and backend nodes first.
+3. **Fail Builds on Circular Dependencies**: Integrate AST cycle checks directly into continuous integration pipelines to prevent runtime initialization deadlocks.
+4. **Order Swarm Generation Topologically**: Feed code generation tasks to subagents according to dependency levels so downstream callers always receive complete interfaces.
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Blast Consequence | Correct AST Engineering |
+| :--- | :--- | :--- |
+| Global find-and-replace for variable renaming | Corrupts unrelated variables sharing identical names | Use AST symbol binding via `ts.TypeChecker` |
+| Parallel multi-file generation without topological sort | Subagent attempts to import interfaces that do not exist | Sequence subagents using Directed Acyclic Graph (DAG) levels |
+| Ignoring circular module references | Silent runtime initialization `undefined` bugs | Traverse graph using Tarjan's SCC algorithm |
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+- `typescript-expert` — Provide low-level TypeScript AST manipulation and type checking APIs.
+- `zero-tech-debt-auditor` — Feed dead symbol lists to the automated dead code elimination pipeline.
+- `autonomous-api-drift-healer` — Calculate client-side impact when backend API contracts drift.
+- `scalability-clean-code` — Enforce Clean Architecture boundary rules between modules.
+
+### Referenced By Orchestrators (MANDATORY)
+
+- `brainstorming` — Added to "Arsitektur & Skala" and "Penemuan & Audit" matrix rows.
+- `zero-to-prod-orchestrator` — Integrated in Phase 2 (Foundation) and Phase 6 (Testing & QA).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi dengan `brainstorming`, `zero-to-prod-orchestrator`, `typescript-expert`, `scalability-clean-code`, `zero-tech-debt-auditor`, dan `autonomous-api-drift-healer` untuk menyediakan graf dependensi AST real-time, kalkulasi radius dampak refaktor, dan inteligensi struktural untuk transformasi kode multi-agen.
+
+### Deskripsi
+Panduan produksi untuk membangun dan menavigasi graf pengetahuan Abstract Syntax Tree (AST) in-memory pada proyek perangkat lunak berskala besar dan monorepo. Memungkinkan agen otonom untuk memahami relasi simbolik, menghitung radius dampak (*blast radius*) sebelum refaktor, mendeteksi dependensi melingkar (*circular dependency*), menentukan urutan pembuatan kode secara topologis, dan membersihkan kode mati tanpa mengandalkan pencarian teks biasa.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika:
+- Menjalankan refaktor skala besar atau mengganti nama simbol di banyak file/paket.
+- Menganalisis radius dampak arsitektur sebelum mengubah skema database atau kontrak API.
+- Mendeteksi dan memecahkan dependensi melingkar (*circular dependency*).
+- Menentukan urutan pembuatan kode bagi sub-agen secara topologis agar dependensi dasar dibuat terlebih dahulu.
+- Mengidentifikasi export yang tidak lagi dipakai (*dead code*) dan impor phantom.
+
+---
+
+### Konsep Inti & Pola Praktik
+
+#### 1. Kalkulasi Radius Dampak (*Blast Radius*)
+Saat mengubah suatu fungsi inti atau tipe data:
+1. **Identifikasi Simbol**: Dapatkan simpul AST target menggunakan `ts.TypeChecker`.
+2. **Penelusuran Graf Terbalik**: Telusuri semua simpul yang mengimpor atau memanggil simbol tersebut secara rekursif.
+3. **Pemberian Skor Risiko**: Klasifikasikan file yang terdampak ke dalam tingkat risiko (Tinggi untuk API publik, Sedang untuk modul internal).
+
+#### 2. Urutan Pembangunan Topologis untuk Swarm
+Pastikan sub-agen AI membangun file berdasarkan tingkatan hierarki DAG:
+- Tingkat 0: Skema Database & Tipe Inti
+- Tingkat 1: Repositori Data & ORM
+- Tingkat 2: Layanan Logika Bisnis (*Services*)
+- Tingkat 3: Endpoint Controller & API Route
+- Tingkat 4: Hooks Frontend & Komponen UI
+
+---
+
+### Praktik Terbaik
+
+1. **Gunakan AST Bukan Regex**: Hindari pencarian teks biasa (*find-and-replace*) yang dapat merusak variabel bernama serupa di berkas lain.
+2. **Hitung Radius Dampak Sebelum Memulai**: Sebelum sub-agen menulis ulang kode, dapatkan daftar lengkap berkas yang bergantung padanya.
+3. **Cegah Dependensi Melingkar**: Jalankan algoritma Tarjan atau DFS untuk memastikan tidak ada siklus dependensi yang menyebabkan nilai `undefined` saat runtime.
+4. **Hapus Kode Mati Secara Otomatis**: Padukan dengan `zero-tech-debt-auditor` untuk membersihkan fungsi dan tipe yang tidak memiliki referensi masuk (*inbound edges*).
+
+---
+
+### Jebakan Umum yang Harus Dihindari
+
+| Praktik Buruk | Dampak Buruk | Solusi Rekayasa |
+| :--- | :--- | :--- |
+| Mengganti nama fungsi dengan string replace biasa | Merusak properti objek atau komentar yang kebetulan memiliki nama yang sama | Gunakan binding simbol AST dari TypeScript Compiler API |
+| Memerintahkan sub-agen membuat UI sebelum tipe data siap | Muncul error tipe hilang dan kompilasi gagal | Susun urutan pembuatan secara topologis (Topological Sort) |
+| Membiarkan import melingkar (*circular imports*) | Bug runtime sulit dilacak saat aplikasi diinisialisasi | Lakukan pengecekan siklus AST pada CI pipeline |
+
+---
+
+### Integrasi dengan Skill Lain (WAJIB)
+
+- `typescript-expert` — Manipulasi AST tingkat lanjut dan pemeriksaan tipe TypeScript.
+- `zero-tech-debt-auditor` — Menyuplai daftar ekspor mati ke pipeline pembersihan kode.
+- `autonomous-api-drift-healer` — Menghitung dampak pada sisi klien saat kontrak API backend berubah.
+- `scalability-clean-code` — Menegakkan batas arsitektur bersih antar modul.
+
+### Direferensikan oleh Orchestrator (WAJIB)
+
+- `brainstorming` — Tambahkan ke baris "Arsitektur & Skala" dan "Penemuan & Audit" pada Matriks Orkestrasi.
+- `zero-to-prod-orchestrator` — Tambahkan ke Fase 2 (Pondasi Proyek) dan Fase 6 (Pengujian Otomatis & Keamanan).
diff --git a/vibes-plug/skills/llm-finops-router/SKILL.md b/vibes-plug/skills/llm-finops-router/SKILL.md
new file mode 100644
index 000000000..0fa5e550d
--- /dev/null
+++ b/vibes-plug/skills/llm-finops-router/SKILL.md
@@ -0,0 +1,662 @@
+---
+name: llm-finops-router
+description: Expert guide for AI FinOps, dynamic model routing (LiteLLM, Portkey, RouteLLM), cost optimization, budget enforcement, semantic caching, and latency-based fallback architectures / Panduan ahli untuk AI FinOps, routing model dinamis, optimasi biaya, penegakan anggaran, semantic caching, dan arsitektur fallback berbasis latensi.
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# LLM FinOps & Dynamic Model Router
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+
+Connects and orchestrates with:
+- `ai-llm-integration-expert` — base LLM integration patterns
+- `vercel-ai-sdk-expert` — streaming + tool-call routing on the edge
+- `multi-agent-orchestration` — per-agent budget allocation
+- `cloud-hosting-expert` — gateway deployment (Vercel, Cloudflare, AWS)
+- `llm-observability-expert` — Langfuse traces + cost dashboards
+- `adaptive-model-cascade` — complexity-scored model selection
+- `kv-cache-prefix-optimizer` — KV-cache hit maximization to cut costs
+
+---
+
+### Purpose
+
+Optimize operational costs, reliability, and latency of multi-model LLM architectures using dynamic routing, provider fallback chains, semantic caching, and real-time FinOps analytics. Target: **40–70% reduction in monthly LLM spend** without degrading output quality.
+
+---
+
+### 1. LiteLLM v1.x — Deep Configuration Guide
+
+LiteLLM provides a unified OpenAI-compatible interface across 100+ LLM providers with built-in fallback, retries, and budget management.
+
+#### Install & Start Proxy
+
+```bash
+pip install litellm[proxy]
+litellm --config litellm_config.yaml --port 4000
+```
+
+#### `litellm_config.yaml` — Full Production Config
+
+```yaml
+model_list:
+ - model_name: fast-tier # Virtual name used by clients
+ litellm_params:
+ model: gemini/gemini-3.8-flash
+ api_key: os.environ/GEMINI_API_KEY
+ rpm: 1000
+ tpm: 2000000
+
+ - model_name: fast-tier # Fallback 1 for fast-tier
+ litellm_params:
+ model: groq/llama-3.1-8b-instant
+ api_key: os.environ/GROQ_API_KEY
+ rpm: 600
+
+ - model_name: reasoning-tier
+ litellm_params:
+ model: anthropic/claude-5-sonnet
+ api_key: os.environ/ANTHROPIC_API_KEY
+ rpm: 100
+ tpm: 400000
+
+ - model_name: reasoning-tier # Fallback 1 for reasoning-tier
+ litellm_params:
+ model: gemini/gemini-4-pro
+ api_key: os.environ/GEMINI_API_KEY
+ rpm: 60
+
+ - model_name: embedding-tier
+ litellm_params:
+ model: text-embedding-3-small
+ api_key: os.environ/OPENAI_API_KEY
+
+router_settings:
+ routing_strategy: least-busy # Options: simple-shuffle | least-busy | latency-based-routing | cost-based-routing
+ enable_pre_call_checks: true
+ num_retries: 3
+ retry_after: 2 # seconds between retries
+ timeout: 60
+ fallbacks:
+ - fast-tier: [groq/llama-3.1-8b-instant, openai/gpt-4o-mini]
+ - reasoning-tier: [gemini/gemini-4-pro, openai/gpt-5]
+ context_window_fallbacks:
+ - reasoning-tier: [gemini/gemini-4-pro] # 2M+ context fallback
+
+litellm_settings:
+ success_callback: ["langfuse"]
+ failure_callback: ["langfuse"]
+ cache: true
+ cache_params:
+ type: redis
+ host: os.environ/REDIS_HOST
+ port: 6379
+ password: os.environ/REDIS_PASSWORD
+ ttl: 600 # Cache TTL in seconds
+ similarity_threshold: 0.92 # Semantic cache hit threshold
+
+general_settings:
+ master_key: os.environ/LITELLM_MASTER_KEY
+ database_url: os.environ/DATABASE_URL # PostgreSQL for spend tracking
+
+# Virtual Keys with per-user budget limits
+virtual_keys:
+ - key: sk-agent-research
+ user_id: agent-research
+ max_budget: 5.00 # USD per day
+ budget_duration: 1d
+ allowed_models: [fast-tier, embedding-tier]
+ - key: sk-agent-code
+ user_id: agent-code
+ max_budget: 10.00
+ budget_duration: 1d
+ allowed_models: [fast-tier, reasoning-tier]
+```
+
+#### Python: Dynamic Routing via LiteLLM Client
+
+```python
+import litellm
+from litellm import acompletion
+
+async def route_by_complexity(prompt: str, complexity_score: float) -> str:
+ """
+ Routes to fast-tier (<0.5) or reasoning-tier (>=0.5) based on score.
+ complexity_score: 0.0 (trivial) → 1.0 (very complex)
+ """
+ model = "reasoning-tier" if complexity_score >= 0.5 else "fast-tier"
+
+ response = await acompletion(
+ model=model,
+ messages=[{"role": "user", "content": prompt}],
+ api_base="http://localhost:4000",
+ api_key="sk-agent-code",
+ metadata={
+ "generation_name": "dynamic-route",
+ "tags": ["finops", f"complexity:{complexity_score:.2f}"],
+ },
+ )
+ return response.choices[0].message.content
+```
+
+---
+
+### 2. Portkey AI Gateway — Production Setup
+
+Portkey adds a middleware layer over LLM providers with semantic caching, canary routing, observability, and guardrails.
+
+```bash
+npm install portkey-ai
+```
+
+#### TypeScript: Portkey Gateway with Fallback & Semantic Cache
+
+```typescript
+import Portkey from "portkey-ai";
+
+const portkey = new Portkey({
+ apiKey: process.env.PORTKEY_API_KEY!,
+ config: {
+ strategy: { mode: "fallback" },
+ targets: [
+ {
+ provider: "anthropic",
+ api_key: process.env.ANTHROPIC_API_KEY!,
+ override_params: { model: "claude-opus-4-5", max_tokens: 4096 },
+ weight: 1,
+ },
+ {
+ // Fallback if Anthropic fails or is rate-limited
+ provider: "google",
+ api_key: process.env.GEMINI_API_KEY!,
+ override_params: { model: "gemini-2.5-pro", max_tokens: 4096 },
+ },
+ ],
+ cache: {
+ mode: "semantic", // Semantic similarity matching
+ max_age: 3600, // 1 hour TTL
+ },
+ retry: { attempts: 3, on_status_codes: [429, 500, 502, 503] },
+ },
+});
+
+export async function callWithPortkey(
+ prompt: string,
+ userId: string,
+): Promise {
+ const response = await portkey.chat.completions.create({
+ messages: [{ role: "user", content: prompt }],
+ model: "claude-opus-4-5",
+ // Portkey metadata for observability
+ // @ts-expect-error — Portkey extends OpenAI types
+ metadata: { _user: userId, environment: process.env.NODE_ENV },
+ });
+
+ return response.choices[0].message.content ?? "";
+}
+```
+
+#### Portkey Canary Routing (A/B Test New Models)
+
+```typescript
+const portkey = new Portkey({
+ apiKey: process.env.PORTKEY_API_KEY!,
+ config: {
+ strategy: { mode: "loadbalance" },
+ targets: [
+ {
+ provider: "anthropic",
+ api_key: process.env.ANTHROPIC_API_KEY!,
+ override_params: { model: "claude-opus-4-5" },
+ weight: 80, // 80% traffic to stable model
+ },
+ {
+ provider: "anthropic",
+ api_key: process.env.ANTHROPIC_API_KEY!,
+ override_params: { model: "claude-opus-4-6-preview" }, // new model canary
+ weight: 20, // 20% canary traffic
+ },
+ ],
+ },
+});
+```
+
+---
+
+### 3. RouteLLM (Stanford) — Complexity Classifier Router
+
+RouteLLM trains a binary classifier to decide whether a query needs a strong model or a weak model, achieving **strong-model call reduction of 40-85%** while preserving quality.
+
+```bash
+pip install routellm
+```
+
+#### Setup & Router Configuration
+
+```python
+from routellm.controller import Controller
+
+# Initialize with a pre-trained classifier (matrix-factorization or causal-llm)
+controller = Controller(
+ routers=["mf"], # 'mf' = matrix-factorization (fastest)
+ strong_model="gpt-4.1",
+ weak_model="gpt-4o-mini",
+ config={
+ "mf": {
+ "checkpoint_path": "routellm/mf-gpt4-turbo", # HF checkpoint
+ }
+ },
+ api_base=None, # Uses OpenAI API directly
+ api_key=None, # Uses OPENAI_API_KEY env
+)
+
+# Threshold: higher = use weak model more aggressively
+# 0.11875 = calibrated to 50% strong model call rate on MMLU benchmark
+response = controller.chat.completions.create(
+ model="router-mf-0.11875", # router-{name}-{threshold}
+ messages=[{"role": "user", "content": "What is the capital of France?"}],
+)
+print(response.choices[0].message.content)
+```
+
+#### Custom Task-Based Routing
+
+```python
+async def intelligent_route(task_type: str, prompt: str) -> str:
+ """Route based on known task taxonomy."""
+ FAST_TASKS = {"classification", "extraction", "summarization", "translation"}
+ SLOW_TASKS = {"code_generation", "reasoning", "math", "planning", "creative"}
+
+ use_strong = task_type in SLOW_TASKS
+ model = "gpt-4.1" if use_strong else "gpt-4o-mini"
+
+ import openai
+ client = openai.AsyncOpenAI()
+ resp = await client.chat.completions.create(
+ model=model,
+ messages=[{"role": "user", "content": prompt}],
+ )
+ return resp.choices[0].message.content
+```
+
+---
+
+### 4. Cost Calculation & Budget Enforcement
+
+#### Per-Model Pricing Table (2026 approximate, USD per 1M tokens)
+
+| Model | Input | Output | Cached Input |
+|---|---|---|---|
+| GPT-4.1 | \$2.00 | \$8.00 | \$0.50 |
+| GPT-4o-mini | \$0.15 | \$0.60 | \$0.075 |
+| Claude Opus 4.5 | \$15.00 | \$75.00 | \$1.50 |
+| Claude Sonnet 4.5 | \$3.00 | \$15.00 | \$0.30 |
+| Gemini 2.5 Pro | \$1.25 | \$10.00 | \$0.31 |
+| Gemini 2.0 Flash | \$0.10 | \$0.40 | \$0.025 |
+| Llama 3.1 8B (Groq) | \$0.05 | \$0.08 | — |
+| text-embedding-3-small | \$0.02 | — | — |
+
+#### TypeScript: Real-Time Cost Calculator
+
+```typescript
+interface ModelPricing {
+ inputPerMillion: number;
+ outputPerMillion: number;
+ cachedInputPerMillion?: number;
+}
+
+const MODEL_PRICING: Record = {
+ "gpt-4.1": { inputPerMillion: 2.00, outputPerMillion: 8.00, cachedInputPerMillion: 0.50 },
+ "gpt-4o-mini": { inputPerMillion: 0.15, outputPerMillion: 0.60, cachedInputPerMillion: 0.075 },
+ "claude-opus-4-5": { inputPerMillion: 15.00, outputPerMillion: 75.00, cachedInputPerMillion: 1.50 },
+ "claude-sonnet-4-5": { inputPerMillion: 3.00, outputPerMillion: 15.00, cachedInputPerMillion: 0.30 },
+ "gemini-2.5-pro": { inputPerMillion: 1.25, outputPerMillion: 10.00, cachedInputPerMillion: 0.31 },
+ "gemini-2.0-flash": { inputPerMillion: 0.10, outputPerMillion: 0.40, cachedInputPerMillion: 0.025 },
+ "llama-3.1-8b-groq": { inputPerMillion: 0.05, outputPerMillion: 0.08 },
+};
+
+export function calculateCost(
+ model: string,
+ inputTokens: number,
+ outputTokens: number,
+ cachedInputTokens = 0,
+): number {
+ const pricing = MODEL_PRICING[model];
+ if (!pricing) throw new Error(`Unknown model: ${model}`);
+
+ const inputCost = (inputTokens / 1_000_000) * pricing.inputPerMillion;
+ const outputCost = (outputTokens / 1_000_000) * pricing.outputPerMillion;
+ const cachedCost = pricing.cachedInputPerMillion
+ ? (cachedInputTokens / 1_000_000) * pricing.cachedInputPerMillion
+ : 0;
+
+ return inputCost + outputCost + cachedCost;
+}
+
+// Token Budget Guard — throws if projected cost exceeds daily cap
+export async function guardedLLMCall(
+ model: string,
+ messages: Array<{ role: string; content: string }>,
+ dailyBudgetUSD: number,
+ spentTodayUSD: number,
+): Promise {
+ const estimatedInputTokens = messages.reduce(
+ (sum, m) => sum + Math.ceil(m.content.length / 4),
+ 0,
+ );
+ const estimatedCost = calculateCost(model, estimatedInputTokens, estimatedInputTokens * 2);
+
+ if (spentTodayUSD + estimatedCost > dailyBudgetUSD) {
+ // Cascade to cheaper model instead of rejecting
+ const cheaperModel = "gemini-2.0-flash";
+ console.warn(`Budget cap approaching. Cascading to ${cheaperModel}.`);
+ return guardedLLMCall(cheaperModel, messages, dailyBudgetUSD, spentTodayUSD);
+ }
+
+ const { OpenAI } = await import("openai");
+ const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+ const resp = await client.chat.completions.create({ model, messages } as Parameters[0]);
+ return resp.choices[0].message.content ?? "";
+}
+```
+
+---
+
+### 5. Monitoring, Alerts & Daily Cost Caps
+
+#### Langfuse Integration (spend tracking + tracing)
+
+```python
+from langfuse import Langfuse
+from langfuse.decorators import langfuse_context, observe
+
+langfuse = Langfuse(
+ public_key=os.environ["LANGFUSE_PUBLIC_KEY"],
+ secret_key=os.environ["LANGFUSE_SECRET_KEY"],
+ host=os.environ.get("LANGFUSE_HOST", "https://cloud.langfuse.com"),
+)
+
+@observe(name="llm-call", as_type="generation")
+async def tracked_llm_call(model: str, prompt: str, user_id: str) -> str:
+ import litellm
+ resp = await litellm.acompletion(
+ model=model,
+ messages=[{"role": "user", "content": prompt}],
+ metadata={"langfuse_user_id": user_id},
+ )
+
+ # Record cost for this generation
+ cost = litellm.completion_cost(completion_response=resp)
+ langfuse_context.update_current_observation(
+ usage={
+ "input": resp.usage.prompt_tokens,
+ "output": resp.usage.completion_tokens,
+ "unit": "TOKENS",
+ "total_cost": cost,
+ }
+ )
+ return resp.choices[0].message.content
+```
+
+#### Daily Cost Cap via Redis Counter
+
+```typescript
+import { Redis } from "@upstash/redis";
+
+const redis = new Redis({
+ url: process.env.UPSTASH_REDIS_REST_URL!,
+ token: process.env.UPSTASH_REDIS_REST_TOKEN!,
+});
+
+const DAILY_BUDGET_USD = parseFloat(process.env.LLM_DAILY_BUDGET_USD ?? "50");
+const ALERT_THRESHOLD = 0.85; // Alert at 85% of budget
+
+export async function trackAndCheckBudget(
+ costUSD: number,
+ slackWebhook?: string,
+): Promise<{ allowed: boolean; spent: number; remaining: number }> {
+ const key = `llm:spend:${new Date().toISOString().slice(0, 10)}`; // YYYY-MM-DD
+ const spent = await redis.incrbyfloat(key, costUSD);
+ await redis.expire(key, 86400 * 2); // 2 days TTL
+
+ const remaining = DAILY_BUDGET_USD - spent;
+
+ if (spent >= DAILY_BUDGET_USD * ALERT_THRESHOLD && slackWebhook) {
+ await fetch(slackWebhook, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ text: `⚠️ *LLM Budget Alert*: \$${spent.toFixed(4)} spent of \$${DAILY_BUDGET_USD} daily budget (${((spent / DAILY_BUDGET_USD) * 100).toFixed(1)}%).`,
+ }),
+ });
+ }
+
+ return { allowed: spent <= DAILY_BUDGET_USD, spent, remaining };
+}
+```
+
+---
+
+### 6. Complexity Scorer — Routing Decision Engine
+
+```typescript
+export interface ComplexityScore {
+ score: number; // 0.0 → 1.0
+ tier: "fast" | "reasoning";
+ reason: string;
+}
+
+const HIGH_COMPLEXITY_PATTERNS = [
+ /step[ -]by[ -]step/i,
+ /reason(ing|ed)/i,
+ /code\s+(generation|review|refactor)/i,
+ /math|calculation|equation/i,
+ /analyze|synthesize|compare/i,
+ /plan|architect|design system/i,
+];
+
+const LOW_COMPLEXITY_PATTERNS = [
+ /translate/i,
+ /summarize|tldr/i,
+ /classify|label/i,
+ /extract\s+(name|date|email|phone)/i,
+ /yes or no/i,
+ /what is the (capital|meaning)/i,
+];
+
+export function scoreComplexity(prompt: string): ComplexityScore {
+ let score = 0.3; // baseline
+
+ for (const pattern of HIGH_COMPLEXITY_PATTERNS) {
+ if (pattern.test(prompt)) score = Math.min(score + 0.2, 1.0);
+ }
+ for (const pattern of LOW_COMPLEXITY_PATTERNS) {
+ if (pattern.test(prompt)) score = Math.max(score - 0.2, 0.0);
+ }
+
+ // Penalize long prompts slightly toward reasoning tier
+ if (prompt.length > 2000) score = Math.min(score + 0.1, 1.0);
+
+ const tier = score >= 0.5 ? "reasoning" : "fast";
+ const reason =
+ tier === "reasoning"
+ ? `High complexity (score: ${score.toFixed(2)}) — using frontier model`
+ : `Low complexity (score: ${score.toFixed(2)}) — using fast model`;
+
+ return { score, tier, reason };
+}
+
+export function selectModel(tier: "fast" | "reasoning"): string {
+ return tier === "reasoning" ? "claude-opus-4-5" : "gemini-2.0-flash";
+}
+```
+
+---
+
+### 7. Full Routing Pipeline (TypeScript)
+
+```typescript
+import OpenAI from "openai";
+import { scoreComplexity, selectModel } from "./complexity-scorer";
+import { trackAndCheckBudget } from "./budget-tracker";
+import { calculateCost } from "./cost-calculator";
+
+const client = new OpenAI({
+ baseURL: "http://localhost:4000", // LiteLLM proxy
+ apiKey: process.env.LITELLM_MASTER_KEY,
+});
+
+export async function smartRoute(
+ prompt: string,
+ userId: string,
+): Promise<{ content: string; model: string; costUSD: number }> {
+ const complexity = scoreComplexity(prompt);
+ const model = selectModel(complexity.tier);
+
+ const { allowed, spent } = await trackAndCheckBudget(0, process.env.SLACK_WEBHOOK);
+ if (!allowed) {
+ throw new Error(`Daily LLM budget exhausted. Spent: \$${spent.toFixed(2)}`);
+ }
+
+ const response = await client.chat.completions.create({
+ model,
+ messages: [{ role: "user", content: prompt }],
+ user: userId,
+ });
+
+ const inputTokens = response.usage?.prompt_tokens ?? 0;
+ const outputTokens = response.usage?.completion_tokens ?? 0;
+ const costUSD = calculateCost(model, inputTokens, outputTokens);
+
+ await trackAndCheckBudget(costUSD, process.env.SLACK_WEBHOOK);
+
+ return {
+ content: response.choices[0].message.content ?? "",
+ model,
+ costUSD,
+ };
+}
+```
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+
+Terhubung dan mengorkestrasi bersama:
+- `ai-llm-integration-expert` — pola integrasi LLM dasar
+- `vercel-ai-sdk-expert` — routing streaming + tool-call di edge
+- `multi-agent-orchestration` — alokasi anggaran per-agen
+- `cloud-hosting-expert` — deployment gateway (Vercel, Cloudflare, AWS)
+- `llm-observability-expert` — trace Langfuse + dashboard biaya
+- `adaptive-model-cascade` — pemilihan model berbasis skor kompleksitas
+- `kv-cache-prefix-optimizer` — maksimasi KV-cache hit untuk memangkas biaya
+
+---
+
+### Tujuan
+
+Mengoptimalkan biaya operasional, keandalan, dan latensi arsitektur LLM multi-model menggunakan routing dinamis, rantai fallback penyedia, semantic caching, dan analitik FinOps real-time. Target: **pengurangan pengeluaran LLM bulanan 40–70%** tanpa menurunkan kualitas output.
+
+---
+
+### 1. LiteLLM v1.x — Panduan Konfigurasi Mendalam
+
+LiteLLM menyediakan antarmuka standar kompatibel OpenAI untuk 100+ penyedia LLM dengan fallback bawaan, retry, dan manajemen anggaran.
+
+**File konfigurasi utama:** `litellm_config.yaml`
+
+Konsep kunci:
+- **`model_name`** (virtual name): nama yang dipakai klien — bisa didefinisikan lebih dari sekali untuk fallback otomatis
+- **`litellm_params.model`**: nama model nyata di penyedia
+- **`router_settings.routing_strategy`**: `least-busy`, `latency-based-routing`, atau `cost-based-routing`
+- **Virtual Keys**: kunci API virtual dengan batas anggaran per pengguna (`max_budget: 5.00` per hari)
+- **Semantic Cache**: Redis-backed, similarity threshold 0.92 — kueri serupa dikembalikan dari cache
+
+Lihat konfigurasi lengkap di [Seksi English](#english).
+
+---
+
+### 2. Portkey AI Gateway
+
+Portkey bertindak sebagai middleware di atas penyedia LLM, memberikan:
+- **Semantic Caching**: mengembalikan respons cached untuk kueri dengan kemiripan >92%, hemat 30–50% token
+- **Fallback Strategy**: jika Anthropic gagal, otomatis turun ke Gemini
+- **Load Balance / Canary**: kirim 80% traffic ke model stabil, 20% ke model baru untuk A/B test
+- **Retry Logic**: retry otomatis pada status 429/500/502/503 hingga 3 kali
+- **Observability Hooks**: setiap panggilan dicatat dengan metadata pengguna dan lingkungan
+
+---
+
+### 3. RouteLLM (Stanford)
+
+RouteLLM melatih classifier biner untuk memutuskan apakah kueri memerlukan model kuat atau model lemah. Hasil benchmark: **pengurangan panggilan model kuat 40–85%** sambil mempertahankan kualitas.
+
+- **Router `mf`** (matrix-factorization): tercepat, direkomendasikan untuk produksi
+- **Threshold `0.11875`**: dikalibrasi untuk 50% tingkat panggilan model kuat pada MMLU benchmark
+- Gunakan format `router-mf-{threshold}` sebagai nama model
+
+---
+
+### 4. Formula Biaya & Penegakan Anggaran
+
+**Formula dasar:**
+
+```
+biaya = (input_token / 1_000_000 × harga_input)
+ + (output_token / 1_000_000 × harga_output)
+ + (cached_input_token / 1_000_000 × harga_cached)
+```
+
+**Strategi penegakan anggaran:**
+1. Estimasi biaya sebelum memanggil LLM berdasarkan panjang prompt
+2. Periksa saldo anggaran harian dari Redis
+3. Jika saldo hampir habis → cascade ke model lebih murah, BUKAN tolak permintaan
+4. Kirim alert Slack ketika pengeluaran mencapai 85% dari batas harian
+
+---
+
+### 5. Monitoring & Alert Biaya
+
+**Langfuse** digunakan untuk:
+- Melacak biaya per generasi (`total_cost` dalam metadata observasi)
+- Dashboard penggunaan token per pengguna, per model
+- Deteksi anomali pengeluaran (lonjakan tak terduga)
+
+**Redis Cost Counter** (via Upstash):
+- Key format: `llm:spend:YYYY-MM-DD`
+- Increment atomic menggunakan `INCRBYFLOAT`
+- Alert Slack otomatis saat 85% dari `LLM_DAILY_BUDGET_USD` terlampaui
+
+---
+
+### 6. Scorer Kompleksitas
+
+Sistem scoring berbasis pola regex:
+- **Pattern complexity tinggi**: `reasoning`, `code generation`, `analyze`, `plan`, `math` → tambah +0.2 skor
+- **Pattern complexity rendah**: `translate`, `summarize`, `classify`, `extract` → kurangi -0.2 skor
+- **Prompt panjang >2000 karakter**: tambah +0.1 skor
+- **Threshold routing**: score ≥ 0.5 → reasoning tier; score < 0.5 → fast tier
+
+Contoh implementasi TypeScript dan Python yang lengkap tersedia di [seksi English](#english).
+
+---
+
+### Anti-Slop Checklist FinOps
+
+- [ ] Tidak ada penolakan hard saat anggaran penuh — selalu cascade ke model lebih murah
+- [ ] Setiap panggilan LLM direkam dengan `user_id`, `model`, `cost_usd`, `input_tokens`, `output_tokens`
+- [ ] Semantic cache aktif di gateway (Portkey atau LiteLLM Redis)
+- [ ] Alert Slack dikonfigurasi pada 85% batas harian
+- [ ] Virtual keys digunakan untuk isolasi anggaran per agen/tim
+- [ ] Complexity scorer diuji pada setidaknya 50 prompt representatif sebelum deploy
diff --git a/vibes-plug/skills/llm-observability-expert/SKILL.md b/vibes-plug/skills/llm-observability-expert/SKILL.md
new file mode 100644
index 000000000..9709f46d8
--- /dev/null
+++ b/vibes-plug/skills/llm-observability-expert/SKILL.md
@@ -0,0 +1,289 @@
+---
+name: llm-observability-expert
+description: "Expert guide for LLM observability in production — token cost tracking, hallucination rate monitoring, latency analysis, prompt/completion logging, model comparison dashboards, and AI-specific tracing (Langfuse, Helicone, Lunary, OpenTelemetry GenAI) / Panduan ahli observabilitas LLM di produksi — pelacakan biaya token, pemantauan tingkat halusinasi, analisis latensi, logging prompt/completion, dashboard perbandingan model, dan tracing khusus AI."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# llm-observability-expert — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with `data-telemetry-expert`, `logging-error-tracking-expert`, `llm-finops-router`, `ai-llm-integration-expert`, `frontier-ai-models-expert`, `context-window-engineer`, `kv-cache-prefix-optimizer`, `adaptive-model-cascade`, and `ai-safety-governance-expert` to provide end-to-end visibility into AI application behavior in production.
+
+### Description
+Production observability framework for LLM-powered applications. Addresses the biggest blind spot in 2026 AI applications: teams deploy AI features to production with zero visibility into token costs, hallucination rates, latency distributions, cache hit ratios, or user satisfaction scores. This skill provides the instrumentation patterns, tool integrations, and dashboard architectures to make LLM behavior fully observable.
+
+### Trigger Conditions
+Activate this skill when:
+- Deploying any LLM-powered feature to production (chatbots, AI assistants, code generators, content tools).
+- Investigating unexplained cost spikes in AI API billing.
+- Debugging hallucination reports or quality degradation in AI outputs.
+- Building dashboards to monitor AI feature health and cost efficiency.
+- Comparing model performance (latency, quality, cost) across providers.
+
+---
+
+### Core Concepts & Patterns
+
+#### 1. LLM Observability Stack (2026)
+
+| Layer | Tool | Purpose |
+| :--- | :--- | :--- |
+| **Tracing** | Langfuse / Helicone / Lunary | End-to-end trace of LLM calls, including prompt, completion, tokens, latency, and metadata |
+| **Cost Tracking** | Helicone / LiteLLM Proxy / Custom | Real-time token cost aggregation by model, feature, user, and tenant |
+| **Quality Metrics** | Langfuse Scores / Custom Evals | Hallucination rate, factuality score, user satisfaction (thumbs up/down) |
+| **Alerting** | Grafana / PagerDuty / Custom | Cost anomaly alerts, latency SLA breaches, error rate spikes |
+| **Logs** | OpenTelemetry + Axiom/Datadog | Structured logs with prompt/completion pairs for debugging |
+
+#### 2. Core Metrics to Track
+
+```typescript
+export interface LLMCallMetrics {
+ traceId: string;
+ spanId: string;
+ timestamp: string;
+
+ // Model & Provider
+ model: string;
+ provider: 'openai' | 'anthropic' | 'google' | 'custom';
+
+ // Token Economics
+ promptTokens: number;
+ completionTokens: number;
+ cachedTokens: number;
+ totalCost: number;
+ cacheHitRate: number;
+
+ // Latency
+ timeToFirstToken: number;
+ totalLatency: number;
+ tokensPerSecond: number;
+
+ // Quality Signals
+ userFeedback?: 'positive' | 'negative' | null;
+ hallucinationDetected?: boolean;
+ toolCallSuccess?: boolean;
+ retryCount: number;
+
+ // Context
+ feature: string;
+ userId?: string;
+ tenantId?: string;
+ sessionId: string;
+}
+```
+
+#### 3. Langfuse Integration (TypeScript)
+
+```typescript
+import { Langfuse } from 'langfuse';
+
+const langfuse = new Langfuse({
+ publicKey: process.env.LANGFUSE_PUBLIC_KEY!,
+ secretKey: process.env.LANGFUSE_SECRET_KEY!,
+ baseUrl: process.env.LANGFUSE_BASE_URL,
+});
+
+export function traceLLMCall(
+ featureName: string,
+ userId: string,
+ fn: (trace: ReturnType) => Promise
+): Promise {
+ const trace = langfuse.trace({
+ name: featureName,
+ userId,
+ metadata: { environment: process.env.NODE_ENV },
+ });
+
+ return fn(trace).finally(() => langfuse.flush());
+}
+
+// Usage in API route:
+export async function handleChatRequest(req: Request) {
+ const { message, userId } = await req.json();
+
+ return traceLLMCall('chat-assistant', userId, async (trace) => {
+ const generation = trace.generation({
+ name: 'chat-completion',
+ model: 'gemini-4-pro',
+ input: message,
+ });
+
+ const response = await callLLM(message);
+
+ generation.end({
+ output: response.text,
+ usage: {
+ promptTokens: response.usage.promptTokens,
+ completionTokens: response.usage.completionTokens,
+ totalTokens: response.usage.totalTokens,
+ },
+ });
+
+ return new Response(JSON.stringify({ text: response.text }));
+ });
+}
+```
+
+#### 4. Cost Anomaly Detection
+
+```typescript
+export interface CostAlert {
+ type: 'daily_budget_exceeded' | 'cost_per_call_spike' | 'cache_hit_drop';
+ severity: 'warning' | 'critical';
+ currentValue: number;
+ threshold: number;
+ message: string;
+}
+
+export function detectCostAnomalies(
+ metrics: LLMCallMetrics[],
+ dailyBudget: number,
+ expectedCacheHitRate: number
+): CostAlert[] {
+ const alerts: CostAlert[] = [];
+
+ const dailyCost = metrics.reduce((sum, m) => sum + m.totalCost, 0);
+ if (dailyCost > dailyBudget) {
+ alerts.push({
+ type: 'daily_budget_exceeded',
+ severity: 'critical',
+ currentValue: dailyCost,
+ threshold: dailyBudget,
+ message: `Daily AI cost $${dailyCost.toFixed(2)} exceeds budget $${dailyBudget.toFixed(2)}`,
+ });
+ }
+
+ const avgCacheHit = metrics.reduce((sum, m) => sum + m.cacheHitRate, 0) / metrics.length;
+ if (avgCacheHit < expectedCacheHitRate * 0.7) {
+ alerts.push({
+ type: 'cache_hit_drop',
+ severity: 'warning',
+ currentValue: avgCacheHit,
+ threshold: expectedCacheHitRate,
+ message: `Cache hit rate dropped to ${(avgCacheHit * 100).toFixed(1)}% (expected ${(expectedCacheHitRate * 100).toFixed(1)}%)`,
+ });
+ }
+
+ return alerts;
+}
+```
+
+#### 5. Dashboard Architecture
+
+```
+┌──────────────────────────────────────────────────────┐
+│ AI OPERATIONS DASHBOARD │
+├──────────────┬───────────────┬────────────────────────┤
+│ COST CENTER │ QUALITY │ PERFORMANCE │
+├──────────────┼───────────────┼────────────────────────┤
+│ Daily spend │ Hallucination │ P50/P95/P99 latency │
+│ by model │ rate (24h) │ by model │
+│ │ │ │
+│ Cost per │ User feedback │ Tokens/second │
+│ feature │ ratio (+/-) │ throughput │
+│ │ │ │
+│ Cache hit │ Tool call │ Time-to-first-token │
+│ rate trend │ success rate │ distribution │
+│ │ │ │
+│ Token volume │ Retry rate │ Error rate by │
+│ by tenant │ by feature │ provider │
+└──────────────┴───────────────┴────────────────────────┘
+```
+
+---
+
+### Best Practices
+
+1. **Instrument Every LLM Call**: No LLM call should go untraced. Wrap all provider SDK calls in an observability layer.
+2. **Track Cost Per Feature, Not Just Total**: Aggregate costs by feature name to identify the most expensive AI functions.
+3. **Set Budget Alerts Early**: Configure daily/weekly cost alerts before going to production, not after the first billing shock.
+4. **Collect User Feedback Signals**: Implement thumbs up/down buttons on AI outputs and log them as quality scores in Langfuse.
+5. **Monitor Cache Hit Rates**: A drop in cache hit rate directly increases costs — alert on deviations from baseline.
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Consequence | Remedy |
+| :--- | :--- | :--- |
+| No observability in production AI features | Zero visibility into costs, quality, or failures | Instrument every LLM call with Langfuse/Helicone |
+| Logging full prompts without PII filtering | GDPR/PDPA violation from stored user data | Apply PII scrubbing before logging |
+| No cost alerting | Surprise $10k+ monthly bills | Set daily budget alerts with automatic circuit breakers |
+| Tracking only latency, ignoring quality | Low-latency but high-hallucination responses | Track factuality scores alongside latency |
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+- `data-telemetry-expert` — Extend OpenTelemetry instrumentation with LLM-specific spans and metrics.
+- `llm-finops-router` — Feed real-time cost data to the FinOps router for dynamic model selection.
+- `kv-cache-prefix-optimizer` — Monitor cache hit rates to detect prefix cache invalidation.
+- `logging-error-tracking-expert` — Integrate LLM traces with Sentry error tracking and Pino structured logs.
+- `ai-safety-governance-expert` — Log and audit AI outputs for compliance with safety policies.
+
+### Referenced By Orchestrators (MANDATORY)
+
+- `brainstorming` — Added to "AI & LLM Integration" matrix row.
+- `zero-to-prod-orchestrator` — Integrated in Phase 7 (DevOps, Deployment & Proactive Monitoring).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi dengan `data-telemetry-expert`, `logging-error-tracking-expert`, `llm-finops-router`, `ai-llm-integration-expert`, `frontier-ai-models-expert`, `context-window-engineer`, `kv-cache-prefix-optimizer`, `adaptive-model-cascade`, dan `ai-safety-governance-expert` untuk memberikan visibilitas end-to-end terhadap perilaku aplikasi AI di produksi.
+
+### Deskripsi
+Kerangka observabilitas produksi untuk aplikasi berbasis LLM. Mengatasi blind spot terbesar di aplikasi AI 2026: tim men-deploy fitur AI ke produksi tanpa visibilitas terhadap biaya token, tingkat halusinasi, distribusi latensi, rasio cache hit, atau skor kepuasan pengguna.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika:
+- Men-deploy fitur berbasis LLM ke produksi (chatbot, asisten AI, generator kode).
+- Menginvestigasi lonjakan biaya tak terduga di tagihan API AI.
+- Men-debug laporan halusinasi atau degradasi kualitas output AI.
+- Membangun dashboard untuk memonitor kesehatan fitur AI.
+
+---
+
+### Konsep Inti & Pola Praktik
+
+#### 1. Metrik Inti yang Dilacak
+Setiap panggilan LLM harus mencatat: traceId, model, provider, token (prompt/completion/cached), biaya total, cache hit rate, TTFT, latensi total, feedback pengguna, deteksi halusinasi, dan konteks fitur/user/tenant.
+
+#### 2. Integrasi Langfuse
+Gunakan Langfuse untuk tracing end-to-end setiap panggilan LLM, termasuk input prompt, output completion, penggunaan token, dan latensi.
+
+#### 3. Deteksi Anomali Biaya
+Implementasikan alert otomatis untuk: anggaran harian terlampaui, lonjakan biaya per-panggilan, dan penurunan cache hit rate.
+
+---
+
+### Praktik Terbaik
+
+1. **Instrumenkan Setiap Panggilan LLM**: Tidak ada panggilan LLM yang boleh tidak dilacak.
+2. **Lacak Biaya Per Fitur**: Agregasikan biaya berdasarkan nama fitur untuk mengidentifikasi fungsi AI termahal.
+3. **Atur Alert Anggaran Sejak Awal**: Konfigurasikan alert biaya harian/mingguan sebelum ke produksi.
+4. **Kumpulkan Sinyal Feedback Pengguna**: Implementasikan tombol thumbs up/down pada output AI.
+
+---
+
+### Integrasi dengan Skill Lain (WAJIB)
+
+- `data-telemetry-expert` — Perluas instrumentasi OpenTelemetry dengan span dan metrik khusus LLM.
+- `llm-finops-router` — Kirim data biaya real-time ke router FinOps.
+- `kv-cache-prefix-optimizer` — Pantau cache hit rate untuk deteksi invalidasi prefix cache.
+- `logging-error-tracking-expert` — Integrasikan trace LLM dengan pelacakan error Sentry.
+
+### Direferensikan oleh Orchestrator (WAJIB)
+
+- `brainstorming` — Ditambahkan ke baris "AI & LLM Integration" pada Matriks Orkestrasi.
+- `zero-to-prod-orchestrator` — Diintegrasikan di Fase 7 (DevOps, Deployment & Proactive Monitoring).
diff --git a/vibes-plug/skills/local-slm-edge-ai-expert/SKILL.md b/vibes-plug/skills/local-slm-edge-ai-expert/SKILL.md
new file mode 100644
index 000000000..823f5a9f5
--- /dev/null
+++ b/vibes-plug/skills/local-slm-edge-ai-expert/SKILL.md
@@ -0,0 +1,168 @@
+---
+name: local-slm-edge-ai-expert
+description: "Expert guide for Local Small Language Models (SLMs) and Edge AI execution — WebLLM, Transformers.js v3, ONNX Runtime Web, WebGPU, and zero-latency local embeddings / Panduan ahli SLM lokal dan AI edge di browser."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Local SLM & Edge AI Expert (WebGPU & In-Browser Intelligence)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Purpose & Overview
+Production-grade architectural guide for running **Small Language Models (SLMs)** and embedding models directly inside client browsers and edge runtimes. Eliminates cloud API costs, guarantees 100% data privacy (zero cloud data leakage), and enables instant, offline-capable AI features using **WebGPU**, **Transformers.js v3**, **WebLLM**, and **ONNX Runtime Web**.
+
+### Key Capabilities
+1. **Client-Side Model Execution**: Running quantized 1B–4B SLMs (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5 1.5B/3B) entirely inside the user's browser via WebGPU.
+2. **In-Browser Embeddings**: Fast client-side vector embeddings with models like `all-MiniLM-L6-v2` or `bge-small-en-v1.5` using Transformers.js v3.
+3. **Hybrid Edge-Cloud Fallback**: Gracefully falling back to server-side LLMs when client hardware lacks WebGPU or sufficient VRAM.
+4. **Zero-Latency PII Masking**: Anonymizing sensitive user data locally on the client before sending queries to external LLMs.
+
+---
+
+### Production Implementation Recipes
+
+#### Recipe 1: In-Browser Semantic Embedding Generation with Transformers.js v3
+```typescript
+import { pipeline, env } from '@huggingface/transformers';
+
+// Configure cache and worker settings
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+let embedder: any = null;
+
+export async function getLocalEmbedding(text: string): Promise {
+ if (!embedder) {
+ embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+ dtype: 'fp32',
+ device: 'webgpu', // Accelerate via WebGPU if supported
+ });
+ }
+
+ const output = await embedder(text, { pooling: 'mean', normalize: true });
+ return Array.from(output.data);
+}
+```
+
+#### Recipe 2: WebLLM In-Browser Chat Assistant with WebGPU
+```typescript
+import * as webllm from '@mlc-ai/web-llm';
+
+export async function createLocalChatEngine(onProgress?: (report: webllm.InitProgressReport) => void) {
+ // Check WebGPU compatibility
+ if (!('gpu' in navigator)) {
+ throw new Error('WebGPU is not supported in this browser. Fallback to cloud API.');
+ }
+
+ const selectedModel = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
+
+ const engine = await webllm.CreateMLCEngine(selectedModel, {
+ initProgressCallback: onProgress,
+ });
+
+ return {
+ generateResponse: async (prompt: string): Promise => {
+ const reply = await engine.chat.completions.create({
+ messages: [{ role: 'user', content: prompt }],
+ temperature: 0.2,
+ });
+ return reply.choices[0]?.message.content || '';
+ },
+ };
+}
+```
+
+---
+
+### Implementation Checklist
+- [ ] Implement browser feature detection (`'gpu' in navigator`) before initiating WebGPU model loads.
+- [ ] Provide a transparent download progress bar when fetching model weights on initial visit.
+- [ ] Cache model shards in IndexedDB or Cache API to ensure instant subsequent launches.
+- [ ] Provide automatic fallback to lightweight serverless APIs when client device VRAM is constrained.
+
+## Orchestration & Integration
+- Integrates with: `llm-finops-router`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
+
+---
+
+
+## Bahasa Indonesia
+
+### Tujuan & Gambaran Umum
+Panduan arsitektur tingkat produksi untuk menjalankan **Small Language Models (SLM)** dan model *embedding* langsung di dalam browser pengguna dan runtime edge. Menghilangkan biaya API cloud, menjamin privasi data 100% (tidak ada data yang keluar ke server pihak ketiga), dan mengaktifkan fitur AI instan yang dapat bekerja secara *offline* menggunakan **WebGPU**, **Transformers.js v3**, **WebLLM**, dan **ONNX Runtime Web**.
+
+### Kemampuan Utama
+1. **Eksekusi Model di Sisi Klien**: Menjalankan SLM terkuantisasi 1B–4B (Llama 3.2 1B/3B, Gemma 2 2B, Phi-3.5 Mini, Qwen 2.5) sepenuhnya di dalam browser pengguna dengan akselerasi WebGPU.
+2. **Embedding Vektor di Browser**: Pembuatan vektor semantik secepat kilat menggunakan Transformers.js v3 (`all-MiniLM-L6-v2` atau `bge-small`).
+3. **Fallback Hibrida Klien-Cloud**: Mengalihkan tugas ke server secara otomatis jika perangkat klien tidak mendukung WebGPU atau memiliki VRAM terbatas.
+4. **Penyensoran PII Tanpa Latensi**: Mengaburkan data pribadi sensitif secara lokal di perangkat klien sebelum diteruskan ke cloud.
+
+---
+
+### Resep Implementasi Produksi
+
+#### Resep 1: Pembuatan Embedding Vektor di Browser dengan Transformers.js v3
+```typescript
+import { pipeline, env } from '@huggingface/transformers';
+
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+let modelEmbedding: any = null;
+
+export async function buatEmbeddingLokal(teks: string): Promise {
+ if (!modelEmbedding) {
+ modelEmbedding = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+ dtype: 'fp32',
+ device: 'webgpu',
+ });
+ }
+
+ const hasil = await modelEmbedding(teks, { pooling: 'mean', normalize: true });
+ return Array.from(hasil.data);
+}
+```
+
+#### Resep 2: Asisten AI di Browser dengan WebLLM & WebGPU
+```typescript
+import * as webllm from '@mlc-ai/web-llm';
+
+export async function inisialisasiMesinLokal(laporanProgres?: (laporan: webllm.InitProgressReport) => void) {
+ if (!('gpu' in navigator)) {
+ throw new Error('WebGPU tidak didukung pada browser ini. Alihkan ke API cloud.');
+ }
+
+ const modelTerpilih = 'Llama-3.2-1B-Instruct-q4f32_1-MLC';
+
+ const mesin = await webllm.CreateMLCEngine(modelTerpilih, {
+ initProgressCallback: laporanProgres,
+ });
+
+ return {
+ kirimPesan: async (pertanyaan: string): Promise => {
+ const balasan = await mesin.chat.completions.create({
+ messages: [{ role: 'user', content: pertanyaan }],
+ temperature: 0.2,
+ });
+ return balasan.choices[0]?.message.content || '';
+ },
+ };
+}
+```
+
+---
+
+### Checklist Implementasi
+- [ ] Deteksi ketersediaan WebGPU (`'gpu' in navigator`) sebelum memuat model.
+- [ ] Tampilkan indikator progres unduhan bobot model saat pertama kali diakses.
+- [ ] Simpan bobot model di Cache API atau IndexedDB agar kunjungan berikutnya instan tanpa unduh ulang.
+- [ ] Siapkan jalur fallback ke API cloud jika memori klien tidak mencukupi.
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `llm-finops-router`, `senior-frontend`, `vector-db-rag-expert`, `compliance-gdpr-privacy-expert`.
\ No newline at end of file
diff --git a/vibes-plug/skills/logging-error-tracking-expert/SKILL.md b/vibes-plug/skills/logging-error-tracking-expert/SKILL.md
new file mode 100644
index 000000000..1f17ee31c
--- /dev/null
+++ b/vibes-plug/skills/logging-error-tracking-expert/SKILL.md
@@ -0,0 +1,408 @@
+---
+name: logging-error-tracking-expert
+description: "Expert guide for structured logging (Pino, Winston), error tracking (Sentry), log aggregation (Axiom, Datadog), request correlation, and GDPR-compliant log management / Panduan ahli untuk logging terstruktur (Pino, Winston), pelacakan error (Sentry), agregasi log, korelasi request, dan manajemen log sesuai GDPR."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Logging & Error Tracking Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Production-grade guide for implementing structured logging, error tracking, and application monitoring. Covers **Pino** (high-performance JSON logging), **Sentry** SDK integration (React, Node.js, Next.js), **source map upload** for production errors, **request ID correlation** across microservices, **log aggregation** (Axiom, Datadog, Logflare), **alert rules**, **GDPR-compliant log redaction** (PII masking), and **OpenTelemetry integration**.
+
+### Trigger Conditions
+Activate this skill when:
+- Setting up structured logging for Node.js/Bun backend services.
+- Integrating Sentry for error tracking in React/Next.js apps.
+- Implementing request ID correlation across microservices.
+- Setting up log aggregation and search (Axiom, Datadog, Grafana Loki).
+- Configuring alerting rules for production errors.
+- Implementing GDPR-compliant log management (PII redaction).
+- Setting up source map uploads for production debugging.
+
+---
+
+### Logging Library Selection Guide
+
+| Library | Best For | Performance | Output Format |
+|---|---|---|---|
+| **Pino** | High-throughput Node.js services | ⭐⭐⭐⭐⭐ (fastest) | JSON (structured) |
+| **Winston** | Enterprise, multiple transports | ⭐⭐⭐ | Configurable |
+| **Bunyan** | Legacy projects | ⭐⭐⭐⭐ | JSON |
+| **console.log** | Never in production | ❌ | Unstructured |
+
+**Recommendation**: Use **Pino** for all production services (10x faster than Winston, native JSON).
+
+---
+
+### 1. Structured Logging with Pino
+
+```typescript
+// lib/logger.ts
+import pino from 'pino';
+
+export const logger = pino({
+ level: process.env.LOG_LEVEL ?? 'info',
+ // Redact sensitive fields (GDPR/PII)
+ redact: {
+ paths: ['req.headers.authorization', 'req.headers.cookie', '*.password', '*.token', '*.ssn', '*.creditCard'],
+ censor: '[REDACTED]',
+ },
+ // Standardized format
+ formatters: {
+ level: (label) => ({ level: label }),
+ bindings: (bindings) => ({
+ service: process.env.SERVICE_NAME ?? 'app',
+ environment: process.env.NODE_ENV,
+ version: process.env.APP_VERSION,
+ pid: bindings.pid,
+ hostname: bindings.hostname,
+ }),
+ },
+ timestamp: pino.stdTimeFunctions.isoTime,
+});
+
+// Child logger for specific domain
+export const dbLogger = logger.child({ module: 'database' });
+export const authLogger = logger.child({ module: 'auth' });
+export const paymentLogger = logger.child({ module: 'payment' });
+```
+
+#### Log Level Strategy
+```typescript
+// When to use each level:
+logger.fatal('Application cannot start — exiting'); // Process crash
+logger.error({ err }, 'Payment processing failed'); // Failed operations (needs attention)
+logger.warn('Rate limit threshold at 80%'); // Degraded state, approaching limits
+logger.info({ userId, action: 'login' }, 'User logged in'); // Business events, audit trail
+logger.debug({ query, params }, 'Database query executed'); // Development troubleshooting
+logger.trace({ request }, 'Incoming request'); // Extreme detail (rarely enabled)
+```
+
+---
+
+### 2. Request ID Correlation
+
+```typescript
+// middleware/request-id.ts
+import { randomUUID } from 'crypto';
+import { AsyncLocalStorage } from 'async_hooks';
+
+// Async context for request correlation
+export const requestContext = new AsyncLocalStorage<{ requestId: string }>();
+
+export function requestIdMiddleware(req: Request): string {
+ // Use incoming header or generate new ID
+ const requestId = req.headers.get('x-request-id') ?? randomUUID();
+
+ // Propagate to downstream services
+ return requestId;
+}
+
+// Usage with Pino child logger
+export function getRequestLogger() {
+ const ctx = requestContext.getStore();
+ return ctx ? logger.child({ requestId: ctx.requestId }) : logger;
+}
+
+// In API route
+export async function GET(request: Request) {
+ const requestId = requestIdMiddleware(request);
+
+ return requestContext.run({ requestId }, async () => {
+ const log = getRequestLogger();
+ log.info('Processing request');
+
+ // All downstream log calls include requestId automatically
+ const result = await fetchData(log);
+ return Response.json(result);
+ });
+}
+```
+
+---
+
+### 3. Sentry Integration (Next.js)
+
+```typescript
+// sentry.client.config.ts
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+ environment: process.env.NODE_ENV,
+ release: process.env.SENTRY_RELEASE,
+
+ // Performance monitoring
+ tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
+
+ // Session replay for debugging
+ replaysSessionSampleRate: 0.01, // 1% of sessions
+ replaysOnErrorSampleRate: 1.0, // 100% of error sessions
+
+ integrations: [
+ Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }),
+ ],
+
+ // Filter noise
+ ignoreErrors: [
+ 'ResizeObserver loop',
+ 'Non-Error promise rejection',
+ /Loading chunk \d+ failed/,
+ ],
+
+ // Scrub PII before sending
+ beforeSend(event) {
+ if (event.user) {
+ delete event.user.ip_address;
+ delete event.user.email; // Or hash it
+ }
+ return event;
+ },
+});
+```
+
+```typescript
+// sentry.server.config.ts
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ dsn: process.env.SENTRY_DSN,
+ tracesSampleRate: 0.1,
+
+ // Capture unhandled promise rejections
+ integrations: [
+ Sentry.prismaIntegration(), // Auto-track Prisma queries
+ ],
+});
+```
+
+#### Source Map Upload (CI/CD)
+```yaml
+# .github/workflows/deploy.yml
+- name: Upload Source Maps to Sentry
+ env:
+ SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+ SENTRY_ORG: your-org
+ SENTRY_PROJECT: your-project
+ run: |
+ npx @sentry/cli sourcemaps upload \
+ --release=${{ github.sha }} \
+ .next/static
+```
+
+---
+
+### 4. Log Aggregation Setup (Axiom)
+
+```typescript
+// lib/axiom-transport.ts
+import { pino } from 'pino';
+
+// Pino transport for Axiom (or any HTTP log service)
+const transport = pino.transport({
+ targets: [
+ // Console output (development)
+ { target: 'pino-pretty', level: 'debug' },
+ // Axiom (production)
+ {
+ target: '@axiomhq/pino',
+ level: 'info',
+ options: {
+ dataset: process.env.AXIOM_DATASET,
+ token: process.env.AXIOM_TOKEN,
+ },
+ },
+ ],
+});
+
+export const logger = pino(transport);
+```
+
+---
+
+### 5. Alert Rules Configuration
+
+```typescript
+// Example alert conditions to configure in your monitoring tool
+const ALERT_RULES = {
+ criticalErrors: {
+ condition: 'error count > 50 in 5 minutes',
+ severity: 'critical',
+ notification: ['pagerduty', 'slack'],
+ },
+ highErrorRate: {
+ condition: 'error rate > 5% of total requests',
+ severity: 'high',
+ notification: ['slack'],
+ },
+ slowResponses: {
+ condition: 'p99 response time > 3000ms for 10 minutes',
+ severity: 'medium',
+ notification: ['slack'],
+ },
+ diskSpace: {
+ condition: 'disk usage > 85%',
+ severity: 'warning',
+ notification: ['email'],
+ },
+};
+```
+
+---
+
+### 6. GDPR-Compliant Log Management
+
+```typescript
+// lib/pii-redactor.ts
+
+/** Fields that must be redacted in logs */
+const PII_PATTERNS = [
+ /\b\d{3}-\d{2}-\d{4}\b/g, // SSN
+ /\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, // Credit card
+ /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, // Email
+];
+
+export function redactPII(text: string): string {
+ let result = text;
+ for (const pattern of PII_PATTERNS) {
+ result = result.replace(pattern, '[REDACTED]');
+ }
+ return result;
+}
+
+// Log retention policy
+const LOG_RETENTION = {
+ debug: '7 days',
+ info: '30 days',
+ warn: '90 days',
+ error: '365 days',
+ audit: '7 years', // Compliance requirement
+};
+```
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Problem | Correct Approach |
+|---|---|---|
+| `console.log` in production | Unstructured, no levels, no rotation | Use Pino with JSON output |
+| Logging PII (emails, passwords) | GDPR violation, security risk | Use Pino `redact` option |
+| No request correlation ID | Can't trace requests across services | Propagate `x-request-id` header |
+| Logging everything at `info` level | Log noise, storage waste | Use appropriate levels (debug/info/warn/error) |
+| No source maps in production errors | "Minified React error #xxx" | Upload source maps to Sentry |
+| No log rotation/retention policy | Disk fills up, storage costs grow | Set TTL per level, archive old logs |
+| Alerting on every error | Alert fatigue | Set meaningful thresholds and severity levels |
+
+---
+
+### Integration with Other Skills
+
+- `data-telemetry-expert` — OpenTelemetry spans + log correlation
+- `error-resilience-expert` — Error tracking and monitoring setup
+- `js-backend-expert` — Server-side logging middleware (Fastify/Hono/Express)
+- `ci-cd-devops-architect` — Source map upload in CI/CD pipeline
+- `production-ready-hardener` — Pre-launch logging and monitoring audit
+- `zero-trust-secret-vault` — Secure logging of secret access patterns
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan pemantauan produksi yang andal.
+- `data-telemetry-expert` — Span OpenTelemetry + korelasi log.
+- `error-resilience-expert` — Setup pelacakan error dan monitoring.
+- `js-backend-expert` — Middleware logging sisi server (Fastify/Hono/Express).
+- `ci-cd-devops-architect` — Upload source map dalam pipeline CI/CD.
+- `production-ready-hardener` — Audit logging dan monitoring pra-peluncuran.
+
+### Deskripsi
+Panduan tingkat produksi untuk mengimplementasikan logging terstruktur, pelacakan error, dan pemantauan aplikasi. Mencakup **Pino** (logging JSON berkinerja tinggi), integrasi SDK **Sentry** (React, Node.js, Next.js), **upload source map** untuk error produksi, **korelasi request ID** lintas microservice, **agregasi log** (Axiom, Datadog, Logflare), **aturan alerting**, **redaksi log sesuai GDPR / UU PDP** (masking PII), dan integrasi **OpenTelemetry**.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika:
+- Menyiapkan logging terstruktur untuk layanan backend Node.js/Bun.
+- Mengintegrasikan Sentry untuk pelacakan error di aplikasi React/Next.js.
+- Mengimplementasikan korelasi request ID lintas microservice.
+- Menyiapkan agregasi dan pencarian log (Axiom, Datadog, Grafana Loki).
+- Mengonfigurasi aturan alerting untuk error produksi.
+- Mengimplementasikan manajemen log sesuai GDPR dan UU PDP (redaksi PII).
+
+---
+
+### Implementasi Pola Kunci (TypeScript)
+
+#### 1. Logger Terstruktur Berkinerja Tinggi dengan Pino & Redaksi PII
+```typescript
+// lib/logger.ts
+import pino from 'pino';
+
+export const logger = pino({
+ level: process.env.LOG_LEVEL ?? 'info',
+ // Redaksi field sensitif otomatis (Kepatuhan UU PDP & GDPR)
+ redact: {
+ paths: [
+ 'req.headers.authorization',
+ 'req.headers.cookie',
+ '*.password',
+ '*.token',
+ '*.nik',
+ '*.nomorKartu',
+ ],
+ censor: '[TEREDAKSI]',
+ },
+ formatters: {
+ level: (label) => ({ level: label }),
+ bindings: (bindings) => ({
+ layanan: process.env.SERVICE_NAME ?? 'backend-api',
+ lingkungan: process.env.NODE_ENV,
+ pid: bindings.pid,
+ hostname: bindings.hostname,
+ }),
+ },
+ timestamp: pino.stdTimeFunctions.isoTime,
+});
+
+export const dbLogger = logger.child({ modul: 'database' });
+export const paymentLogger = logger.child({ modul: 'pembayaran' });
+```
+
+#### 2. Korelasi Request ID dengan AsyncLocalStorage
+```typescript
+import { randomUUID } from 'crypto';
+import { AsyncLocalStorage } from 'async_hooks';
+import { logger } from './logger';
+
+export const konteksRequest = new AsyncLocalStorage<{ requestId: string }>();
+
+export function getLoggerRequest() {
+ const ctx = konteksRequest.getStore();
+ return ctx ? logger.child({ requestId: ctx.requestId }) : logger;
+}
+```
+
+#### 3. Inisialisasi Sentry Klien di Next.js 15
+```typescript
+// sentry.client.config.ts
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+ environment: process.env.NODE_ENV,
+ tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
+ replaysOnErrorSampleRate: 1.0, // Rekam 100% sesi yang mengalami error
+});
+```
\ No newline at end of file
diff --git a/vibes-plug/skills/mcp-sampling-critic/SKILL.md b/vibes-plug/skills/mcp-sampling-critic/SKILL.md
new file mode 100644
index 000000000..be0f444f0
--- /dev/null
+++ b/vibes-plug/skills/mcp-sampling-critic/SKILL.md
@@ -0,0 +1,164 @@
+---
+name: mcp-sampling-critic
+description: "Expert guide for MCP client sampling (sampling/createMessage), Critic-in-the-Loop agentic quality gates, autonomous human-in-the-loop emulation, and multi-model consensus verification / Panduan ahli sampling MCP client, quality gate agen Critic-in-the-Loop, dan verifikasi konsensus multi-model."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# mcp-sampling-critic — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with `mcp-server-architect`, `autonomous-red-teamer`, `ai-code-review-autonomous`, `speculative-multi-draft-synthesizer`, `anti-slop`, and `zero-to-prod-orchestrator` to establish autonomous Critic-in-the-Loop validation before any state or disk mutations.
+
+### Description
+Production protocol for leveraging Model Context Protocol (MCP v1.x) Client Sampling (`sampling/createMessage`) to create recursive adversarial quality gates. In standard architectures, tools execute code blindly upon invocation. With MCP Sampling, a specialized Critic engine pauses execution, initiates a nested sampling call to the host LLM (or a secondary frontier model), and asks the Critic model to inspect proposed diffs against the 7 Anti-Slop Pillars, security boundaries, and invariant state machines. Writes are only permitted when the Critic grants an `APPROVED` verdict.
+
+### Trigger Conditions
+Activate this skill when:
+- Designing autonomous agent loops that modify filesystem files or execute database migrations.
+- Implementing the `CRITIC_VALIDATOR` swarm topology where an implementer agent's draft must pass an independent quality audit.
+- Eliminating AI-generated placeholders (`// TODO`), silent error suppressions, or SQL injection vectors before pull request creation.
+- Enforcing human-in-the-loop or critic-in-the-loop safeguards without requiring manual human clicking.
+
+---
+
+### Critic-in-the-Loop Protocol Architecture
+
+```
+PROPOSED CODE DRAFT
+ │
+ ▼
+┌───────────────────────────┐
+│ STATIC REGEX & AST FILTER │ Instant rule scan (P1-P7 Anti-Slop, silent catches)
+└─────────────┬─────────────┘
+ │
+ ┌───────────┴───────────┐
+ ▼ ▼
+FAIL (Score < 85) PASS (Score >= 85)
+ │ │
+Reject immediately ┌────▼────────────────────────┐
+with suggestions │ MCP SAMPLING REQUEST │ sampling/createMessage
+ │ to Host LLM (Independent) │
+ └────────────┬────────────────┘
+ │
+ ▼
+ FINAL CRITIC VERDICT
+ (APPROVED -> Write to disk)
+```
+
+#### 1. MCP Sampling Request Construction (TypeScript)
+
+```typescript
+export interface SamplingMessagePayload {
+ messages: Array<{
+ role: 'user' | 'assistant';
+ content: { type: 'text'; text: string };
+ }>;
+ systemPrompt: string;
+ maxTokens: number;
+ modelPreferences?: {
+ hints?: Array<{ name: string }>;
+ costPriority?: number;
+ speedPriority?: number;
+ intelligencePriority?: number;
+ };
+}
+
+export function buildCriticSamplingPayload(
+ targetFile: string,
+ proposedCode: string,
+ staticFindings: Array<{ ruleName: string; message: string }>
+): SamplingMessagePayload {
+ const findingsSummary = staticFindings.length > 0
+ ? staticFindings.map(f => `- ${f.ruleName}: ${f.message}`).join('\n')
+ : 'None detected by initial AST filter.';
+
+ return {
+ systemPrompt: `You are the Sovereign Anti-Slop Critic (2026 Edition).
+Perform a strict code audit against:
+1. Zero placeholder stubs (// TODO, // ...rest of code).
+2. Zero silent error suppression (empty catch blocks).
+3. 5-state interactive UI contract (hover, focus-visible, active, disabled).
+4. SQL injection prevention (parameterized queries only).
+Output JSON: { "verdict": "APPROVED" | "REJECTED", "score": 0-100, "rationale": "..." }`,
+ maxTokens: 2048,
+ modelPreferences: {
+ intelligencePriority: 1.0,
+ costPriority: 0.2
+ },
+ messages: [
+ {
+ role: 'user',
+ content: {
+ type: 'text',
+ text: `Target: ${targetFile}\nPreliminary AST Warnings:\n${findingsSummary}\n\nCode to Audit:\n\`\`\`typescript\n${proposedCode}\n\`\`\``
+ }
+ }
+ ]
+ };
+}
+```
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasikan skill `mcp-server-architect`, `autonomous-red-teamer`, `ai-code-review-autonomous`, `speculative-multi-draft-synthesizer`, `anti-slop`, dan `zero-to-prod-orchestrator` untuk menetapkan validasi Critic-in-the-Loop otonom sebelum mutasi file atau database.
+
+### Deskripsi
+Protokol produksi untuk memanfaatkan *Client Sampling* pada Model Context Protocol (`sampling/createMessage`) guna membangun gerbang kualitas adversarial rekursif. Menggunakan MCP Sampling, server atau subagen menghentikan eksekusi sementara, melakukan panggilan sampling ke LLM host untuk mengaudit usulan perubahan kode terhadap 7 Pilar Anti-Slop, keamanan injeksi SQL, dan penanganan error. Kode hanya ditulis ke disk apabila mendapatkan status `APPROVED`.
+
+### Kondisi Pemicu
+- Merancang alur agen otonom yang memodifikasi file repositori atau migrasi basis data.
+- Menjalankan topologi swarm `CRITIC_VALIDATOR` di mana draf implementer harus diverifikasi auditor independen.
+- Menghapus stub placeholder malas (`// TODO`) dan penelanan error secara otomatis sebelum commit.
+
+---
+
+### Pembuatan Payload Permintaan MCP Sampling (TypeScript)
+
+```typescript
+export interface PayloadPesanSampling {
+ messages: Array<{
+ role: 'user' | 'assistant';
+ content: { type: 'text'; text: string };
+ }>;
+ systemPrompt: string;
+ maxTokens: number;
+}
+
+export function bangunPayloadSamplingCritic(
+ fileTarget: string,
+ drafKode: string,
+ peringatanAwal: string[]
+): PayloadPesanSampling {
+ return {
+ systemPrompt: `Anda adalah Auditor Anti-Slop Berdaulat (Edisi 2026).
+Lakukan audit kode ketat terhadap:
+1. Ketiadaan stub placeholder (// TODO, // ...rest of code).
+2. Ketiadaan penelanan error diam-diam (empty catch block).
+3. Kontrak 5-state UI interaktif (hover, focus-visible, active, disabled).
+4. Pencegahan injeksi SQL (wajib parameterized query).
+Keluarkan JSON: { "verdict": "APPROVED" | "REJECTED", "score": 0-100, "rationale": "..." }`,
+ maxTokens: 2048,
+ messages: [
+ {
+ role: 'user',
+ content: {
+ type: 'text',
+ text: `File: ${fileTarget}\nPeringatan AST Awal: ${peringatanAwal.join(', ')}\n\nKode yang Diaudit:\n\`\`\`typescript\n${drafKode}\n\`\`\``
+ }
+ }
+ ]
+ };
+}
+```
\ No newline at end of file
diff --git a/vibes-plug/skills/mcp-server-architect/SKILL.md b/vibes-plug/skills/mcp-server-architect/SKILL.md
new file mode 100644
index 000000000..90fb8897f
--- /dev/null
+++ b/vibes-plug/skills/mcp-server-architect/SKILL.md
@@ -0,0 +1,316 @@
+---
+name: mcp-server-architect
+description: "Ultimate guide for designing, building, and security-hardening modern AI Tools/Bots via Model Context Protocol (MCP v1.x) in TypeScript and Python / Panduan utama merancang, membangun, dan mengamankan AI Tools/Bots modern melalui Model Context Protocol (MCP) dalam TypeScript dan Python."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# MCP Server Architect (Modern AI Tools & Agentic Protocol)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills: `ai-llm-integration-expert` for core LLM routing and RAG pipelines, `multi-agent-orchestration` for agent client consumption, and `doku-mcp-server` for payments integration examples. Ensure cohesive execution when spawning subagents.
+
+### Description
+Ultimate architectural guide for engineering high-performance, production-ready AI Tools/Bots via the **Model Context Protocol (MCP v1.x)**. Enforces the use of `FastMCP` (Python) and `@modelcontextprotocol/sdk` (TypeScript). Mandates strict security guardrails, schema validation, stateful resource streaming, and support for both Standard Stdio and Streamable HTTP / Server-Sent Events (SSE) transports.
+
+### Trigger Conditions
+- Building an MCP server to expose tools, resources, or prompt templates to AI agents.
+- Integrating backend APIs, file systems, or databases as MCP agent tools.
+- Implementing stateful, real-time MCP servers (resource subscriptions, log tailing, live metrics).
+- Securing and auditing MCP servers exposing sensitive financial or production data.
+
+---
+
+### SDK Selection (Mandatory Standard)
+1. **Python**: `FastMCP` (FastAPI-like high-level DX for MCP tools, resources, and prompt templates).
+2. **TypeScript**: `@modelcontextprotocol/sdk` (official SDK using the `McpServer` high-level abstraction with `zod`).
+
+---
+
+### Production Implementation Recipes
+
+#### Recipe 1: Production TypeScript MCP Server (Streamable HTTP / SSE)
+```typescript
+import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
+import express from 'express';
+import { z } from 'zod';
+
+// Initialize the high-level MCP Server
+const server = new McpServer({
+ name: 'enterprise-analytics-mcp',
+ version: '1.0.0',
+});
+
+// Register a type-safe Tool with Zod validation
+server.tool(
+ 'calculate_metrics',
+ 'Calculates business analytics metrics across timeframes',
+ {
+ metricName: z.enum(['arr', 'churn', 'cac', 'ltv']).describe('The metric to compute'),
+ quarter: z.string().regex(/^Q[1-4]-202[0-9]$/).describe('Target quarter, e.g., Q1-2026'),
+ },
+ async ({ metricName, quarter }) => {
+ // Implement business logic with database access
+ const mockData = { arr: '$2.4M', churn: '1.2%', cac: '$450', ltv: '$9,200' };
+ return {
+ content: [
+ {
+ type: 'text',
+ text: JSON.stringify({ metric: metricName, quarter, value: mockData[metricName] }),
+ },
+ ],
+ };
+ }
+);
+
+// Register a Resource Template with dynamic URI
+server.resource(
+ 'system_health',
+ new ResourceTemplate('system://health/{service}', { list: undefined }),
+ async (uri, { service }) => {
+ return {
+ contents: [
+ {
+ uri: uri.href,
+ text: JSON.stringify({ service, status: 'HEALTHY', latencyMs: 14, timestamp: new Date().toISOString() }),
+ },
+ ],
+ };
+ }
+);
+
+// Expose via Express with SSE Transport
+const app = express();
+let transport: SSEServerTransport | null = null;
+
+app.get('/sse', async (req, res) => {
+ transport = new SSEServerTransport('/messages', res);
+ await server.connect(transport);
+});
+
+app.post('/messages', async (req, res) => {
+ if (transport) {
+ await transport.handlePostMessage(req, res);
+ } else {
+ res.status(400).send('Transport not established');
+ }
+});
+
+app.listen(3001, () => {
+ console.log('MCP Server listening on http://localhost:3001/sse');
+});
+```
+
+#### Recipe 2: Production FastMCP Server (Python)
+```python
+from fastmcp import FastMCP, Context
+from pydantic import BaseModel, Field
+from typing import Literal
+
+mcp = FastMCP("enterprise-vault-mcp", dependencies=["pydantic"])
+
+class QueryParams(BaseModel):
+ account_id: str = Field(..., description="UUID of customer account")
+ status_filter: Literal["active", "suspended", "all"] = Field("active", description="Status filter")
+
+@mcp.tool(name="fetch_account_summary", description="Retrieves account telemetry and balance")
+async def fetch_account_summary(params: QueryParams, ctx: Context) -> str:
+ ctx.info(f"Auditing request for account: {params.account_id}")
+
+ # Secure business logic with RLS validation
+ result = {
+ "account_id": params.account_id,
+ "balance_usd": 125430.50,
+ "tier": "enterprise",
+ "status": params.status_filter
+ }
+ return str(result)
+
+@mcp.resource("config://app-settings")
+def get_app_settings() -> str:
+ """Provides application configuration context to the agent."""
+ return '{"environment": "production", "rate_limit_rpm": 600, "region": "ap-southeast-1"}'
+
+if __name__ == "__main__":
+ # Runs standard Stdio transport or streamable HTTP
+ mcp.run(transport="stdio")
+```
+
+---
+
+### Security & Operational Guardrails
+1. **OAuth 2.1 & Bearer Authentication**: Bind session tokens to transport connections. Validate claims before executing any tool logic.
+2. **Schema Strictness**: Never use untyped payloads. Every argument must have explicit types, range constraints, and descriptions to guide LLM tool-calling accuracy.
+3. **Row-Level Security (RLS)**: Enforce tenant and user context propagation to the database layer.
+4. **Circuit Breakers & Rate Limits**: Cap consecutive tool executions per agent turn to prevent endless agentic recursive loops.
+5. **Idempotency**: All destructive or state-mutating tools must require an `idempotency_key` argument.
+
+### Agent MCP Client Consumption & Tool Discovery
+When acting as an AI Agent consuming external MCP servers:
+1. **Dynamic Tool Discovery**: Check `list_resources` or `mcp_config.json` before assuming external capabilities do not exist.
+2. **Defensive Schema Querying**: Never guess database schema or table names. Always execute `list_tables` or `get_schema` before generating SQL queries (`execute_sql`).
+3. **Cross-System Workflow Loop**: Dynamically chain tools across domains: GitHub MCP (find issue) -> `grep_search` (locate file) -> `autonomous-tdd-debugger` (test & fix) -> GitHub MCP (create PR).
+4. **Rate Limit Awareness**: Avoid rapid unthrottled loops against external MCP servers.
+
+### High-Throughput / Batched MCP Tool Execution (Gemini 4 Pro Readiness)
+- Ensure your MCP endpoints can handle **Massive Parallel Tool Execution** as models shift towards Agentic MoE architectures.
+- Implement parallel sub-processing in tools that expect to be called concurrently (e.g., using Promise.all or syncio.gather for batch database queries instead of blocking sequentially).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi dengan skill domain relevan: `ai-llm-integration-expert` untuk perutean LLM inti dan pipeline RAG, `multi-agent-orchestration` untuk konsumsi klien agen, serta `doku-mcp-server` untuk contoh integrasi pembayaran.
+
+### Deskripsi
+Panduan arsitektur utama untuk membangun AI Tools/Bots modern dan siap produksi via **Model Context Protocol (MCP v1.x)**. Mewajibkan penggunaan `FastMCP` (Python) dan `@modelcontextprotocol/sdk` (TypeScript). Menerapkan pengamanan ketat, validasi skema, streaming resource stateful, serta dukungan transport Standar Stdio maupun Streamable HTTP / SSE.
+
+### Kondisi Pemicu
+- Membangun server MCP untuk mengekspos alat (*tools*), resource, atau template prompt ke agen AI.
+- Mengintegrasikan API backend, sistem file, atau database sebagai alat agen AI.
+- Mengimplementasikan server MCP stateful dan real-time (langganan resource, tailing log, metrik langsung).
+- Mengamankan server MCP yang mengekspos data finansial atau produksi yang sensitif.
+
+---
+
+### Standar Pemilihan SDK (Wajib)
+1. **Python**: `FastMCP` (pengalaman developer tingkat tinggi ala FastAPI untuk tools, resource, dan template prompt).
+2. **TypeScript**: `@modelcontextprotocol/sdk` (SDK resmi menggunakan abstraksi `McpServer` dengan `zod`).
+
+---
+
+### Resep Implementasi Produksi
+
+#### Resep 1: Server MCP TypeScript Produksi (Streamable HTTP / SSE)
+```typescript
+import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
+import express from 'express';
+import { z } from 'zod';
+
+const server = new McpServer({
+ name: 'enterprise-analytics-mcp',
+ version: '1.0.0',
+});
+
+// Pendaftaran Tool dengan validasi ketat Zod
+server.tool(
+ 'calculate_metrics',
+ 'Menghitung metrik analitik bisnis untuk kuartal tertentu',
+ {
+ metricName: z.enum(['arr', 'churn', 'cac', 'ltv']).describe('Metrik yang ingin dihitung'),
+ quarter: z.string().regex(/^Q[1-4]-202[0-9]$/).describe('Target kuartal, misal: Q1-2026'),
+ },
+ async ({ metricName, quarter }) => {
+ const data = { arr: '$2.4M', churn: '1.2%', cac: '$450', ltv: '$9,200' };
+ return {
+ content: [
+ {
+ type: 'text',
+ text: JSON.stringify({ metrik: metricName, kuartal: quarter, nilai: data[metricName] }),
+ },
+ ],
+ };
+ }
+);
+
+// Pendaftaran Template Resource dengan URI Dinamis
+server.resource(
+ 'system_health',
+ new ResourceTemplate('system://health/{service}', { list: undefined }),
+ async (uri, { service }) => {
+ return {
+ contents: [
+ {
+ uri: uri.href,
+ text: JSON.stringify({ layanan: service, status: 'HEALTHY', latensiMs: 14, waktu: new Date().toISOString() }),
+ },
+ ],
+ };
+ }
+);
+
+const app = express();
+let transport: SSEServerTransport | null = null;
+
+app.get('/sse', async (req, res) => {
+ transport = new SSEServerTransport('/messages', res);
+ await server.connect(transport);
+});
+
+app.post('/messages', async (req, res) => {
+ if (transport) {
+ await transport.handlePostMessage(req, res);
+ } else {
+ res.status(400).send('Transport belum terhubung');
+ }
+});
+
+app.listen(3001, () => {
+ console.log('Server MCP berjalan pada http://localhost:3001/sse');
+});
+```
+
+#### Resep 2: Server FastMCP Produksi (Python)
+```python
+from fastmcp import FastMCP, Context
+from pydantic import BaseModel, Field
+from typing import Literal
+
+mcp = FastMCP("enterprise-vault-mcp", dependencies=["pydantic"])
+
+class ParameterAkun(BaseModel):
+ account_id: str = Field(..., description="UUID akun pengguna")
+ status_filter: Literal["active", "suspended", "all"] = Field("active", description="Filter status")
+
+@mcp.tool(name="ambil_ringkasan_akun", description="Mengambil telemetri dan saldo akun")
+async def ambil_ringkasan_akun(params: ParameterAkun, ctx: Context) -> str:
+ ctx.info(f"Memproses permintaan untuk akun: {params.account_id}")
+ hasil = {
+ "account_id": params.account_id,
+ "saldo_usd": 125430.50,
+ "tier": "enterprise",
+ "status": params.status_filter
+ }
+ return str(hasil)
+
+@mcp.resource("config://app-settings")
+def ambil_pengaturan_aplikasi() -> str:
+ """Menyediakan konteks konfigurasi aplikasi ke agen AI."""
+ return '{"environment": "production", "rate_limit_rpm": 600, "region": "ap-southeast-1"}'
+
+if __name__ == "__main__":
+ mcp.run(transport="stdio")
+```
+
+---
+
+### Keamanan & Batasan Operasional
+1. **Otentikasi OAuth 2.1 & Bearer**: Ikat token sesi ke koneksi transport. Validasi hak akses sebelum mengeksekusi logika alat.
+2. **Validasi Skema Ketat**: Hindari penggunaan parameter tanpa tipe data yang jelas. Setiap argumen wajib memiliki tipe data, batas nilai, dan deskripsi.
+3. **Row-Level Security (RLS)**: Teruskan identitas pengguna dan penyewa (tenant) ke lapisan database driver.
+4. **Circuit Breakers & Rate Limits**: Batasi pemanggilan tool berulang dalam satu giliran respon untuk mencegah perulangan tak terkontrol (*infinite loops*).
+5. **Idempotency**: Semua tool yang memodifikasi data wajib mendukung argumen `idempotency_key`.
+
+### Konsumsi Klien MCP & Eksplorasi Tool oleh Agen
+Ketika agen bertindak sebagai Klien MCP:
+1. **Eksplorasi Tool Dinamis**: Periksa `list_resources` atau konfigurasi MCP sebelum menyimpulkan kapabilitas tidak tersedia.
+2. **Kueri Skema Defensif**: Jangan pernah menebak nama tabel/skema. Selalu gunakan `list_tables` atau `get_schema` sebelum membuat kueri SQL.
+3. **Alur Kerja Lintas Sistem**: Rangkaikan pemanggilan tool antar-domain: GitHub MCP -> pencarian kode lokal -> perbaikan otonom -> Pull Request GitHub.
+4. **Kesadaran Batas Frekuensi**: Hindari loop pemanggilan berulang tanpa jeda waktu saat memanggil server MCP eksternal.
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `ai-llm-integration-expert`, `doku-mcp-server`, `zero-trust-secret-vault`.
+### Eksekusi Tool MCP Batch / Throughput Tinggi (Kesiapan Gemini 4 Pro)
+- Pastikan endpoint MCP Anda mampu menangani **Eksekusi Tool Paralel Masif** seiring transisi model menuju arsitektur Agentic MoE.
+- Terapkan pemrosesan sub-tugas paralel pada tools yang mungkin dipanggil secara bersamaan (misal: gunakan Promise.all atau syncio.gather untuk query batch, alih-alih mengeblok secara berurutan).
diff --git a/vibes-plug/skills/micro-frontend-architect/SKILL.md b/vibes-plug/skills/micro-frontend-architect/SKILL.md
new file mode 100644
index 000000000..b13224192
--- /dev/null
+++ b/vibes-plug/skills/micro-frontend-architect/SKILL.md
@@ -0,0 +1,113 @@
+---
+name: micro-frontend-architect
+description: "Expert guide for designing Micro-Frontend architectures using Webpack Module Federation, Vite Federation, and Single-SPA for large scale Vue and React applications."
+author: "Roedy Rustam"
+version: "4.3.0"
+---
+
+# Micro-Frontend Architect
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Production-grade guidance for breaking down monolithic frontend applications into scalable, independently deployable **Micro-Frontends (MFE)**. Covers integration via **Webpack Module Federation**, **Vite Federation**, and run-time container orchestration using patterns suitable for massive Enterprise applications in Vue or React.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Splitting a large frontend codebase into multiple smaller apps (Host and Remotes).
+- Configuring Webpack Module Federation (`ModuleFederationPlugin`).
+- Setting up Vite with `@originjs/vite-plugin-federation`.
+- Asking about sharing dependencies (e.g., sharing a single instance of Vue, React, or Pinia across apps).
+- Designing a cross-team frontend deployment strategy.
+
+### Core Concepts
+
+#### 1. Module Federation Concept
+Module federation allows a JavaScript application to dynamically load code from another application at runtime.
+- **Host (Shell):** The main container application that loads remote modules.
+- **Remote:** The micro-frontend application exposing components or logic.
+
+#### 2. Vite Federation Example
+```javascript
+// vite.config.js (Remote App)
+import federation from '@originjs/vite-plugin-federation'
+
+export default {
+ plugins: [
+ federation({
+ name: 'remote_app',
+ filename: 'remoteEntry.js',
+ exposes: {
+ './Button': './src/components/Button.vue',
+ },
+ shared: ['vue', 'pinia'] // Critical: Share core dependencies!
+ })
+ ]
+}
+
+// vite.config.js (Host App)
+import federation from '@originjs/vite-plugin-federation'
+
+export default {
+ plugins: [
+ federation({
+ name: 'host_app',
+ remotes: {
+ remote_app: 'http://localhost:5001/assets/remoteEntry.js',
+ },
+ shared: ['vue', 'pinia']
+ })
+ ]
+}
+```
+
+#### 3. State Management Across MFEs
+- **Avoid Global State if Possible:** Micro-frontends should ideally not share business state. Communicate via custom DOM events, URL parameters, or a thin Event Bus.
+- **Shared Store (Pinia/Zustand):** If state sharing is absolutely required, the Host app should instantiate the store and share the dependency instance via Federation.
+
+### Best Practices
+- **Strict Dependency Sharing:** Always mark core libraries (`react`, `react-dom`, `vue`, `vue-router`) as `singleton: true` and `shared` to prevent the browser from downloading and running multiple instances of the framework.
+- **CSS Isolation:** Ensure CSS from one Micro-Frontend does not bleed into another. Use CSS Modules, scoped CSS, or Shadow DOM.
+- **Independent Deployments:** The core value of MFE is that Team A can deploy the Remote App without requiring Team B to rebuild the Host App.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+This skill works best when combined with:
+- `vue-frontend-expert` / `senior-frontend` — For building the individual micro-apps.
+- `design-system-architect` — For ensuring all MFEs consume a shared, versioned UI component library.
+- `monorepo-architect` — For managing the codebases of multiple MFEs in a single Turborepo/pnpm workspace.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "Architecture & Scale".
+- `zero-to-prod-orchestrator` — Phase 2 (Architecture Strategy).
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan arsitektur untuk memecah aplikasi frontend raksasa menjadi **Micro-Frontends (MFE)** yang terukur dan dapat di-deploy secara independen. Mencakup **Webpack Module Federation** dan **Vite Federation**.
+
+### Kondisi Pemicu
+- Memecah aplikasi (monolith) Vue atau React menjadi beberapa sub-aplikasi.
+- Mengkonfigurasi plugin *Module Federation*.
+- Mencari cara untuk membagi *dependency* (seperti Vue atau React) agar tidak di-download dua kali oleh browser.
+
+### Panduan Singkat
+- **Host vs Remote:** *Host* adalah cangkang (shell) utama aplikasi Anda, *Remote* adalah aplikasi kecil (fitur) yang dimuat oleh Host secara dinamis di runtime.
+- **Berbagi Dependensi (Shared):** Sangat krusial! Pastikan framework utama (`vue`, `react`, `pinia`, `vue-router`) ditandai sebagai `shared` (dan seringkali `singleton`). Jika tidak, aplikasi akan error karena ada 2 instance Vue/React yang berjalan bersamaan.
+- **Isolasi CSS:** Pastikan gaya CSS dari MFE A tidak merusak MFE B. Gunakan *CSS Modules* atau kapsulasi *Scoped CSS*.
+- **Komunikasi Data:** Hindari penggunaan Global State (Redux/Pinia) lintas MFE jika memungkinkan. Gunakan *Custom Event Listener* di `window` atau passing props/URL untuk menjaga tiap MFE tetap independen.
\ No newline at end of file
diff --git a/vibes-plug/skills/mobile-expo-expert/SKILL.md b/vibes-plug/skills/mobile-expo-expert/SKILL.md
new file mode 100644
index 000000000..cbc2c05cd
--- /dev/null
+++ b/vibes-plug/skills/mobile-expo-expert/SKILL.md
@@ -0,0 +1,230 @@
+---
+name: mobile-expo-expert
+description: "Expert guide for React Native 0.79+ and Expo SDK 53+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.79+ dan Expo SDK 53+ untuk aplikasi mobile."
+author: "Roedy Rustam"
+
+version: "4.3.0"
+---
+
+# Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
+
+### Description
+Expert guide for building production-grade cross-platform mobile applications using **React Native 0.79+** and **Expo SDK 53+**. Covers the New Architecture (stable), Expo Router v4, OTA updates, native modules, and modern state management patterns for iOS and Android.
+
+### Trigger Conditions
+- Building a new iOS/Android cross-platform mobile app.
+- Using Expo SDK 53+ or React Native 0.79+ with the New Architecture.
+- Implementing file-based routing with **Expo Router v4**.
+- Setting up OTA (Over-the-Air) updates with EAS Update.
+- Writing native modules using **JSI** (JavaScript Interface) or **Expo Modules API**.
+- Integrating device features: camera, biometrics, notifications, location.
+
+### What's New in 2026
+
+#### React Native 0.79 — New Architecture Stable
+The **New Architecture** (Fabric + JSI + TurboModules) is now **fully stable** and the default for all new Expo SDK 53 projects:
+- **Fabric**: New rendering engine — synchronous rendering, better animations.
+- **JSI (JavaScript Interface)**: Direct C++ bridge — no more async serialization for native calls.
+- **TurboModules**: Lazy-loaded native modules — significantly faster startup time.
+- **Concurrent React**: Full support for `useTransition`, `useDeferredValue`, and Suspense on mobile.
+
+#### Expo SDK 53 — Key Updates
+- **Expo Router v4**: File-based routing with typed routes, API routes (Expo functions), and universal links.
+- **Expo Camera v15**: Unified camera API for iOS and Android.
+- **Expo SQLite v15**: Full SQLite with WAL mode and `useSQLiteContext` hook.
+- **Expo Modules API v2**: Easier native module authoring with Swift/Kotlin.
+- **EAS Build**: Faster builds with M-series Mac runners.
+
+### Core Architecture Patterns
+
+#### 1. Project Setup (Expo SDK 53 + New Arch)
+```bash
+npx create-expo-app@latest MyApp --template tabs
+cd MyApp
+# New Architecture is enabled by default in SDK 53
+```
+
+#### 2. Expo Router v4 — File-Based Routing
+```
+app/
+ _layout.tsx # Root layout (navigation + providers)
+ (tabs)/
+ _layout.tsx # Tab navigator
+ index.tsx # Home tab
+ profile.tsx # Profile tab
+ (auth)/
+ login.tsx # Login screen
+ register.tsx
+ modal.tsx # Modal screen
+```
+
+Use **typed routes** for compile-time safety:
+```typescript
+import { Link, useRouter } from 'expo-router';
+
+// Typed navigation — TypeScript errors on invalid paths
+Profile
+
+const router = useRouter();
+router.push('/modal');
+```
+
+#### 3. API Routes (Expo Functions)
+Expo Router v4 supports API routes for serverless backend logic:
+```typescript
+// app/api/user+api.ts
+export async function GET(request: Request) {
+ const user = await db.user.findFirst();
+ return Response.json(user);
+}
+```
+
+#### 4. State Management
+- **TanStack Query v5**: Primary choice for server state (`useQuery`, `useMutation`).
+- **Zustand**: Lightweight client state management (replace Context for complex state).
+- **MMKV**: Ultra-fast synchronous storage (replace AsyncStorage).
+- **Expo SQLite + Drizzle**: Local-first database with full SQL support.
+
+#### 5. Navigation Patterns
+```typescript
+// Deep linking & Universal Links configuration
+// app.json
+{
+ "expo": {
+ "scheme": "myapp",
+ "ios": { "associatedDomains": ["applinks:myapp.com"] },
+ "android": { "intentFilters": [{ "action": "VIEW", "data": [{ "scheme": "https", "host": "myapp.com" }] }] }
+ }
+}
+```
+
+#### 6. Native Modules — Expo Modules API v2
+```typescript
+// modules/my-sensor/src/MyModule.ts
+import { requireNativeModule } from 'expo-modules-core';
+const MyModule = requireNativeModule('MyModule');
+
+export function readSensor(): Promise {
+ return MyModule.readSensor();
+}
+```
+
+#### 7. OTA Updates with EAS Update
+```bash
+# Push an instant OTA update (no App Store review)
+eas update --branch production --message "Fix critical bug"
+```
+Use **channels** to target specific user groups (production, staging, beta).
+
+#### 8. Performance Best Practices
+- Use **FlashList** (Shopify) instead of `FlatList` for large lists.
+- Use **react-native-reanimated v3** for 60/120fps animations that run on the UI thread.
+- Use **react-native-gesture-handler** for gesture recognition on the native thread.
+- Enable **Hermes** engine (default in SDK 53) for faster startup and reduced memory.
+
+
+#### 9. Material Design 3 (M3 / Material You) Cross-Platform Theming
+Adhere to M3 specifications (https://m3.material.io/) for dynamic theming across Android and iOS:
+```typescript
+import { MD3LightTheme, MD3DarkTheme, PaperProvider } from 'react-native-paper';
+import { themeFromSourceColor, argbFromHex } from '@material/material-color-utilities';
+import { useColorScheme } from 'react-native';
+
+// Generate dynamic M3 color scheme from brand seed
+const seedColor = '#6750A4';
+const m3Theme = themeFromSourceColor(argbFromHex(seedColor));
+
+export function AppThemeProvider({ children }: { children: React.ReactNode }) {
+ const colorScheme = useColorScheme();
+ const isDark = colorScheme === 'dark';
+
+ const theme = {
+ ...(isDark ? MD3DarkTheme : MD3LightTheme),
+ colors: {
+ ...(isDark ? MD3DarkTheme.colors : MD3LightTheme.colors),
+ primary: isDark ? '#D0BCFF' : '#6750A4',
+ primaryContainer: isDark ? '#4F378B' : '#EADDFF',
+ surface: isDark ? '#1C1B1F' : '#FFFBFE',
+ surfaceVariant: isDark ? '#49454F' : '#E7E0EC',
+ },
+ };
+
+ return {children};
+}
+```
+
+---
+
+
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi mobile cross-platform tingkat produksi menggunakan **React Native 0.79+** dan **Expo SDK 53+**. Mencakup New Architecture (stabil), Expo Router v4, OTA updates, native modules, dan pola state management modern untuk iOS dan Android.
+
+### Kondisi Pemicu
+- Membangun aplikasi mobile iOS/Android cross-platform baru.
+- Menggunakan Expo SDK 53+ atau React Native 0.79+ dengan New Architecture.
+- Mengimplementasikan routing berbasis file dengan **Expo Router v4**.
+- Menyiapkan OTA (Over-the-Air) updates dengan EAS Update.
+- Menulis native modules menggunakan JSI atau Expo Modules API v2.
+- Mengintegrasikan fitur perangkat: kamera, biometrik, notifikasi, lokasi.
+
+### Yang Baru di 2026
+
+#### React Native 0.79 — New Architecture Stabil
+**New Architecture** (Fabric + JSI + TurboModules) kini **sepenuhnya stabil** dan menjadi default untuk semua proyek baru Expo SDK 53:
+- **Fabric**: Engine rendering baru — rendering sinkron, animasi lebih baik.
+- **JSI**: Bridge C++ langsung — tidak ada lagi serialisasi async untuk panggilan native.
+- **TurboModules**: Modul native lazy-loaded — startup jauh lebih cepat.
+- **Concurrent React**: Dukungan penuh untuk `useTransition`, `useDeferredValue`, dan Suspense di mobile.
+
+#### Expo SDK 53 — Pembaruan Utama
+- **Expo Router v4**: Routing berbasis file dengan typed routes, API routes, dan universal links.
+- **Expo Camera v15**: API kamera terpadu untuk iOS dan Android.
+- **Expo SQLite v15**: SQLite lengkap dengan mode WAL dan hook `useSQLiteContext`.
+- **Expo Modules API v2**: Pembuatan modul native yang lebih mudah dengan Swift/Kotlin.
+- **EAS Build**: Build lebih cepat dengan runner Mac M-series.
+
+### Pola Arsitektur Inti
+
+#### 1. Routing Berbasis File (Expo Router v4)
+Expo Router menggunakan konvensi direktori `app/` untuk mendefinisikan semua layar dan navigasi. Gunakan **typed routes** untuk keamanan type-safe di waktu kompilasi.
+
+#### 2. API Routes (Expo Functions)
+Expo Router v4 mendukung API routes untuk logika backend serverless langsung di dalam proyek.
+
+#### 3. State Management
+- **TanStack Query v5**: Pilihan utama untuk server state.
+- **Zustand**: State klien yang ringan.
+- **MMKV**: Penyimpanan sinkron ultra-cepat (pengganti AsyncStorage).
+- **Expo SQLite + Drizzle**: Database lokal-first dengan dukungan SQL penuh.
+
+#### 4. Native Modules — Expo Modules API v2
+Gunakan Expo Modules API untuk membuat modul native kustom dengan Swift (iOS) dan Kotlin (Android) dengan boilerplate minimal.
+
+#### 5. OTA Updates dengan EAS Update
+Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan channel (`production`, `staging`, `beta`) untuk menargetkan kelompok pengguna tertentu.
+
+#### 6. Praktik Terbaik Performa
+- **FlashList**: Pengganti FlatList yang jauh lebih cepat untuk daftar panjang.
+- **react-native-reanimated v3**: Animasi 60/120fps yang berjalan di UI thread.
+- **react-native-gesture-handler**: Pengenalan gesture di native thread.
+- **Hermes Engine**: Default di SDK 53 — startup lebih cepat, memori lebih sedikit.
+
+#### 7. Theming Lintas Platform Material Design 3 (M3 / Material You)
+Terapkan spesifikasi M3 (https://m3.material.io/) untuk theming dinamis pada Android dan iOS:
+- Gunakan `@material/material-color-utilities` untuk mengekstrak 5 palet tonal M3 dari warna seed brand.
+- Integrasikan dengan `react-native-paper` (MD3Theme) atau custom design tokens untuk memastikan peran warna (`primary`, `primaryContainer`, `surface`, `surfaceContainer`) dan elevasi tonal beradaptasi sempurna dengan tema terang dan gelap sistem.
diff --git a/vibes-plug/skills/modern-css-native-expert/SKILL.md b/vibes-plug/skills/modern-css-native-expert/SKILL.md
new file mode 100644
index 000000000..648eec561
--- /dev/null
+++ b/vibes-plug/skills/modern-css-native-expert/SKILL.md
@@ -0,0 +1,243 @@
+---
+name: modern-css-native-expert
+description: "Expert guide for cutting-edge Native CSS (2026 Standard) — CSS Anchor Positioning, @starting-style, View Transitions Level 2, Container Queries, and :has() / Panduan ahli fitur CSS native modern 2026."
+author: "Roedy Rustam"
+
+version: "4.3.0"
+---
+
+# Modern Native CSS Expert (2026 Standard & Primitives)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+
+## English
+
+### Purpose & Overview
+Production-grade engineering guide for modern **Native CSS features (2026 Edition)** that replace cumbersome JavaScript libraries with pure browser-native primitives. Covers the **CSS Anchor Positioning API** for tooltips/popovers, **`@starting-style`** for smooth entry/exit animations on top-layer elements (`