richcn
On this sectionAgent skill

Agent skill

An Agent Skill that teaches a coding agent how to install, mount and customise the notion-like editor using the installed types.

An Agent Skill that teaches a coding agent to install, mount, persist and customise this editor. It lives in this repository at skills/richcn-editor/: one SKILL.md with the decision flow, the hard rules and short recipes, plus six reference files one level deep. The skills CLI reads the repository and installs it.

What the skill covers

installation.md
The add command and the namespace form, what is installed, the overwrite prompt, the Radix-only rule and the check after install.
usage.md
Memory and persisted modes, documentId, initialValue and onChange, readOnly, the server-side renderer, and which file needs "use client".
persistence.md
The adapter interface, a complete adapter for an own API, the local storage adapter, and the autosave debounce.
file-uploads.md
The upload contract, a complete handler with progress and cancellation, URL resolution, and bookmark previews.
customization.md
Feature switches, options, theming, mentions and page links.
troubleshooting.md
The install and runtime failure modes: Base UI, an overwrite answered yes, the Vite alias, missing CSS, hydration, and a document that will not open.

Install with the skills CLI

The skills CLI reads the repository and installs the skill into the agent directories your project uses.

bunx --bun skills add huanngdev/me --skill richcn-editor

The same command works against a local checkout, which is useful before the skill is on the repository's default branch:

bash
npx skills@latest add /path/to/me --skill richcn-editor
The CLI clones the default branch, so skills add huanngdev/me --list lists the skill once it is on main. Until then, list it from a local path: npx skills add /path/to/me --list.

Install by hand

A skill is a folder with a SKILL.md in it. Copy the folder into the agent directory the project uses, and the agent finds it without any other setup.

bash
cp -R skills/richcn-editor .claude/skills/

# or, for the shared agent directory
cp -R skills/richcn-editor .agents/skills/

The reference files are relative links from SKILL.md, so copy the whole folder and not just the file.

An example prompt

The skill is written for an agent that is already in the project. A prompt that names the work, the API and the storage backend is enough; the skill supplies the rest.

text
Add the notion-like editor to this project and save documents to our API.

- Install the shadcn registry block and answer N at the overwrite prompts.
- Mount it in a client component at app/notes/page.tsx with a documentId of "notes".
- Implement the persistence adapter against our PUT /api/documents/:id route. Store the
  revision the editor sends and return 409 when it is stale.
- Store uploaded images in our S3 bucket.
- Read the installed index.tsx before using any prop you are unsure about.

The skill's hard rules are what keep an agent honest here: read the installed index.tsx before using a prop, never edit components/ui/*, answer N at the overwrite prompt, and keep the editor behind a client boundary.

Related