write-example — скилл для Claude Code: что делает и как установить
Задаёт правила создания демо-примеров в SDK tldraw: файловую структуру, разметку README.md и каркас компонентов на React.
npx skills add tldraw/tldraw --skill write-example -a claude-codeЧто делает write-example
Скилл инструктирует агента по созданию минимальных демонстраций возможностей SDK внутри apps/examples/src/examples. Для каждого примера создаётся отдельная папка в kebab-case с тремя файлами: метаданными в README.md, кодом на React и отдельным стилевым файлом .css. Заголовок пишется строго в sentence case, а файл компонента получает имя в PascalCase с суффиксом Example.
В коде примера обязателен экспорт по умолчанию, обёртка с классом tldraw__editor и подключение tldraw/tldraw.css. Если нужны кнопки взаимодействия, скилл направляет разметку в слот TopPanel через компонент TldrawUiButton и хук useEditor. Пояснения к коду оформляются нумерованными сносками внизу файла, чтобы не перегружать саму реализацию.
Инструкции жёстко привязаны к структуре репозитория tldraw: вне каталога apps/examples соглашения и пути импорта стилей окажутся бесполезными.
Какие задачи решает
- оформить демо-пример в apps/examples по стандартам tldraw
- разметить метаданные frontmatter для каталога примеров
- встроить кнопки управления через слот TopPanel и хук useEditor
- оформить пояснения к исходникам через нумерованные сноски
Примеры запросов агенту
- Сделай заготовку примера для категории editor-api с кнопками изменения масштаба в TopPanel.
- Создай папку примера
apps/examples/src/examples/custom-shapeс файломREADME.mdи компонентомCustomShapeExample.tsx.
Как установить write-example
1Через Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a claude-code2Вручную: положить файлы
~/.claude/skills/write-example/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/write-example/
1Через Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a codex2Вручную: положить файлы
.agents/skills/write-example/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a cursor2Вручную: положить файлы
.cursor/skills/write-example/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install tldraw/tldraw write-example2Вручную: положить файлы
.github/skills/write-example/SKILL.md1Через Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a gemini-cli2Командой платформы
gemini skills install https://github.com/tldraw/tldraw --path skills/write-exampleВручную: положить файлы
.devin/skills/write-example/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add tldraw/tldraw --skill write-example -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о write-example
Как установить write-example в Claude Code?
Выполните в терминале команду npx skills add tldraw/tldraw --skill write-example -a claude-code. Конфигурация запишется в ~/.claude/skills/write-example/SKILL.md.
Что делает скилл write-example?
Он задаёт агенту шаблоны и правила написания демонстрационных приложений tldraw. Это гарантирует верные имена файлов, единый формат frontmatter и корректный импорт стилей.
Какие категории можно использовать в frontmatter примера?
Список ограничен: getting-started, configuration, editor-api, ui, layout, events, shapes/tools, collaboration, data/assets и use-cases.
