write-example — Claude Code skill: what it does, how to install
Guides coding agents through creating SDK examples for tldraw, enforcing folder naming, frontmatter fields, and React component conventions.
npx skills add tldraw/tldraw --skill write-example -a claude-codeWhat write-example does
The skill standardizes SDK demo creation within the apps/examples/src/examples directory. Each demo gets its own kebab-case folder housing a README.md with structured metadata, a PascalCase React component ending with Example, and an optional .css file. Titles must use sentence case rather than title case.
Inside the example file, the component requires a default export, a wrapper element with the tldraw__editor class, and the stylesheet import tldraw/tldraw.css. For interactive buttons, it dictates using the TopPanel slot alongside TldrawUiButton and the useEditor hook. Code notes follow a footnote pattern with numbered markers and detailed explanations at the bottom.
These rules depend strictly on tldraw's internal repository structure: applying them outside apps/examples will produce invalid import paths and broken metadata tags.
What it helps with
- scaffold a new tldraw SDK example matching repository conventions
- populate frontmatter fields with valid categories and search keywords
- build control panels using the TopPanel slot and TldrawUiButton
- document complex code patterns using numbered footnote comments
Example prompts for the agent
- Create an editor API demonstration with zoom controls inside
apps/examples/src/examples/zoom-controls. - Generate the
README.mdand component boilerplate for a new custom shape example inuse-cases.
How to install write-example
1Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a claude-code2Manually: put the files in place
~/.claude/skills/write-example/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/write-example/
1Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a codex2Manually: put the files in place
.agents/skills/write-example/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a cursor2Manually: put the files in place
.cursor/skills/write-example/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install tldraw/tldraw write-example2Manually: put the files in place
.github/skills/write-example/SKILL.md1Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a gemini-cli2Platform CLI
gemini skills install https://github.com/tldraw/tldraw --path skills/write-exampleManually: put the files in place
.devin/skills/write-example/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about write-example
How to install write-example in Claude Code?
Run npx skills add tldraw/tldraw --skill write-example -a claude-code in your terminal. This registers the skill at ~/.claude/skills/write-example/SKILL.md.
What does write-example do?
It provides coding guidelines for writing tldraw documentation demos. The agent follows exact naming rules, styling conventions, and frontmatter properties to integrate cleanly with the examples app.
What frontmatter categories does this skill allow?
Accepted categories are getting-started, configuration, editor-api, ui, layout, events, shapes/tools, collaboration, data/assets, and use-cases.
