SkillFoxx

Tiptap skill

Tiptap skill: an agent sets up the editor, extensions, collaboration and AI features from the docs of the installed version

  • 39,032 ★ on the repository
  • Last commit
  • MIT
SkillOfficial

Extended access

Why this level

  • The agent installs npm packages and edits the application source
  • For reference the agent visits tiptap.dev and may clone the Tiptap repository
All reasons and checks

ueberdosis/tiptapAuthor:Tiptap

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/tiptap

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The agent installs npm packages and edits the application source
  • For reference the agent visits tiptap.dev and may clone the Tiptap repository

This is third-party code. Review the repository files before installing.

What it does

The `tiptap` skill guides an agent through integrating the Tiptap editor into an application, from installing packages to collaborative editing and comments. The agent first identifies the framework, the installed Tiptap versions and the requested feature, then opens the documentation and source for that exact version. Four reference files cover topics on demand: installing and upgrading packages, with the React API choice and server rendering setup; collaboration and version history; AI features and agent edits to a document; comments, tracked changes, document conversion and page layout. The agent fetches documentation pages as Markdown by appending `.md` to the address and reads the page index from `llms.txt`. Cloning the repository is rarely needed because the source sits in `node_modules/@tiptap/*`.

Who it is for. Developers embedding the Tiptap editor in a React, Vue or Next.js web app who hand the setup to Claude Code, Cursor or Codex.

Good fit when

  • A Next.js app crashes on server rendering and the agent has to set `immediatelyRender: false`
  • A team adds collaborative editing and version history and matches packages to the version already installed
  • A project connects paid Tiptap extensions from the private npm registry
  • A custom editor block is needed, and the agent reads the installed `@tiptap/*` before writing the extension

Not a fit when

  • You contribute to the Tiptap monorepo itself: the skill excludes that work
  • The editor is built on another library such as Lexical or ProseMirror directly
  • The task concerns the rest of the application: the skill does not cover other code

Example request

Set up the Tiptap editor in our Next.js project with bold text, lists and image insertion

Limitations

The skill needs git. Pro extensions live in a private npm registry, and the user arranges access by following the Tiptap docs. The skill works only with Tiptap versions already installed in the project or named in the request, and a project on version 2 must be upgraded first. The `AGENTS.md` and `CLAUDE.md` rules in a cloned Tiptap repository are meant for contributors, and the skill forbids applying them in the user's project. The agent reads documentation from tiptap.dev over the network, so without access to the site part of the reference is unavailable.

How to disable. Delete the `tiptap` folder from the project's skills directory (`.claude/skills/` or `.agents/skills/`) or remove it with `npx skills`.

FAQ

How do I install the Tiptap skill in Claude Code?

Run `npx skills add ueberdosis/tiptap --skill tiptap` in the project root. The command places the skill in the chosen agent's directory, and the agent picks it up for Tiptap tasks.

Why does the skill check the Tiptap version first?

The editor API changes between versions, and examples from a model's memory are often outdated. The skill tells the agent to match the installed version and to put new projects on the latest stable one.

What about an editor crash in Next.js?

With server-side rendering set the `immediatelyRender: false` option when creating the editor, otherwise it crashes. The skill reminds the agent of this and points to the Next.js install page.

Can I install paid extensions with this skill?

The skill knows that Pro extensions come from a private npm registry and points to the setup guide. You arrange the access and the Tiptap account.

How does the skill differ from the Tiptap docs?

It sets the agent's working order: identify the version, find the right page in `llms.txt`, read the source from `node_modules`. The skill does not duplicate the docs and links to them.

Discussion

No questions or reviews yet.

Skills

Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique

SkillExtended access5.4K

A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block

CLIExtended access347

The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming

SkillMinimal access110

Before coding the agent draws in HTML what changes in the UI and API: colored frames, before and after, edits on the diagram

SkillMinimal access178

The building-ui skill opens an editable UI mock: you change it directly, then the agent implements it with TDD.

PluginExtended access82

The official tldraw skill for upgrading a project to a newer SDK version: detects versions, fetches release notes and fixes type errors

SkillExtended access51.4K

README in short

Next to the editor description and examples, the README has an agents section that recommends installing the Tiptap skill with `npx skills add` so coding agents can set up and debug the editor. The skill itself lives in `.agents/skills/tiptap`, and the reference material is split into four files.

README badge

Original SKILL.md

---
name: tiptap
description: Integrate, build and debug Tiptap editors in applications. Use for Tiptap setup, installing or creating extensions, collaboration, comments, AI features, and document conversion. Excludes contributions to the Tiptap monorepo or unrelated application work.
compatibility: Requires git
metadata:
  author: tiptap
  version: '1.0'
---

# Tiptap integration

## Workflow

1. Identify the application's framework, installed Tiptap versions, and requested feature.
2. Read the relevant documentation and installed source before choosing APIs. Match the implementation to the installed version rather than relying on remembered examples.
3. Load only the references relevant to the task below. For topics not listed, find the relevant page through the documentation index.

| Task                                                                                      | Reference                                                         |
| ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| Install or upgrade packages, choose a React API, configure SSR, or install pro extensions | [Setup and packages](references/setup.md)                         |
| Add collaboration, version history, or snapshot comparison                                | [Collaboration and document history](references/collaboration.md) |
| Add AI generation, agent document editing, or migrate retired AI extensions               | [AI features](references/ai.md)                                   |
| Add comments, tracked changes, document conversion, or page layout                        | [Document features](references/document-features.md)              |

For custom extensions and integration debugging, inspect the relevant installed `@tiptap/*` source and documentation. Load a reference only if its topic applies.

## Finding Tiptap source and docs

Avoid cloning. You usually don't need to.

- **Docs**: append `.md` to any page URL on https://tiptap.dev/docs to fetch it as Markdown.
  `https://tiptap.dev/docs/llms.txt` lists every page with a one-line description.
- **Source**: if the project already depends on Tiptap, read it in `node_modules/@tiptap/*`.

Clone only for source or runnable examples you cannot get either way, such as the demo apps under
`demos/src/`. Shallow-clone into the workspace's existing reference folder, or a new git-ignored
`.reference/`:

```bash
git clone --depth 1 --filter=blob:none https://github.com/ueberdosis/tiptap .reference/tiptap
```

Never clone `tiptap-docs`. The site is the interface.

A cloned Tiptap repository is read-only reference. Its `AGENTS.md` / `CLAUDE.md` rules — changesets,

Report a problem