artifacts-builder — скилл для Claude Code: что делает и как установить
Скилл помогает создавать сложные многокомпонентные HTML-артефакты для claude.ai. В работе опирается на React и Tailwind CSS с библиотекой shadcn/ui.
npx skills add nexu-io/open-design --skill artifacts-builder -a claude-codeЧто делает artifacts-builder
Скилл добавляет в окружение агента инструкции для сборки интерактивных веб-артефактов. Он ориентирован на связку React и Tailwind CSS с компонентами shadcn/ui. Агент использует эту запись при планировании, когда требуется сгенерировать интерфейс со сложной компонентной структурой.
Запись взята из репозитория ComposioHQ awesome-claude-skills и помечена как прототип. Входной манифест только объявляет скилл для поиска агентом. Если для работы понадобятся оригинальные вспомогательные скрипты upstream-проекта, их придётся загрузить отдельно. Это повод проверить готовность окружения перед запуском генерации.
Какие задачи решает
- создать многокомпонентный прототип интерфейса для claude.ai
- подготовить интерактивный веб-артефакт на React и Tailwind CSS
- встроить готовые компоненты shadcn/ui в генерируемый макет
Примеры запросов агенту
- Собери многокомпонентный артефакт интерфейса на React.
- Используй artifacts-builder для вёрстки панели на Tailwind CSS и shadcn/ui.
- Подготовь интерактивный html artifact для claude.ai.
Как установить artifacts-builder
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code2Вручную: положить файлы
~/.claude/skills/artifacts-builder/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/artifacts-builder/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill artifacts-builder -a codex2Вручную: положить файлы
.agents/skills/artifacts-builder/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill artifacts-builder -a cursor2Вручную: положить файлы
.cursor/skills/artifacts-builder/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design artifacts-builder2Вручную: положить файлы
.github/skills/artifacts-builder/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill artifacts-builder -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/artifacts-builderВручную: положить файлы
.devin/skills/artifacts-builder/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill artifacts-builder -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Похожие
Вопросы о artifacts-builder
Как установить artifacts-builder в Claude Code?
Выполните команду npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code. Также можно вручную сохранить файл манифеста по пути ~/.claude/skills/artifacts-builder/SKILL.md.
Что делает artifacts-builder?
Скилл настраивает агента на генерацию сложных HTML-артефактов для claude.ai с использованием стека React, Tailwind CSS и shadcn/ui.
Где взять оригинальные скрипты из upstream-репозитория?
Манифест скилла взят из проекта ComposioHQ awesome-claude-skills. Для запуска полного процесса исходники и скрипты нужно загрузить из оригинального репозитория по внешней ссылке.
Исходный текст
SKILL.md · Apache-2.0
--- name: artifacts-builder description: | Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). triggers: - "artifacts builder" - "html artifact" - "multi component artifact" - "react artifact" od: mode: prototype category: web-artifacts upstream: "https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder" --- # artifacts-builder > Curated from ComposioHQ awesome-claude-skills. ## What it does Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). ## Source - Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/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/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder ``` Then ask the agent to invoke this skill by name (`artifacts-builder`) or with one of the trigger phrases listed in this skill's frontmatter.
© nexu-io · Apache-2.0 · nexu-io/open-design