structured-artifact — скилл для Claude Code: HTML-артефакты
Скилл для сборки структурированных HTML-артефактов: помогает агенту решить, как подать материал, и только потом выбрать инструменты.
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-codeЧто делает structured-artifact
Скилл включается, когда агент делает HTML-артефакт для объяснения или презентации материала. Сначала он разбирается, как показать содержимое, и лишь затем берётся за реализацию. Текст, визуальные блоки и интерактив идут в дело там, где каждый из них помогает читателю понять, а не для украшения.
Внутри — опора на скилл /information-hierarchy: если он ещё не загружен, structured-artifact подтянет его и будет следовать его правилам. Дальше по ходу сборки агент читает ресурсы: resources/delivery.md для самой подачи, resources/diagrams.md когда нужно показать связи или потоки, resources/images-and-mockups.md если картинки встраиваются, подписываются или сравниваются.
Практический момент: без загруженного /information-hierarchy скилл работать не станет, потому что он на него опирается. Это повод проверить, что оба скилла стоят в проекте, а не только structured-artifact.
Какие задачи решает
- собрать HTML-страницу, которая объясняет материал, а не просто его пересказывает
- показать связи между сущностями схемой вместо абзаца текста
- встроить картинку или мокап и подписать его по месту
- выбрать между текстом, визуалом и интерактивом до начала вёрстки
- разложить материал по уровням, чтобы читатель шёл от общего к частному
Примеры запросов агенту
- сделай HTML-артефакт, который объясняет, как устроен этот пайплайн
- собери страницу с диаграммой потоков данных и пояснениями
- встрой скриншот мокапа и подпиши, что на нём меняется
Как установить structured-artifact
1Через Skills CLI (Vercel)
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code2Вручную: положить файлы
~/.claude/skills/structured-artifact/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/structured-artifact/
1Через Skills CLI (Vercel)
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a codex2Вручную: положить файлы
.agents/skills/structured-artifact/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a cursor2Вручную: положить файлы
.cursor/skills/structured-artifact/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install haowjy/creative-writing-skills structured-artifact2Вручную: положить файлы
.github/skills/structured-artifact/SKILL.md1Через Skills CLI (Vercel)
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a gemini-cli2Командой платформы
gemini skills install https://github.com/haowjy/creative-writing-skills --path cw/skills/structured-artifactВручную: положить файлы
.devin/skills/structured-artifact/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add haowjy/creative-writing-skills --skill structured-artifact -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о structured-artifact
Как установить structured-artifact в Claude?
Выполните npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code. После этого файл скилла лежит в ~/.claude/skills/structured-artifact/SKILL.md.
Что делает structured-artifact?
Помогает агенту собрать структурированный HTML-артефакт для объяснения и подачи информации: сначала решается, как показать содержимое, потом выбираются инструменты.
Что нужно, чтобы скилл заработал?
Он опирается на скилл /information-hierarchy и загружает его, если тот ещё не подключён. По ходу сборки читаются ресурсы resources/delivery.md, resources/diagrams.md и resources/images-and-mockups.md.
Исходный текст
SKILL.md · Apache-2.0
--- name: structured-artifact description: | Load when creating structured HTML artifacts to explain and present information. --- # Structured Artifact Create structured artifacts for explaining and presenting information. Load `/information-hierarchy` if it isn't already loaded, and follow it. Use text, visuals, and interaction where each helps the reader understand. Decide how to present the content before choosing implementation tools. Read [delivery](resources/delivery.md) when building the artifact. Read [diagrams](resources/diagrams.md) when showing relationships or flows, and [images and mockups](resources/images-and-mockups.md) when embedding, annotating, or comparing them.
© haowjy · Apache-2.0 · haowjy/creative-writing-skills
