How do I install the Plate Handler skill?

Run npx skillmds@latest add aiskillstore/plate-handler in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Plate Handler safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Plate Handler?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Plate Handler free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Plate Handler?

aiskillstore (@aiskillstore) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Plate Handler by aiskillstore — Agent Skill

Name: Plate Handler
Rating: 4.5 (4 reviews)
Author: aiskillstore

File contents

Plate.js Editor Handler

Instructions

1. Installation & Setup

Use the shadcn CLI to install Plate components.

Core Installation: pnpm dlx shadcn@latest add @plate/editor
Basic Nodes: pnpm dlx shadcn@latest add @plate/basic-nodes-kit @plate/fixed-toolbar @plate/mark-toolbar-button
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

Scaffold Components: Ensure the base UI components (Editor, EditorContainer, Toolbar) are installed in @/components/ui.
Create Editor Component: Create the wrapper component using usePlateEditor and <Plate>.
Configure Plugins: Import and add plugins to the plugins array.
Bind UI: Add FixedToolbar and buttons (MarkToolbarButton, ToolbarButton) inside the <Plate> provider.
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 for code snippets, CLI commands, and configuration details.

---name: plate-handlerdescription: Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.---# Plate.js Editor Handler## Instructions### 1. Installation & SetupUse 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 TypeDecide 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 Steps1. **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 & DocsSee [reference.md](reference.md) for code snippets, CLI commands, and configuration details.

Frequently asked questions

Plate Handler