web-artifacts-builder · nexu-io — скилл для Claude Code: сборка артефактов
Собирает HTML-артефакты для claude.ai с React и Tailwind — референсный workflow от Anthropic для встраиваемых интерфейсов.
npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-codeЧто делает web-artifacts-builder
Скилл берёт на себя создание сложных HTML-артефактов с React-компонентами и Tailwind-стилями под формат claude.ai. Внутри — референсный workflow от Anthropic, который показывает, как строить интерактивные встраиваемые интерфейсы.
Каталожная запись в OpenDesign помогает агенту найти скилл на этапе планирования. Полный upstream-workflow с исходными скриптами и ресурсами живёт в репозитории Anthropic — если нужны все шаги и ассеты, ставить надо оттуда.
Агент реагирует на триггеры вроде «web artifacts», «react artifact» или «tailwind artifact». Результат — готовый артефакт, который можно встроить в claude.ai или использовать отдельно.
Какие задачи решает
- собрать HTML-артефакт для claude.ai
- создать React-компонент с Tailwind-стилями
- встроить интерактивный интерфейс в claude.ai
- следовать референсному workflow от Anthropic
Примеры запросов агенту
- собери веб-артефакт с React и Tailwind
- создай артефакт для claude.ai с интерактивной формой
- сделай react artifact с графиком и фильтрами
Как установить web-artifacts-builder
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-code2Вручную: положить файлы
~/.claude/skills/web-artifacts-builder/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-artifacts-builder/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-artifacts-builder -a codex2Вручную: положить файлы
.agents/skills/web-artifacts-builder/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-artifacts-builder -a cursor2Вручную: положить файлы
.cursor/skills/web-artifacts-builder/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design web-artifacts-builder2Вручную: положить файлы
.github/skills/web-artifacts-builder/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-artifacts-builder -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/web-artifacts-builderВручную: положить файлы
.devin/skills/web-artifacts-builder/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-artifacts-builder -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Другие версии web-artifacts-builder
Похожие
Вопросы о web-artifacts-builder
Как установить web-artifacts-builder в Claude Code?
Выполни npx skills add nexu-io/open-design --skill web-artifacts-builder -a claude-code. Скилл окажется в ~/.claude/skills/web-artifacts-builder/SKILL.md.
Что делает web-artifacts-builder?
Собирает HTML-артефакты для claude.ai с React и Tailwind — референсный workflow от Anthropic, который показывает, как строить встраиваемые интерфейсы.
Чем каталожная запись отличается от upstream-версии?
Запись в OpenDesign помогает агенту найти скилл при планировании. Полный workflow с исходными скриптами и ассетами живёт в репозитории Anthropic — если нужна вся цепочка, ставить надо оттуда.
Исходный текст
SKILL.md · Apache-2.0
--- name: web-artifacts-builder description: | Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. triggers: - "web artifacts" - "tailwind artifact" - "react artifact" - "anthropic artifact" od: mode: prototype category: web-artifacts upstream: "https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder" --- # web-artifacts-builder > Curated from Anthropic's official skills repository. ## What it does Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. ## Source - Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder - Category: `web-artifacts` ## How to use This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder ``` Then ask the agent to invoke this skill by name (`web-artifacts-builder`) or with one of the trigger phrases listed in this skill's frontmatter.
© nexu-io · Apache-2.0 · nexu-io/open-design
