Web Artifacts Builder (Anthropic)

Что умеет навык

web-artifacts-builder описывает, как собрать многокомпонентный артефакт для claude.ai на современном фронтенд-стеке: React 18, TypeScript, Vite, Parcel для сборки, Tailwind CSS и shadcn/ui. Процесс состоит из шагов: скрипт scripts/init-artifact.sh <имя-проекта> создаёт проект, агент пишет код, scripts/bundle-artifact.sh собирает всё в один файл bundle.html, и результат показывается пользователю.

Начальный проект уже настроен: Tailwind CSS 3.4.1 с темами shadcn/ui, псевдонимы путей @/, более 40 предустановленных компонентов shadcn/ui со всеми зависимостями Radix UI, конфигурация Parcel и автоопределение версии Vite под Node 18 и новее. При сборке скрипт доустанавливает parcel и html-inline, строит проект без карт кода и вставляет скрипты, стили и ресурсы прямо в HTML.

Когда использовать

Навык предназначен для сложных артефактов: со состоянием, маршрутизацией или компонентами shadcn/ui. Для простых одностраничных HTML или JSX-артефактов он избыточен. Тестирование артефакта необязательное: его делают позже, по запросу или при проблемах, чтобы не задерживать показ готового результата. Для проверки можно использовать другие навыки или инструменты вроде Playwright и Puppeteer.

В SKILL.md отдельно подчёркнуто, как не получить «ИИ-мусор» в дизайне: избегать избыточных центрированных макетов, фиолетовых градиентов, одинаково скруглённых углов и шрифта Inter.

Ограничения и безопасность

В корне проекта должен лежать index.html, иначе скрипт сборки не сработает. Скрипты запускаются на вашей машине через bash и устанавливают npm-пакеты (для сборки это parcel, html-inline и другие), поэтому нужны Node.js и доступ к сети. Результат собирается в один HTML-файл, который можно прикрепить в разговоре как артефакт.

Справочные ссылки в навыке ограничены документацией по компонентам shadcn/ui. Навык не размещает приложение в интернете: он готовит файл. Лицензия: в папке навыка лежит файл LICENSE.txt с Apache 2.0.

Claude Code

Зарегистрируйте репозиторий как маркетплейс плагинов, выполнив в Claude Code:

/plugin marketplace add anthropics/skills

Затем установите набор примеров (в нём web-artifacts-builder, skill-creator, webapp-testing и другие):

/plugin install example-skills@anthropic-agent-skills

Установить можно и через меню: Browse and install plugins, затем anthropic-agent-skills, затем example-skills и Install now.

После установки навык срабатывает по упоминанию в запросе.

Claude.ai и Claude API

README репозитория сообщает, что эти примеры навыков уже доступны в Claude.ai на платных тарифах. Пользовательские навыки загружают по инструкции «Using skills in Claude» из справки Anthropic. Через API работают предустановленные и загружаемые навыки, подробности в разделе Skills API Quickstart документации Claude.