Agent skill · software engineering · aiskillstore
plate-handler
Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
Why this skill is useful
Provides specific implementation steps and commands for integrating Plate.js editors, which the AI wouldn't reliably generate on its own.
What it needs
Requires pnpm installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 for code snippets, CLI commands, and configuration details.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/plate-handler