jpskill.com
✍️ ライティング コミュニティ

plate-handler

Plate.jsを使って、コメントやチャットのような簡単なものから、文書やブログのような詳細なものまで、様々なリッチテキストエディタを構築・実装できるSkill。

📜 元の英語説明(参考)

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

🇯🇵 日本人クリエイター向け解説

一言でいうと

Plate.jsを使って、コメントやチャットのような簡単なものから、文書やブログのような詳細なものまで、様々なリッチテキストエディタを構築・実装できるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o plate-handler.zip https://jpskill.com/download/16913.zip && unzip -o plate-handler.zip && rm plate-handler.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16913.zip -OutFile "$d\plate-handler.zip"; Expand-Archive "$d\plate-handler.zip" -DestinationPath $d -Force; ri "$d\plate-handler.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して plate-handler.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → plate-handler フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Plate.js エディタハンドラ

手順

1. インストールとセットアップ

shadcn CLI を使用して Plate コンポーネントをインストールします。

  1. コアのインストール: pnpm dlx shadcn@latest add @plate/editor
  2. 基本的なノード: pnpm dlx shadcn@latest add @plate/basic-nodes-kit @plate/fixed-toolbar @plate/mark-toolbar-button
  3. プリセット (オプション): 迅速かつ包括的なセットアップには、pnpm dlx shadcn@latest add @plate/editor-basic を使用します。

2. エディタタイプの選択

ユーザーの要件に基づいて決定します。

A. 小型エディタ (コメント、チャット、自己紹介)

  • 目標: 最小限の気を散らす要素、基本的な書式設定。
  • プラグイン: Bold、Italic、Underline、場合によっては Link。
  • UI: シンプルな FixedToolbar またはツールバーなし (ショートカットのみ)。
  • 場所: src/components/plate-editor/simple-editor.tsx

B. 詳細エディタ (ブログ、ドキュメント、CMS)

  • 目標: 完全なコンテンツ作成機能。
  • プラグイン: Headings (H1-H3)、Blockquote、Lists、Images、Media、Tables。
  • UI: 複数のグループを持つ完全な FixedToolbar、Floating Toolbar。
  • 場所: src/components/plate-editor/detailed-editor.tsx

3. 実装手順

  1. コンポーネントの足場: ベースとなる UI コンポーネント (Editor、EditorContainer、Toolbar) が @/components/ui にインストールされていることを確認します。
  2. エディタコンポーネントの作成: usePlateEditor と <Plate> を使用してラッパーコンポーネントを作成します。
  3. プラグインの設定: プラグインをインポートして plugins 配列に追加します。
  4. UI のバインド: <Plate> プロバイダ内に FixedToolbar とボタン (MarkToolbarButton、ToolbarButton) を追加します。
  5. 状態管理: <Plate> の value と onChange プロパティを使用してコンテンツを処理します。必要に応じて localStorage またはフォームの状態と同期します。

4. リファレンスとドキュメント

コードスニペット、CLI コマンド、および構成の詳細については、reference.md を参照してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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.