AIKraft/AI/Войти
AIKraft/Skills/artifacts-builder

artifacts-builder

Набор инструментов для создания сложных многокомпонентных HTML-артефактов в claude.ai с использованием React, Tailwind CSS и shadcn/ui. Подходит для проектов, требующих управления состоянием, маршрутизации или использования компонентов shadcn/ui.

COComposio official Разработка ★ 76.5k

Что делает навык

Набор инструментов для создания сложных многокомпонентных HTML-артефактов в claude.ai с использованием React, Tailwind CSS и shadcn/ui. Позволяет генерировать самодостаточные HTML-файлы, содержащие весь код и зависимости, готовые к просмотру.

Когда применять

  • Разработка интерактивных интерфейсов с управлением состоянием и маршрутизацией
  • Создание прототипов UI с использованием более чем 40 компонентов shadcn/ui
  • Генерация самодостаточных HTML-файлов для демонстрации в диалогах с пользователем
  • Проектирование сложных фронтенд-приложений с использованием TypeScript и Vite

Как работает

  1. Запустить скрипт инициализации проекта командой bash scripts/init-artifact.sh <project-name> и перейти в созданную директорию
  2. Разработать артефакт, редактируя сгенерированные файлы проекта (React + TypeScript)
  3. Запустить скрипт сборки командой bash scripts/bundle-artifact.sh для создания самодостаточного файла bundle.html
  4. Предоставить полученный файл bundle.html пользователю для просмотра в качестве артефакта
  5. При необходимости выполнить тестирование артефакта с помощью инструментов вроде Playwright или Puppeteer после демонстрации

Примеры запросов агенту

Создай интерактивную панель управления с использованием shadcn/ui компонентов
Разработай форму регистрации с валидацией полей в виде HTML-артефакта
Сгенерируй дашборд с графиками и таблицами данных для демонстрации в чате

Что понадобится

  • Node 18+
  • Наличие index.html в корневой директории проекта
  • Скрипты init-artifact.sh и bundle-artifact.sh

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «composiohq-artifacts-builder» из репозитория: # https://github.com/composiohq/awesome-claude-skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r composiohq-artifacts-builder/ ~/.claude/skills/composiohq-artifacts-builder/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.