vibes-plug 2.14.1 → 3.9.0

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.

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

@@ -1,7 +1,8 @@
 ---
 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"
+version: "3.0.0"
 ---
 
 # Rust Programming Expert (2024 Edition / v1.88+)
@@ -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 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.
@@ -201,7 +202,7 @@ async fn main() -> anyhow::Result<()> {
 ## 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
 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.
@@ -238,4 +239,4 @@ Clap v4 menggunakan derive macro untuk mendefinisikan antarmuka CLI secara dekla
 - Gunakan iterator (`map`, `filter`, `collect`) — dikompilasi setara dengan loop manual.
 - Hindari cloning yang tidak perlu — gunakan referensi dan lifetime.
 - Gunakan `Arc<Mutex<T>>` untuk state bersama yang dapat dimutasi di antara thread.
-- Profiling terlebih dahulu dengan `cargo flamegraph` sebelum mengoptimalkan.
+- Profiling terlebih dahulu dengan `cargo flamegraph` sebelum mengoptimalkan.