Tiptap integration: build rich-text editors with AI assistance
Le skill officiel de l'équipe Tiptap pour les agents — intégrer correctement l'éditeur de texte enrichi headless : épinglage de version, ancrage docs-first, et recettes de fonctionnalités de la collaboration aux toolkits IA
- Quoi
- Le skill officiel de l'équipe Tiptap pour les agents — intégrer correctement l'éditeur de texte enrichi headless : épinglage de version, ancrage docs-first, et recettes de fonctionnalités de la collaboration aux toolkits IA
- Coût
- Gratuit
- Prérequis
- git, node/npm, et un projet où vous voulez un éditeur de texte enrichi — le skill est un guide que l'agent suit (discipline d'ancrage docs + source), pas un logiciel que l'agent installe pour vous
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill tiptap officiel de @ueberdosis (rédigé par l'équipe Tiptap elle-même) : instructions pour que les agents de code intègrent et travaillent avec l'éditeur de texte enrichi headless Tiptap. La discipline centrale : ne jamais deviner ou inventer des patterns — fonder chaque décision dans les docs et le source Tiptap (docs récupérées en Markdown en ajoutant .md à toute URL tiptap.dev/docs ; llms.txt liste chaque page ; lire le source installé depuis node_modules/@tiptap/* ; cloner uniquement en shallow pour les démos non accessibles autrement). Bonnes pratiques : résoudre la dernière version stable avec npm view, épingler tous les paquets d'extensions du monorepo à une seule ligne de version (ne jamais mélanger les majors, upgrader d'abord les projets Tiptap 2), résoudre les paquets pro depuis le registry (jamais depuis @tiptap/core), définir immediatelyRender: false pour le SSR, utiliser par défaut l'API Composable pour React. Recettes de fonctionnalités avec liens docs : collaboration temps réel (Y.Doc + extension Collaboration + TiptapCollabProvider avec appId/token Cloud), commentaires, suivi des modifications, import/export (DOCX, PDF, Markdown), l'AI Toolkit (travail agentique sur documents, côté serveur par défaut), génération IA de base, historique de versions, comparaison de snapshots, pages. Bémols honnêtes : la collaboration temps réel passe par Tiptap Cloud (niveau gratuit existant, niveaux payants pour la prod — obtenir l'appId/token depuis le dashboard Cloud) et certaines extensions pro viennent d'un registry npm privé (voir le guide pro-extensions) ; les extensions IA retirées (AI Agent, AI Changes, AI Suggestion, AI Assistant) ne doivent pas être implémentées depuis les docs dépréciées. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : git, node/npm, et un projet où vous voulez un éditeur de texte enrichi — le skill est un guide que l'agent suit (discipline d'ancrage docs + source), pas un logiciel que l'agent installe pour vous Installe-moi « Intégration Tiptap : construire des éditeurs de texte enrichi avec l'aide de l'IA ». Il donne à mon agent le skill officiel de l'équipe Tiptap : intégration docs-first (récupérer les docs en Markdown depuis tiptap.dev/docs, lire le source node_modules, shallow-clone des démos seulement si nécessaire), bonnes pratiques (résolution de version stable, épinglage à une seule ligne de version, pas de mélange de majors, immediatelyRender:false pour le SSR, API Composable pour React), et recettes de fonctionnalités avec liens docs (collaboration temps réel, commentaires, suivi des modifications, import/export, AI Toolkit, génération IA de base, historique de versions, comparaison de snapshots, pages). Licence MIT. Dépôt : https://github.com/ueberdosis/tiptap/blob/main/skills/tiptap/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « tiptap ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. npm install @tiptap/core et les extensions pour votre framework ; créer un compte Tiptap Cloud si vous voulez la collaboration temps réel). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.