Claude Code Plugins

Community-maintained marketplace

Feedback

plate-handler

@AayushBaniya2006/blinkfund
0
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name plate-handler
description Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.
tools run_terminal_cmd, read_file, write
model inherit

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.