AI Agent Skill HUB
multiAI Summary Pending

plate-handler

Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.

231 stars
byaiskillstore
View on GitHubInstallation ↓

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/plate-handler/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/aayushbaniya2006/plate-handler/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/plate-handler/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How plate-handler Compares

Feature / Agentplate-handlerStandard Approach
Platform SupportmultiLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Plate.js Editor Handler

## Instructions

### 1. Installation & Setup
Use the `shadcn` CLI to install Plate components.
1.  **Core Installation**: `pnpm dlx shadcn@latest add @plate/editor`
2.  **Basic Nodes**: `pnpm dlx shadcn@latest add @plate/basic-nodes-kit @plate/fixed-toolbar @plate/mark-toolbar-button`
3.  **Preset (Optional)**: For a quick comprehensive setup, use `pnpm dlx shadcn@latest add @plate/editor-basic`.

### 2. Choosing an Editor Type
Decide based on the user's requirement:

#### A. Small Editor (Comments, Chat, Bio)
*   **Goal**: Minimal distraction, basic formatting.
*   **Plugins**: Bold, Italic, Underline, maybe Link.
*   **UI**: Simple `FixedToolbar` or no toolbar (shortcuts only).
*   **Location**: `src/components/plate-editor/simple-editor.tsx`

#### B. Detailed Editor (Blog, Documents, CMS)
*   **Goal**: Full content creation capabilities.
*   **Plugins**: Headings (H1-H3), Blockquote, Lists, Images, Media, Tables.
*   **UI**: Full `FixedToolbar` with multiple groups, Floating Toolbar.
*   **Location**: `src/components/plate-editor/detailed-editor.tsx`

### 3. Implementation Steps
1.  **Scaffold Components**: Ensure the base UI components (`Editor`, `EditorContainer`, `Toolbar`) are installed in `@/components/ui`.
2.  **Create Editor Component**: Create the wrapper component using `usePlateEditor` and `<Plate>`.
3.  **Configure Plugins**: Import and add plugins to the `plugins` array.
4.  **Bind UI**: Add `FixedToolbar` and buttons (`MarkToolbarButton`, `ToolbarButton`) inside the `<Plate>` provider.
5.  **State Management**: Use `value` and `onChange` props on `<Plate>` to handle content. Sync with `localStorage` or form state as needed.

### 4. Reference & Docs
See [reference.md](reference.md) for code snippets, CLI commands, and configuration details.