web-artifacts-builder

Web Artifacts Builder предназначен для сложных многофайловых HTML-артефактов для claude.ai, когда интерфейсу нужны состояние, маршрутизация или компоненты shadcn/ui. Источник прямо отделяет такой сценарий от простой одностраничной HTML или JSX-заготовки. Рабочий результат проходит через короткий конвейер: инициализация frontend-репозитория, разработка нескольких компонентов, сборка всех файлов в один HTML и показ готового артефакта пользователю. Для начала используется scripts/init-artifact.sh с именем проекта. Скрипт создаёт проект на React 18 и TypeScript, собираемый через Vite, Tailwind CSS 3.4.1 с системой тем shadcn/ui и настроенными path aliases. В scaffold входят более 40 компонентов shadcn/ui, зависимости Radix UI, конфигурация Parcel и совместимость с Node 18+; версия Vite подбирается с учётом окружения. Это не общий генератор сайтов, а подготовленная структура именно для артефакта, который затем должен быть упакован в автономный файл. После разработки запускается scripts/bundle-artifact.sh. Он при необходимости устанавливает bundling-зависимости, создаёт .parcelrc с поддержкой path aliases, собирает проект Parcel без source maps и использует html-inline для встраивания JavaScript, CSS и зависимостей. Итогом становится bundle.html, который содержит ресурсы внутри одного HTML и может быть передан пользователю как самостоятельный artifact. Для сборки в корне проекта должен присутствовать index.html; без него этот маршрут не соответствует контракту скрипта. Содержание навыка особенно полезно для интерфейсов с несколькими экранами, локальным состоянием, маршрутизацией и повторно используемыми UI-компонентами. Сначала нужно определить такой сложный сценарий, затем развивать созданный код и только после этого запускать упаковку. Тестирование отмечено как optional: его можно добавить, если требуется конкретная проверка или если при просмотре проявилась ошибка; предварительное тестирование не является обязательной частью минимального конвейера. Есть и явное визуальное ограничение. Чтобы результат не выглядел как шаблонный AI-generated интерфейс, источник просит избегать чрезмерно центрированных компоновок, фиолетовых градиентов, одинаковых скруглённых карточек и шрифта Inter. Это не заменяет проверку доступности или поведения, но задаёт конкретное направление для визуального решения. После bundle шага файл показывается пользователю; отдельный runtime или публикация в production в этом навыке не обещаны. Лицензионные условия для самого навыка вынесены в LICENSE.txt, поэтому их следует читать вместе с SKILL.md при распространении или изменении scaffold. README репозитория уточняет, что это набор навыков Anthropic для Claude, а не универсальная гарантия поведения любой другой среды.