vibes-plug 2.11.0 → 3.9.0

package/skills/pydantic-ai-expert/SKILL.md

@@ -0,0 +1,162 @@
+---
+name: pydantic-ai-expert
+description: "Expert guide for type-safe Python AI agent development with Pydantic AI — dependency injection, structured outputs, model-agnostic routing, and graph workflows / Panduan ahli pengembangan agen AI Python type-safe dengan Pydantic AI."
+author: vibes-plug-swarm
+version: "3.0.0"
+---
+
+# Pydantic AI Expert (Type-Safe Python Agent Engineering)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with domain skills like `python-programming-expert`, `multi-agent-orchestration`, `ai-llm-integration-expert`, `ai-evals-benchmark-expert`, and `database-orm-expert` to engineer type-safe, resilient backend AI agents.
+
+### Description
+Production-grade guide for building enterprise AI agents using **Pydantic AI** (from the creators of Pydantic). Unlike untyped or fragile agent libraries, Pydantic AI provides strict static typing (`Agent[DepsType, ReturnType]`), first-class dependency injection (`RunContext[Deps]`), automatic tool parameter validation via Pydantic v2 schemas, model-agnostic provider switching (Anthropic, OpenAI, Gemini, Groq, Ollama), dynamic system prompts, and deterministic structured outputs.
+
+**Swarm Synergy:** Within the **Backend & APIs Swarm**, this skill serves as the Lead Python Agent Engineer. It executes critical business operations, runs data pipelines, and integrates with SQL databases with compile-time type safety in Phase 4.
+
+### Trigger Conditions
+- Engineering Python-based autonomous agents requiring strict type safety and schema validation.
+- Implementing dependency injection (passing database connections, API clients, or user sessions) into agent tools.
+- Extracting guaranteed structured outputs from frontier reasoning models without JSON parsing errors.
+- Designing multi-agent delegation or agent handoffs in Python microservices.
+- Running unit tests and deterministic evals on agent logic using mock models (`TestModel`).
+
+### Pydantic AI Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    AGENT DEFINITION                         │
+│  Agent[DatabaseDeps, AuditReport](                          │
+│    model='anthropic:claude-3-7-sonnet-latest',              │
+│    result_type=AuditReport,                                 │
+│  )                                                          │
+└──────────────────────────────┬──────────────────────────────┘
+                               │
+       ┌───────────────────────┴───────────────────────┐
+       ▼                                               ▼
+┌──────────────────────────────┐       ┌──────────────────────────────┐
+│     DEPENDENCY INJECTION     │       │     TOOL EXECUTION LOOP      │
+│  RunContext[DatabaseDeps]    │       │  @agent.tool                 │
+│  • Async DB connection pool  │       │  • Auto Pydantic validation  │
+│  • Tenant & session auth     │       │  • Structured error return   │
+└──────────────────────────────┘       └──────────────────────────────┘
+                               │
+                               ▼
+┌─────────────────────────────────────────────────────────────┐
+│             DETERMINISTIC STRUCTURED RESULT                 │
+│  result.data -> Pydantic BaseModel instance (Validated)     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Core Implementation Guidelines
+
+#### 1. Type-Safe Agent with Dependency Injection
+Pass database pools or HTTP clients directly into tools without global state:
+```python
+from dataclasses import dataclass
+import asyncpg
+from pydantic import BaseModel, Field
+from pydantic_ai import Agent, RunContext
+
+@dataclass
+class DatabaseDeps:
+    pool: asyncpg.Pool
+    tenant_id: str
+
+class UserAnomalyReport(BaseModel):
+    user_id: str
+    risk_score: float = Field(ge=0.0, le=1.0)
+    anomalous_events: list[str]
+    action_recommended: str
+
+# Typed agent: Agent[DependencyType, ResultType]
+security_agent = Agent[DatabaseDeps, UserAnomalyReport](
+    model='google-gla:gemini-2.5-flash',
+    result_type=UserAnomalyReport,
+    system_prompt=(
+        "You are an automated SecOps auditor. Analyze the user access logs provided "
+        "and generate a strictly structured anomaly assessment."
+    ),
+)
+
+@security_agent.system_prompt
+async def add_tenant_context(ctx: RunContext[DatabaseDeps]) -> str:
+    return f"Active Tenant ID: {ctx.deps.tenant_id}. Only audit records matching this tenant."
+
+@security_agent.tool
+async def query_audit_logs(ctx: RunContext[DatabaseDeps], user_id: str, limit: int = 50) -> list[dict]:
+    """Retrieve raw authentication events for a given user from the audit store."""
+    async with ctx.deps.pool.acquire() as conn:
+        rows = await conn.fetch(
+            "SELECT event_time, ip_address, action, status FROM audit_logs "
+            "WHERE tenant_id = $1 AND user_id = $2 ORDER BY event_time DESC LIMIT $3",
+            ctx.deps.tenant_id, user_id, limit
+        )
+        return [dict(r) for r in rows]
+
+# Execution:
+async def run_audit(pool: asyncpg.Pool, tenant_id: str, target_user: str) -> UserAnomalyReport:
+    deps = DatabaseDeps(pool=pool, tenant_id=tenant_id)
+    result = await security_agent.run(f"Audit user activity for {target_user}", deps=deps)
+    return result.data  # Guaranteed instance of UserAnomalyReport
+```
+
+#### 2. Model-Agnostic Switching & Local SLM Fallback
+Pydantic AI allows switching between cloud APIs and local Ollama models effortlessly:
+```python
+import os
+from pydantic_ai.models.anthropic import AnthropicModel
+from pydantic_ai.models.ollama import OllamaModel
+
+def get_agent_model():
+    if os.getenv("ENV") == "production":
+        return AnthropicModel('claude-3-7-sonnet-20250219')
+    else:
+        # Zero cost local development with Ollama
+        return OllamaModel(model_name='qwen2.5-coder:7b')
+```
+
+#### 3. Deterministic Testing with `TestModel`
+Write unit tests that verify tool invocations and structured output parsing without calling live LLMs:
+```python
+import pytest
+from pydantic_ai.models.test import TestModel
+
+@pytest.mark.asyncio
+async def test_security_agent_tool_dispatch():
+    # TestModel can simulate deterministic responses or tool calls
+    test_model = TestModel(call_tools=['query_audit_logs'])
+    
+    with security_agent.override(model=test_model):
+        deps = DatabaseDeps(pool=mock_pool, tenant_id="tenant_123")
+        result = await security_agent.run("Audit user 456", deps=deps)
+        assert result.data is not None
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `python-programming-expert`, `multi-agent-orchestration`, `ai-llm-integration-expert`, `ai-evals-benchmark-expert`, dan `database-orm-expert` untuk membangun agen AI backend yang aman secara tipe (*type-safe*) dan tangguh.
+
+### Deskripsi
+Panduan produksi untuk membangun agen AI kelas perusahaan menggunakan **Pydantic AI** (dari pembuat library Pydantic). Tidak seperti library agen yang tidak bertipe statis atau mudah mengalami galat runtime, Pydantic AI menyediakan sistem tipe statis yang ketat (`Agent[DepsType, ReturnType]`), *dependency injection* bawaan kelas satu (`RunContext[Deps]`), validasi parameter tool otomatis melalui skema Pydantic v2, fleksibilitas pergantian model (*model-agnostic*), dan hasil output terstruktur yang terjamin validitasnya.
+
+**Sinergi Swarm:** Di dalam **Backend & APIs Swarm**, skill ini bertindak sebagai Insinyur Agen AI Python Utama. Bertanggung jawab atas eksekusi logika bisnis kritis, orkestrasi pipeline data, dan query database SQL dengan keamanan tipe kompilasi pada Fase 4.
+
+### Kondisi Pemicu
+- Membangun agen otonom Python yang menuntut keamanan tipe statis dan validasi skema data ketat.
+- Menerapkan injeksi dependensi (koneksi database, klien HTTP, session user) ke dalam tool agen tanpa variabel global.
+- Mengekstrak data terstruktur yang dijamin valid dari model penalaran tanpa kegagalan parsing JSON.
+- Merancang delegasi tugas antar agen (*agent handoffs*) pada arsitektur microservices berbasis Python.
+- Menjalankan unit test deterministik dan evaluasi agen dengan `TestModel` tanpa konsumsi token API nyata.

package/skills/python-programming-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: python-programming-expert
 description: "Expert-level skill for Python programming (Python 3.13/3.14+). Covers type safety, generic syntax (PEP 695), async/await TaskGroups, FastAPI 0.115+, Pydantic v2, uv package manager, Ruff, and pytest in English and Indonesian."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Python Programming Expert (3.14 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 Expert-level Python development guidance for **Python 3.13 / 3.14+** covering JIT compilation, free-threaded (no-GIL) mode, modern type safety patterns, async architecture, and the full production stack: **FastAPI 0.115+**, **Pydantic v2**, **SQLAlchemy 2.x / SQLModel**, **uv**, **Ruff**, and **pytest-asyncio**.
@@ -365,7 +366,7 @@ async def test_create_user(client: AsyncClient):
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan pengembangan Python tingkat ahli untuk **Python 3.13/3.14+** mencakup JIT compilation, mode free-threaded (tanpa GIL), pola keamanan tipe modern, arsitektur async, dan stack produksi lengkap: **FastAPI 0.115+**, **Pydantic v2**, **SQLAlchemy 2.x**, **uv**, **Ruff**, dan **pytest-asyncio**.
@@ -405,4 +406,4 @@ Python 3.13 JIT: Aktifkan dengan `PYTHON_JIT=1` untuk kode CPU-bound. Free-threa
 
 ### Pengujian
 
-Gunakan `pytest-asyncio` dengan `asyncio_mode = "auto"` di `pyproject.toml`. Gunakan `AsyncClient` dari `httpx` dengan `ASGITransport` untuk pengujian endpoint async yang bersih dan terisolasi tanpa perlu menjalankan server.
+Gunakan `pytest-asyncio` dengan `asyncio_mode = "auto"` di `pyproject.toml`. Gunakan `AsyncClient` dari `httpx` dengan `ASGITransport` untuk pengujian endpoint async yang bersih dan terisolasi tanpa perlu menjalankan server.

package/skills/rate-limit-abuse-prevention/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: rate-limit-abuse-prevention
 description: "Expert guide for API rate limiting, bot protection, DDoS mitigation, brute-force prevention, and abuse detection / Panduan ahli untuk rate limiting API, perlindungan bot, mitigasi DDoS, pencegahan brute-force, dan deteksi penyalahgunaan."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Rate Limit & Abuse Prevention (2026 Edition)
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+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 protecting APIs and web applications from abuse, overuse, and attacks. Covers **rate limiting algorithms** (Token Bucket, Sliding Window), **Upstash Ratelimit**, **bot protection** (Cloudflare Turnstile, hCaptcha), **DDoS mitigation** at edge, **brute-force login prevention**, **API key management & usage quotas**, and **response headers** (X-RateLimit, Retry-After).
@@ -354,7 +355,7 @@ export async function validateApiKey(rawKey: string) {
 ## Bahasa Indonesia
 
 ### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 Panduan tingkat produksi untuk melindungi API dan aplikasi web dari penyalahgunaan, penggunaan berlebihan, dan serangan. Mencakup **algoritma rate limiting** (Token Bucket, Sliding Window), **Upstash Ratelimit**, **perlindungan bot** (Cloudflare Turnstile, hCaptcha), **mitigasi DDoS** di edge, **pencegahan brute-force login**, **manajemen API key & kuota penggunaan**, dan **header respons** (X-RateLimit, Retry-After).
@@ -374,4 +375,4 @@ Aktifkan skill ini ketika:
 - `js-backend-expert` — Integrasi middleware Express/Fastify/Hono
 - `saas-billing` — Rate limit bertingkat per paket langganan
 - `production-ready-hardener` — Audit keamanan pra-peluncuran
-- `cloud-hosting-expert` — Perlindungan WAF dan DDoS di edge
+- `cloud-hosting-expert` — Perlindungan WAF dan DDoS di edge

package/skills/realtime-collaboration-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: realtime-collaboration-expert
 description: "Expert guide for building real-time collaboration features using WebSockets, WebRTC, CRDTs (Yjs, Automerge), and Liveblocks / Panduan ahli untuk fitur kolaborasi real-time."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Real-Time Collaboration Expert / Ahli Kolaborasi Real-Time
@@ -96,4 +97,4 @@ yarray.observe(event => {
 - Terintegrasi dengan: `state-management-expert`, `event-driven-architect`, `mcp-server-architect`.
 
 ### Kondisi Pemicu
-Aktif setiap kali pengguna sedang membangun fitur *multiplayer*, kursor langsung (live cursors), pengeditan dokumen bersama, obrolan real-time, atau bekerja dengan WebSockets, Yjs, atau WebRTC.
+Aktif setiap kali pengguna sedang membangun fitur *multiplayer*, kursor langsung (live cursors), pengeditan dokumen bersama, obrolan real-time, atau bekerja dengan WebSockets, Yjs, atau WebRTC.

package/skills/rich-text-editor-expert/SKILL.md

@@ -1,177 +1,178 @@
----
-name: rich-text-editor-expert
-description: "Expert guide for rich text editor integration (Tiptap, Lexical, ProseMirror), collaborative editing, and custom extensions / Panduan ahli integrasi editor rich text (Tiptap, Lexical, ProseMirror), editing kolaboratif, dan ekstensi kustom."
-author: "Roedy Rustam"
----
-
-# Rich Text Editor Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-- **`realtime-collaboration-expert`**: Yjs/Automerge CRDTs for collaborative editing.
-- **`form-validation-expert`**: Form integration patterns for editor content.
-- **`headless-cms-expert`**: CMS schema integration for rich text fields.
-- **`file-upload-media-expert`**: Image/video embedding within editor content.
-- **`senior-frontend`**: React component patterns for editor wrappers.
-
-### Description
-Expert guide for integrating production-quality rich text editors into web applications. Covers Tiptap v2 (ProseMirror-based, extensible), Lexical (Meta's framework, high-performance), and ProseMirror (low-level, maximum control). Includes custom node/mark creation, collaborative editing with Yjs, slash commands, mention systems, image/video embedding, Portable Text output, and accessibility compliance.
-
-### Trigger Conditions
-- Adding a WYSIWYG or rich text editor to an application.
-- Building collaborative document editing features.
-- Creating custom editor extensions (mentions, slash commands, embeds).
-- Choosing between Tiptap, Lexical, or ProseMirror.
-- Implementing content serialization (HTML, JSON, Markdown, Portable Text).
-
----
-
-### Editor Selection Guide
-
-| Criteria | Tiptap v2 | Lexical (Meta) | ProseMirror |
-|----------|-----------|----------------|-------------|
-| Abstraction Level | High | Medium | Low |
-| Framework | React, Vue, vanilla | React (primary) | Vanilla JS |
-| Extension Ecosystem | ★★★★★ (50+ extensions) | ★★★ (growing) | ★★★★ (community) |
-| Collaboration | Yjs built-in | Yjs plugin | Yjs via prosemirror-collab |
-| Performance | ★★★★ | ★★★★★ | ★★★★ |
-| Learning Curve | Low-Medium | Medium-High | High |
-| **Best For** | Most apps, CMS | High-scale, messaging | Custom editors |
-
-**Recommendation:** Use **Tiptap v2** for 90% of use cases. Use **Lexical** for high-performance messaging apps. Use **ProseMirror** only when you need full low-level control.
-
-### Core Patterns
-
-#### 1. Tiptap v2 Setup (React)
-
-```tsx
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Placeholder from '@tiptap/extension-placeholder';
-import Image from '@tiptap/extension-image';
-import Link from '@tiptap/extension-link';
-import Collaboration from '@tiptap/extension-collaboration';
-import * as Y from 'yjs';
-
-const ydoc = new Y.Doc();
-
-function RichEditor({ onUpdate }: { onUpdate: (json: object) => void }) {
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({ history: false }), // Disable history for collab
-      Placeholder.configure({ placeholder: 'Start writing...' }),
-      Image.configure({ inline: true, allowBase64: false }),
-      Link.configure({ openOnClick: false, autolink: true }),
-      Collaboration.configure({ document: ydoc }),
-    ],
-    onUpdate: ({ editor }) => onUpdate(editor.getJSON()),
-  });
-
-  return (
-    <div className="editor-wrapper">
-      <MenuBar editor={editor} />
-      <EditorContent editor={editor} className="prose max-w-none" />
-    </div>
-  );
-}
-```
-
-#### 2. Custom Slash Command Extension (Tiptap)
-
-```typescript
-import { Extension } from '@tiptap/core';
-import Suggestion from '@tiptap/suggestion';
-
-export const SlashCommands = Extension.create({
-  name: 'slashCommands',
-  addOptions() {
-    return {
-      suggestion: {
-        char: '/',
-        items: ({ query }) => [
-          { title: 'Heading 1', command: ({ editor }) => editor.chain().focus().toggleHeading({ level: 1 }).run() },
-          { title: 'Bullet List', command: ({ editor }) => editor.chain().focus().toggleBulletList().run() },
-          { title: 'Code Block', command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run() },
-          { title: 'Image', command: ({ editor }) => { /* open upload dialog */ } },
-        ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase())),
-      },
-    };
-  },
-  addProseMirrorPlugins() {
-    return [Suggestion({ editor: this.editor, ...this.options.suggestion })];
-  },
-});
-```
-
-#### 3. Lexical Setup (React)
-
-```tsx
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { ListNode, ListItemNode } from '@lexical/list';
-import { CodeNode } from '@lexical/code';
-
-const editorConfig = {
-  namespace: 'MyEditor',
-  nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, CodeNode],
-  onError: (error: Error) => console.error(error),
-  theme: { /* custom theme classes */ },
-};
-
-function LexicalEditor() {
-  return (
-    <LexicalComposer initialConfig={editorConfig}>
-      <RichTextPlugin
-        contentEditable={<ContentEditable className="prose" />}
-        placeholder={<div className="text-gray-400">Start writing...</div>}
-        ErrorBoundary={LexicalErrorBoundary}
-      />
-      <HistoryPlugin />
-      <AutoFocusPlugin />
-    </LexicalComposer>
-  );
-}
-```
-
-#### 4. Content Serialization Patterns
-- **JSON** (Tiptap/Lexical): Store editor state as JSON for exact restoration.
-- **HTML**: Use `editor.getHTML()` for rendering in non-editor contexts.
-- **Markdown**: Convert with `@tiptap/extension-markdown` for developer-facing content.
-- **Portable Text** (Sanity): Map Tiptap nodes to Portable Text blocks for CMS storage.
-
-### Production Checklist
-- [ ] Content sanitization (DOMPurify) before rendering user HTML.
-- [ ] Image upload with presigned URLs (not base64 in content).
-- [ ] Keyboard shortcuts documented and accessible.
-- [ ] Mobile-responsive toolbar (sticky or floating).
-- [ ] Autosave with debounce (500ms) and conflict resolution.
-- [ ] Max content length validation.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-- **`realtime-collaboration-expert`**: CRDT Yjs/Automerge untuk editing kolaboratif.
-- **`form-validation-expert`**: Pola integrasi form untuk konten editor.
-- **`headless-cms-expert`**: Integrasi skema CMS untuk field rich text.
-
-### Deskripsi
-Panduan ahli untuk mengintegrasikan editor rich text berkualitas produksi ke dalam aplikasi web. Mencakup Tiptap v2, Lexical (Meta), dan ProseMirror. Termasuk pembuatan node/mark kustom, editing kolaboratif dengan Yjs, slash commands, sistem mention, embedding gambar/video, dan output Portable Text.
-
-### Kondisi Pemicu
-- Menambahkan editor WYSIWYG atau rich text ke aplikasi.
-- Membangun fitur editing dokumen kolaboratif.
-- Membuat ekstensi editor kustom (mention, slash commands, embed).
-- Memilih antara Tiptap, Lexical, atau ProseMirror.
+---
+name: rich-text-editor-expert
+description: "Expert guide for rich text editor integration (Tiptap, Lexical, ProseMirror), collaborative editing, and custom extensions / Panduan ahli integrasi editor rich text (Tiptap, Lexical, ProseMirror), editing kolaboratif, dan ekstensi kustom."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Rich Text Editor Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`realtime-collaboration-expert`**: Yjs/Automerge CRDTs for collaborative editing.
+- **`form-validation-expert`**: Form integration patterns for editor content.
+- **`headless-cms-expert`**: CMS schema integration for rich text fields.
+- **`file-upload-media-expert`**: Image/video embedding within editor content.
+- **`senior-frontend`**: React component patterns for editor wrappers.
+
+### Description
+Expert guide for integrating production-quality rich text editors into web applications. Covers Tiptap v2 (ProseMirror-based, extensible), Lexical (Meta's framework, high-performance), and ProseMirror (low-level, maximum control). Includes custom node/mark creation, collaborative editing with Yjs, slash commands, mention systems, image/video embedding, Portable Text output, and accessibility compliance.
+
+### Trigger Conditions
+- Adding a WYSIWYG or rich text editor to an application.
+- Building collaborative document editing features.
+- Creating custom editor extensions (mentions, slash commands, embeds).
+- Choosing between Tiptap, Lexical, or ProseMirror.
+- Implementing content serialization (HTML, JSON, Markdown, Portable Text).
+
+---
+
+### Editor Selection Guide
+
+| Criteria | Tiptap v2 | Lexical (Meta) | ProseMirror |
+|----------|-----------|----------------|-------------|
+| Abstraction Level | High | Medium | Low |
+| Framework | React, Vue, vanilla | React (primary) | Vanilla JS |
+| Extension Ecosystem | ★★★★★ (50+ extensions) | ★★★ (growing) | ★★★★ (community) |
+| Collaboration | Yjs built-in | Yjs plugin | Yjs via prosemirror-collab |
+| Performance | ★★★★ | ★★★★★ | ★★★★ |
+| Learning Curve | Low-Medium | Medium-High | High |
+| **Best For** | Most apps, CMS | High-scale, messaging | Custom editors |
+
+**Recommendation:** Use **Tiptap v2** for 90% of use cases. Use **Lexical** for high-performance messaging apps. Use **ProseMirror** only when you need full low-level control.
+
+### Core Patterns
+
+#### 1. Tiptap v2 Setup (React)
+
+```tsx
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Collaboration from '@tiptap/extension-collaboration';
+import * as Y from 'yjs';
+
+const ydoc = new Y.Doc();
+
+function RichEditor({ onUpdate }: { onUpdate: (json: object) => void }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ history: false }), // Disable history for collab
+      Placeholder.configure({ placeholder: 'Start writing...' }),
+      Image.configure({ inline: true, allowBase64: false }),
+      Link.configure({ openOnClick: false, autolink: true }),
+      Collaboration.configure({ document: ydoc }),
+    ],
+    onUpdate: ({ editor }) => onUpdate(editor.getJSON()),
+  });
+
+  return (
+    <div className="editor-wrapper">
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} className="prose max-w-none" />
+    </div>
+  );
+}
+```
+
+#### 2. Custom Slash Command Extension (Tiptap)
+
+```typescript
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+
+export const SlashCommands = Extension.create({
+  name: 'slashCommands',
+  addOptions() {
+    return {
+      suggestion: {
+        char: '/',
+        items: ({ query }) => [
+          { title: 'Heading 1', command: ({ editor }) => editor.chain().focus().toggleHeading({ level: 1 }).run() },
+          { title: 'Bullet List', command: ({ editor }) => editor.chain().focus().toggleBulletList().run() },
+          { title: 'Code Block', command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run() },
+          { title: 'Image', command: ({ editor }) => { /* open upload dialog */ } },
+        ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase())),
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [Suggestion({ editor: this.editor, ...this.options.suggestion })];
+  },
+});
+```
+
+#### 3. Lexical Setup (React)
+
+```tsx
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListNode, ListItemNode } from '@lexical/list';
+import { CodeNode } from '@lexical/code';
+
+const editorConfig = {
+  namespace: 'MyEditor',
+  nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, CodeNode],
+  onError: (error: Error) => console.error(error),
+  theme: { /* custom theme classes */ },
+};
+
+function LexicalEditor() {
+  return (
+    <LexicalComposer initialConfig={editorConfig}>
+      <RichTextPlugin
+        contentEditable={<ContentEditable className="prose" />}
+        placeholder={<div className="text-gray-400">Start writing...</div>}
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+      <HistoryPlugin />
+      <AutoFocusPlugin />
+    </LexicalComposer>
+  );
+}
+```
+
+#### 4. Content Serialization Patterns
+- **JSON** (Tiptap/Lexical): Store editor state as JSON for exact restoration.
+- **HTML**: Use `editor.getHTML()` for rendering in non-editor contexts.
+- **Markdown**: Convert with `@tiptap/extension-markdown` for developer-facing content.
+- **Portable Text** (Sanity): Map Tiptap nodes to Portable Text blocks for CMS storage.
+
+### Production Checklist
+- [ ] Content sanitization (DOMPurify) before rendering user HTML.
+- [ ] Image upload with presigned URLs (not base64 in content).
+- [ ] Keyboard shortcuts documented and accessible.
+- [ ] Mobile-responsive toolbar (sticky or floating).
+- [ ] Autosave with debounce (500ms) and conflict resolution.
+- [ ] Max content length validation.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`realtime-collaboration-expert`**: CRDT Yjs/Automerge untuk editing kolaboratif.
+- **`form-validation-expert`**: Pola integrasi form untuk konten editor.
+- **`headless-cms-expert`**: Integrasi skema CMS untuk field rich text.
+
+### Deskripsi
+Panduan ahli untuk mengintegrasikan editor rich text berkualitas produksi ke dalam aplikasi web. Mencakup Tiptap v2, Lexical (Meta), dan ProseMirror. Termasuk pembuatan node/mark kustom, editing kolaboratif dengan Yjs, slash commands, sistem mention, embedding gambar/video, dan output Portable Text.
+
+### Kondisi Pemicu
+- Menambahkan editor WYSIWYG atau rich text ke aplikasi.
+- Membangun fitur editing dokumen kolaboratif.
+- Membuat ekstensi editor kustom (mention, slash commands, embed).
+- Memilih antara Tiptap, Lexical, atau ProseMirror.