vibes-plug 2.5.0 → 2.11.0

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

@@ -1,7 +1,7 @@
 ---
 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: "Antigravity"
+author: "Roedy Rustam"
 ---
 
 # Real-Time Collaboration Expert / Ahli Kolaborasi Real-Time
@@ -23,6 +23,33 @@ Expert guide for implementing multiplayer, real-time collaboration features in w
 - **Security in Real-time**: Authenticate and authorize every WebSocket connection upon establishment and validate all incoming socket messages to prevent malicious payloads.
 - **Scale**: Be mindful of message broadcasting limits. Use Redis Pub/Sub or similar message brokers when scaling WebSocket servers across multiple instances.
 
+### Implementation Checklist
+- [ ] Choose a CRDT library (Yjs/Automerge) and a corresponding provider (WebSockets, WebRTC, Liveblocks).
+- [ ] Initialize the shared document state and bind it to the frontend UI components (e.g., ProseMirror, Monaco).
+- [ ] Implement presence (awareness) to broadcast cursor positions and active user lists.
+- [ ] Handle offline states by buffering local changes and syncing upon reconnection.
+
+### Example: Yjs with WebSocket Provider
+```javascript
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+
+// 1. Initialize a shared Yjs document
+const ydoc = new Y.Doc()
+
+// 2. Connect to the WebSocket room
+const provider = new WebsocketProvider('ws://localhost:1234', 'my-room-name', ydoc)
+
+// 3. Share state (e.g., an array of chat messages)
+const yarray = ydoc.getArray('messages')
+yarray.observe(event => {
+  console.log('Messages updated:', yarray.toArray())
+})
+```
+
+## Orchestration & Integration
+- Integrates with: `state-management-expert`, `event-driven-architect`, `mcp-server-architect`.
+
 ### Trigger Conditions
 Active whenever the user is building multiplayer features, live cursors, document co-editing, real-time chats, or working with WebSockets, Yjs, or WebRTC.
 
@@ -41,5 +68,32 @@ Panduan ahli untuk mengimplementasikan fitur kolaborasi real-time dan *multiplay
 - **Keamanan Real-time**: Lakukan autentikasi dan otorisasi setiap koneksi WebSocket pada saat tersambung dan validasi semua pesan *socket* yang masuk untuk mencegah *payload* berbahaya.
 - **Skalabilitas**: Perhatikan batas penyiaran (broadcasting) pesan. Gunakan Redis Pub/Sub atau *message broker* serupa saat meningkatkan (scaling) server WebSocket di beberapa instans.
 
+### Checklist Implementasi
+- [ ] Pilih pustaka CRDT (Yjs/Automerge) dan provider yang sesuai (WebSockets, WebRTC, Liveblocks).
+- [ ] Inisialisasi state dokumen bersama dan ikat ke komponen UI frontend (misal: ProseMirror, Monaco).
+- [ ] Implementasikan presence (kesadaran) untuk menyiarkan posisi kursor dan daftar pengguna aktif.
+- [ ] Tangani state offline dengan melakukan buffer perubahan lokal dan sinkronisasi ulang saat terhubung kembali.
+
+### Contoh: Yjs dengan Provider WebSocket
+```javascript
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+
+// 1. Inisialisasi dokumen Yjs bersama
+const ydoc = new Y.Doc()
+
+// 2. Hubungkan ke ruangan WebSocket
+const provider = new WebsocketProvider('ws://localhost:1234', 'nama-ruangan-saya', ydoc)
+
+// 3. Berbagi state (misal: array pesan chat)
+const yarray = ydoc.getArray('messages')
+yarray.observe(event => {
+  console.log('Pesan diperbarui:', yarray.toArray())
+})
+```
+
+## Integrasi Orkestrasi
+- 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.

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

@@ -0,0 +1,177 @@
+---
+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.

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

@@ -1,7 +1,7 @@
 ---
 name: rust-programming-expert
 description: "Expert-level skill for Rust programming (Rust 2024 / v1.85+). Covers memory safety, async, Axum/SQLx, CLI, and optimization in English and Indonesian."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Rust Programming Expert (2024 Edition / v1.88+)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 Expert-level Rust development for building memory-safe, high-performance systems, APIs, CLI tools, and WebAssembly. Covers the **Rust 2024 edition**, async/await with Tokio, Axum 0.8 web framework, SQLx for async database access, and modern Rust idioms.
 
