Web-artifacts-builder — скилл Anthropic для артефактов на React и shadcn/ui

anthropics/skills· Проверено 13.11.2026· 193,9 тыс.на GitHub

Собирает сложные артефакты claude.ai на React, TypeScript, Tailwind CSS и shadcn/ui: агент разворачивает проект скриптом, пишет код и упаковывает всё в один bundle.html.

Как установить Web Artifacts Builder

Личные скиллы лежат в ~/.claude/skills/, проектные — в .claude/skills/ репозитория. Проверка: команда /skills в сессии, вызов по имени — /web-artifacts-builder.

# плагином, внутри Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

# или вручную
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/web-artifacts-builder
mkdir -p ~/.claude/skills/web-artifacts-builder
cp -r /tmp/web-artifacts-builder/skills/web-artifacts-builder/. ~/.claude/skills/web-artifacts-builder/

Общая папка ~/.agents/skills/ (в проекте — .agents/skills/) читают Codex, Cursor, VS Code Copilot, Gemini CLI, Antigravity, OpenCode, Kilo Code, Goose, Qwen Code.

git clone --depth 1 https://github.com/anthropics/skills.git /tmp/web-artifacts-builder
mkdir -p ~/.agents/skills/web-artifacts-builder
cp -r /tmp/web-artifacts-builder/skills/web-artifacts-builder/. ~/.agents/skills/web-artifacts-builder/

Установщик скиллов от Vercel, нужен Node.js 22.20 или новее. Без -g скилл ставится в текущий проект; флаг -a выбирает агента.

npx skills add anthropics/skills --skill web-artifacts-builder -a claude-code

# для всех проектов
npx skills add anthropics/skills --skill web-artifacts-builder -g

Нужен тариф Pro, Max, Team или Enterprise с включённым выполнением кода.

Скачайте папку скилла с GitHub и упакуйте её в ZIP.
claude.ai → Customize → Skills → + → Create skill → Upload a skill
Загрузите ZIP и включите скилл переключателем.

Gemini CLI ставит скиллы из git-репозитория и хранит их в ~/.gemini/skills/.

gemini skills install https://github.com/anthropics/skills.git --consent

# проверка
gemini skills list

Что умеет

Развернуть проект React 18, TypeScript и Vite с Tailwind CSS 3.4.1 и 40+ компонентами shadcn/ui одной командой

Сделать многокомпонентный артефакт с состоянием и маршрутизацией

Упаковать JavaScript, CSS и зависимости в один HTML-файл через Parcel

Проверить готовый артефакт через Playwright или Puppeteer, если вы попросите

scripts/init-artifact.sh создаёт проект через pnpm и Vite, настраивает Tailwind и алиас @/ и распаковывает компоненты shadcn/ui из архива.

scripts/bundle-artifact.sh ставит parcel и html-inline, собирает проект без source maps и встраивает всё в bundle.html.

Скилл запрещает приёмы «ИИ-слопа»: центрированные макеты, фиолетовые градиенты, одинаковые скругления и шрифт Inter.

Что нужноNode.js 18 или новее; pnpm: скрипт поставит его через npm, если его нет; Среда, где агент может запускать bash-скрипты и ставить пакеты npm

АгентыСтавится в Claude Code плагином example-skills; в claude.ai уже есть на платных планах.

Что попросить агента

Сделай артефакт-дашборд с вкладками и фильтрами по <данные>Агент развернёт проект init-artifact.sh, соберёт интерфейс на компонентах shadcn/ui и отдаст bundle.html

Собери интерактивный калькулятор <чего> с несколькими экранамиАгент сделает экраны отдельными компонентами с общим состоянием и упакует их в один файл

Проверь собранный артефакт в браузереАгент откроет bundle.html через Playwright или Puppeteer и скажет, что не работает

Ограничения

Для простого артефакта в одном файле HTML или JSX скилл избыточен: он рассчитан на сложные.

Скрипты ставят пакеты из npm и требуют Node.js 18 или новее.

Anthropic выложила скиллы репозитория для демонстрации и обучения: встроенный в Claude вариант может вести себя иначе.

Лицензия Apache 2.0.

Описание из SKILL.md

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Частые вопросы

Как сделать артефакт на React в Claude?

Для сложного артефакта поставьте web-artifacts-builder: агент развернёт проект React с shadcn/ui, напишет код и соберёт bundle.html.

Где найти скилл web-artifacts-builder на GitHub?

В репозитории anthropics/skills, папка skills/web-artifacts-builder: SKILL.md и папка scripts.

Чем web-artifacts-builder отличается от frontend-design?

frontend-design задаёт эстетику интерфейса. web-artifacts-builder даёт стек и скрипты: проект React с shadcn/ui и упаковку в один HTML для claude.ai.

Что получится на выходе?

Файл bundle.html со встроенными JavaScript, CSS и зависимостями: его можно показать в чате как артефакт.

Какие компоненты доступны?

Больше 40 компонентов shadcn/ui и все зависимости Radix UI ставятся при развёртывании проекта.

Как поставить web-artifacts-builder в Claude Code?

Добавьте маркетплейс: /plugin marketplace add anthropics/skills, затем /plugin install example-skills@anthropic-agent-skills. Плагин ставит 12 примеров Anthropic, web-artifacts-builder среди них.