plate-handler
Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
Best use case
plate-handler is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "plate-handler" skill to help with this workflow task. Context: Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/plate-handler/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How plate-handler Compares
| Feature / Agent | plate-handler | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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.
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.
Related Skills
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
obsidian-clipper-template-creator
Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format clipped content.
notion-template-business
Expert in building and selling Notion templates as a business - not just making templates, but building a sustainable digital product business. Covers template design, pricing, marketplaces, marketing, and scaling to real revenue. Use when: notion template, sell templates, digital product, notion business, gumroad.
incident-runbook-templates
Create structured incident response runbooks with step-by-step procedures, escalation paths, and recovery actions. Use when building runbooks, responding to incidents, or establishing incident response procedures.
github-actions-templates
Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, automating development workflows, or creating reusable workflow templates.
fastapi-templates
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
employment-contract-templates
Create employment contracts, offer letters, and HR policy documents following legal best practices. Use when drafting employment agreements, creating HR policies, or standardizing employment documentation.
documentation-templates
Documentation templates and structure guidelines. README, API docs, code comments, and AI-friendly documentation.
defi-protocol-templates
Implement DeFi protocols with production-ready templates for staking, AMMs, governance, and lending systems. Use when building decentralized finance applications or smart contract protocols.
error-handler-advisor
Proactively reviews error handling patterns and suggests improvements using Result types, proper error propagation, and idiomatic patterns. Activates when users write error handling code or use unwrap/expect.
when-creating-skill-template-use-skill-builder
Create new Claude Code Skills with proper YAML frontmatter, progressive disclosure structure, and complete directory organization
venue-templates
Access comprehensive LaTeX templates, formatting requirements, and submission guidelines for major scientific publication venues (Nature, Science, PLOS, IEEE, ACM), academic conferences (NeurIPS, ICML, CVPR, CHI), research posters, and grant proposals (NSF, NIH, DOE, DARPA). This skill should be used when preparing manuscripts for journal submission, conference papers, research posters, or grant proposals and need venue-specific formatting requirements and templates.