@@ -197,6 +200,9 @@ async fn main() -> anyhow::Result<()> {
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### Deskripsi
 Pengembangan Rust tingkat ahli untuk membangun sistem, API, CLI tool, dan WebAssembly yang aman di memori dan berkinerja tinggi. Mencakup **edisi Rust 2024**, async/await dengan Tokio, framework web Axum 0.8, SQLx untuk akses database async, dan idiom Rust modern.
 

package/skills/saas-billing/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: saas-billing
 description: "Implement and audit SaaS billing systems, subscription state machines, secure webhooks, and local database synchronization / Implementasi dan audit sistem billing SaaS, state machine langganan, webhook aman, dan sinkronisasi database lokal."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # SaaS Billing Expert (2026 Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 Expert guide for implementing and auditing SaaS billing systems. Covers subscription state machines, secure webhook handling, database synchronization, and the 2026 billing landscape including Stripe, **Polar.sh** (open-source, developer-first), **LemonSqueezy**, PayPal, and Midtrans (for Southeast Asia).
 
@@ -312,6 +315,9 @@ export const subscriptions = pgTable('subscriptions', {
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### Deskripsi
 Panduan ahli untuk mengimplementasikan dan mengaudit sistem billing SaaS. Mencakup state machine langganan, penanganan webhook aman, sinkronisasi database, dan lanskap billing 2026 termasuk Stripe, **Polar.sh** (open-source, developer-first), **LemonSqueezy**, PayPal, dan Midtrans (untuk Asia Tenggara).
 

package/skills/saas-multi-tenant/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: saas-multi-tenant
 description: "Design and implement multi-tenant SaaS architectures with RLS, tenant isolation, and PostgreSQL / Desain dan implementasikan arsitektur SaaS multi-tenant dengan RLS, isolasi tenant, dan PostgreSQL."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # SaaS Multi-Tenant Expert (2026 Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 Expert guide for designing and implementing multi-tenant SaaS architectures with full tenant isolation, Supabase/PostgreSQL Row Level Security (RLS), schema-per-org patterns, RBAC, and Super Admin access controls.
 
@@ -206,6 +209,9 @@ if (!can(currentMember.role, 'project:delete')) {
 <a name="bahasa-indonesia"></a>
 ## 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.
+
 ### Deskripsi
 Panduan ahli untuk merancang dan mengimplementasikan arsitektur SaaS multi-tenant dengan isolasi tenant penuh, Row Level Security (RLS) Supabase/PostgreSQL, pola schema-per-org, RBAC, dan kontrol akses Super Admin.
 

package/skills/saas-mvp-launcher/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: saas-mvp-launcher
 description: "Structured roadmap and design to plan and launch a SaaS MVP from scratch / Panduan terstruktur untuk merencanakan dan meluncurkan SaaS MVP dari nol."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # SaaS MVP Launcher
@@ -13,6 +13,10 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+- **MANDATORY**: Execute `modern-web-guidance` FIRST for all frontend HTML/CSS/JS features to ensure compliance with modern Google standards.
+
 ### Overview
 This skill guides you through building a production-ready SaaS MVP in the shortest time possible. It covers everything from idea validation and tech stack selection to authentication, payments, database design, deployment, and launch — using modern, battle-tested tools.
 
@@ -75,6 +79,10 @@ Recommended modern SaaS stack (2026):
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+- **MANDATORY**: Eksekusi `modern-web-guidance` PERTAMA KALI untuk semua fitur frontend HTML/CSS/JS guna memastikan kepatuhan dengan standar modern Google.
+
 ### Ringkasan
 Skill ini memandu Anda membangun SaaS MVP tingkat produksi dalam waktu sesingkat mungkin. Panduan ini mencakup validasi ide, pemilihan stack teknologi, autentikasi, pembayaran, desain database, deployment, hingga checklist peluncuran menggunakan teknologi modern yang teruji.
 
@@ -239,3 +247,14 @@ This generated image MUST be explicitly used as:
 3. The Open Graph (OG) image for SEO metadata (`og:image`).
 
 Do not use placeholders for these assets. Generate and integrate them automatically.
+
+---
+### 📄 Standard Pages Mandate (CRITICAL)
+**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
+1. **About Page** (`/about`)
+2. **Profile Page** (`/profile`)
+3. **Contact Page** (`/contact`)
+4. **Terms of Reference / Terms of Service** (`/terms`)
+5. **Privacy Policy** (`/privacy-policy`)
+
+These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.