Навыки web-artifacts-builder
📦

web-artifacts-builder

Низкий риск ⚡ Содержит скрипты📁 Доступ к файловой системе⚙️ Внешние команды

Создание React-артефактов с компонентами shadcn/ui

Также доступно от: davila7,Azeem-2,anthropics

Создание многокомпонентных React-артефактов для диалогов с Claude требует сложной настройки сборки и конфигурации. Этот навык автоматизирует настройку проекта с React 18, TypeScript, Tailwind CSS и 40+ компонентами shadcn/ui, затем упаковывает всё в единый HTML-файл.

Поддерживает: Claude Codex Code(CC)
🥉 73 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «web-artifacts-builder». Инициализировать проект под названием "task-board" с макетом канбан-доски

Ожидаемый результат:

Проект 'task-board' успешно создан с React 18, TypeScript, Vite, Tailwind CSS 3.4.1 и 40+ компонентами shadcn/ui. Алиасы путей (@/) настроены. Запустите 'cd task-board && pnpm dev' для запуска сервера разработки.

Использование «web-artifacts-builder». Упаковать текущий React-проект в единый HTML-артефакт

Ожидаемый результат:

Сборка завершена! Вывод: bundle.html (487 КБ). Весь JavaScript, CSS и ресурсы инлайнены. Откройте bundle.html в браузере для предпросмотра или поделитесь напрямую в диалогах с Claude.

Аудит безопасности

Низкий риск
v1 • 2/24/2026

Static analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.

3
Просканировано файлов
451
Проанализировано строк
5
находки
1
Всего аудитов
Проблемы низкого риска (2)
scripts/bundle-artifact.sh:1-54scripts/init-artifact.sh:1-323
Shell Script Execution
Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.
scripts/init-artifact.sh:228-251
Filesystem Modification
Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

Факторы риска

⚡ Содержит скрипты (1)
scripts/init-artifact.sh:93
📁 Доступ к файловой системе (1)
scripts/init-artifact.sh:230-250
⚙️ Внешние команды (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
Проверено: claude

Оценка качества

45
Архитектура
100
Сопровождаемость
87
Контент
50
Сообщество
86
Безопасность
91
Соответствие спецификации

Что вы можете построить

Интерактивные компоненты дашборда

Создание сложных дашбордов визуализации данных с множеством компонентов shadcn/ui, таких как таблицы, карточки, графики и фильтры, которые работают прямо в диалогах с Claude.

Многошаговые формы

Создание сложных потоков форм с валидацией, управлением состоянием и UI-компонентами, такими как диалоги, вкладки и аккордеоны, для пользовательского онбординга.

Демонстрация дизайн-систем

Генерация комплексных библиотек компонентов, демонстрирующих темизацию shadcn/ui, поддержку тёмного режима и адаптивные макеты для дизайн-документации.

Попробуйте эти промпты

Быстрый старт — инициализация проекта 
Инициализируй новый веб-арт-проект под названием "dashboard-demo" со всеми настроенными компонентами shadcn/ui.
Таблица данных с фильтрами 
Создай дашборд управления клиентами с таблицей данных, отображающей имя, email и статус. Добавь элементы управления фильтрами с помощью компонентов select и input. Включи пагинацию и действия со строками через выпадающее меню.
Многошаговая форма с валидацией 
Построй 3-шаговую форму регистрации, используя компоненты form, input, select и button. Используй react-hook-form с валидацией zod. Шаг 1 собирает личную информацию, Шаг 2 обрабатывает предпочтения, Шаг 3 показывает подтверждение. Включи индикатор прогресса.
Дашборд аналитики с тёмным режимом 
Создай дашборд аналитики с переключателем тёмного режима, используя next-themes. Включи карточки метрик, плейсхолдер линейного графика, таблицу недавней активности и диалог настроек. Используй компоненты card, table, dialog, button и switch с правильной темизацией shadcn/ui.

Лучшие практики

  • Всегда запускайте init-artifact.sh перед началом разработки, чтобы убедиться, что все зависимости и конфигурации правильно настроены
  • Используйте предоставленные алиасы путей (@/components, @/lib) для более чистых импортов, соответствующих соглашениям shadcn/ui
  • Запускайте bundle-artifact.sh только после завершения разработки, чтобы минимизировать время сборки и размер вывода

Избегать

  • Не используйте этот навык для простых однофайловых React-сниппетов — он предназначен для многокомпонентных приложений
  • Избегайте изменения скриптов сборки, если вы не понимаете конфигурацию сборки Parcel и разрешение алиасов путей
  • Не коммитьте bundle.html в систему контроля версий — генерируйте его заново для каждой сессии обмена артефактами

Часто задаваемые вопросы

В чём разница между этим навыком и простой генерацией React-артефактов?
Этот навык создаёт полноценные многокомпонентные React-приложения с правильным инструментарием сборки, в то время как простые артефакты — это однофайловые JSX-сниппеты. Используйте это для сложных UI, требующих управления состоянием, маршрутизации или множества компонентов shadcn/ui.
Могу ли я использовать npm или yarn вместо pnpm?
Скрипты написаны для pnpm. Вы можете вручную адаптировать команды для npm или yarn, но pnpm рекомендуется для совместимости с предоставленными скриптами и более быстрой установки зависимостей.
Почему bundled HTML-файл такой большой?
Bundle включает всю библиотеку React, все компоненты shadcn/ui и Tailwind CSS, инлайнённые в единый файл. Этот компромисс позволяет делиться как самодостаточным артефактом без внешних зависимостей.
Могу ли я добавить кастомные компоненты shadcn/ui после инициализации?
Да. Конфигурация components.json настроена для shadcn/ui CLI. Запустите 'pnpm dlx shadcn-ui@latest add <component>' для добавления дополнительных компонентов в ваш проект.
Работает ли этот навык с режимом workspace в Claude Code?
Да. Скрипты работают в текущей директории проекта. При использовании Claude Code убедитесь, что вы запускаете команды из корня проекта артефакта, где находится package.json.
Как настроить тему Tailwind сверх стандартных цветов shadcn?
Отредактируйте tailwind.config.js для добавления кастомных цветов, шрифтов или расширения темы. Конфиг предварительно настроен с CSS-переменными shadcn, которые вы можете изменять или расширять.

Сведения для разработчиков

Автор

ZhanlinCui

Лицензия

Complete terms in LICENSE.txt

Репозиторий

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

Ссылка

main

Структура файлов

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md