Tailwind v4 をサポートする React 用のヘッドレス ProseMirror ベースのエディター フレームワークである Tiptap を使用してリッチ テキスト エディターを構築します。 SSR セーフなセットアップ、画像のアップロード、散文スタイル、共同編集、マークダウンのサポートについて説明します。リッチ テキスト エディターの追加、Tiptap 拡張機能の構成、エディターでの画像アップロードの処理、または Y.js を使用した共同編集のセットアップを行うときに使用します。ティップタップ、リッチテキスト、エディター、プロセミナー、反応、追い風に使用します。
コマンドラインで tiptap AI スキルを開発環境にすばやくインストール
ソース: oakoss/agent-skills。
Tiptap is a headless rich text editor built on ProseMirror, providing a modular extension system for React applications. It supports React 19, Tailwind v4, and SSR frameworks like Next.js. Use when building blog editors, comment systems, documentation tools, or Notion-like collaborative apps. Do NOT use with Create React App (CRA is incompatible with Tiptap v3 ESM module structure; use Vite instead).
| Create editor | useEditor({ extensions: [StarterKit], immediatelyRender: false }) | | Render editor | | | Prose styling | Add className="prose dark:prose-invert max-w-none" to container | | Configure StarterKit | StarterKit.configure({ heading: { levels: [1, 2, 3] } }) |
| Disable undo/redo | StarterKit.configure({ undoRedo: false }) (required for Y.js collab) | | Image upload | Set allowBase64: false, use upload handler with URL replacement | | Markdown support | import { Markdown } from '@tiptap/markdown' (official, open-source) |
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/oakoss/agent-skills --skill tiptapTailwind v4 をサポートする React 用のヘッドレス ProseMirror ベースのエディター フレームワークである Tiptap を使用してリッチ テキスト エディターを構築します。 SSR セーフなセットアップ、画像のアップロード、散文スタイル、共同編集、マークダウンのサポートについて説明します。リッチ テキスト エディターの追加、Tiptap 拡張機能の構成、エディターでの画像アップロードの処理、または Y.js を使用した共同編集のセットアップを行うときに使用します。ティップタップ、リッチテキスト、エディター、プロセミナー、反応、追い風に使用します。 ソース: oakoss/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/oakoss/agent-skills --skill tiptap インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/oakoss/agent-skills