iiuniversitet.ruЦентр обучения нейросетямОткрыть каталог

Сложные веб-артефакты на React

Собирает многоэкранные интерактивные веб-страницы на React, Tailwind и shadcn/ui в один файл-артефакт для Claude.

СкиллAnthropicClaudeApache-2.0Нужен терминалПроверка не требуется
Скачать на русскомОригинал на английском (архив)Источник ↗
Что делает
Собирает многоэкранные интерактивные веб-страницы на React, Tailwind и shadcn/ui в один файл-артефакт для Claude.
Когда брать
Когда нужен сложный интерактивный интерфейс с состоянием, переходами между экранами или готовыми компонентами shadcn/ui.
Когда не брать
Если нужна простая одностраничная HTML- или JSX-страница.
Пример запроса
Собери интерактивный калькулятор стоимости проекта с несколькими шагами и красивыми компонентами.
Нужно подключить
терминал, Node.js
Работает лучше с
Playwright

Как включить

  1. Скачайте архив и распакуйте его.
  2. Положите папку web-artifacts-builder в ~/.claude/skills/.
  3. Откройте Claude Code и опишите задачу своими словами: Claude подхватит скилл по описанию.

Текст

---
name: web-artifacts-builder
description: Набор инструментов для создания сложных многокомпонентных HTML-артефактов claude.ai на современных фронтенд-технологиях (React, Tailwind CSS, shadcn/ui). Используй для сложных артефактов, которым нужны управление состоянием, маршрутизация или компоненты shadcn/ui; для простых одно-файловых HTML/JSX-артефактов не подходит.
license: Complete terms in LICENSE.txt
---

Web Artifacts Builder

Чтобы собрать мощные фронтенд-артефакты claude.ai, выполни такие шаги:

  1. Создай заготовку фронтенд-репозитория скриптом scripts/init-artifact.sh
  2. Разработай артефакт, редактируя сгенерированный код
  3. Собери весь код в один HTML-файл скриптом scripts/bundle-artifact.sh
  4. Покажи артефакт пользователю
  5. (По желанию) Протестируй артефакт

Стек: React 18 + TypeScript + Vite + Parcel (сборка) + Tailwind CSS + shadcn/ui

Правила дизайна и оформления

ОЧЕНЬ ВАЖНО: чтобы не получить то, что часто называют «ИИ-халтурой» (AI slop), не злоупотребляй выравниванием по центру, фиолетовыми градиентами, одинаковыми скруглёнными углами и шрифтом Inter.

Быстрый старт

Шаг 1: Создай проект

Запусти скрипт инициализации, чтобы создать новый React-проект:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Получится полностью настроенный проект, в котором есть:

  • ✅ React + TypeScript (через Vite)
  • ✅ Tailwind CSS 3.4.1 с системой тем shadcn/ui
  • ✅ Настроенные псевдонимы путей (@/)
  • ✅ Более 40 предустановленных компонентов shadcn/ui
  • ✅ Все зависимости Radix UI
  • ✅ Parcel, настроенный для сборки (через .parcelrc)
  • ✅ Совместимость с Node 18+ (версия Vite определяется и закрепляется автоматически)

Шаг 2: Разработай артефакт

Чтобы собрать артефакт, редактируй сгенерированные файлы. Подсказки смотри ниже в разделе Типичные задачи разработки.

Шаг 3: Собери всё в один HTML-файл

Чтобы собрать React-приложение в один HTML-артефакт:

bash scripts/bundle-artifact.sh

Скрипт создаёт bundle.html — самодостаточный артефакт, в который встроены весь JavaScript, CSS и зависимости. Этот файл можно сразу показывать в диалогах Claude как артефакт.

Требования: в корневой папке проекта должен быть index.html.

Что делает скрипт:

  • Устанавливает зависимости для сборки (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Создаёт конфигурацию .parcelrc с поддержкой псевдонимов путей
  • Собирает проект через Parcel (без карт кода)
  • Встраивает все ресурсы в один HTML-файл через html-inline

Шаг 4: Покажи артефакт пользователю

В конце отправь собранный HTML-файл пользователю в диалоге, чтобы он увидел его как артефакт.

Шаг 5: Тестирование и просмотр артефакта (по желанию)

Примечание: этот шаг полностью необязателен. Выполняй его только при необходимости или по просьбе пользователя.

Чтобы протестировать или посмотреть артефакт, используй доступные инструменты (в том числе другие скиллы и встроенные средства вроде Playwright или Puppeteer). В целом не тестируй артефакт заранее: это увеличивает задержку между запросом и моментом, когда пользователь увидит готовый результат. Тестируй позже, уже после показа артефакта, если пользователь попросит или возникнут проблемы.

Справочные материалы

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder, лицензия Apache-2.0. Изменения: перевод на русский язык.

Оригинал на английском 
---
name: web-artifacts-builder
description: 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.
license: Complete terms in LICENSE.txt
---

# Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact

**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

## Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

## Quick Start

### Step 1: Initialize Project

Run the initialization script to create a new React project:
```bash
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```

This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (`@/`) configured
- ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)

### Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.

### Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:
```bash
bash scripts/bundle-artifact.sh
```

This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

**Requirements**: Your project must have an `index.html` in the root directory.

**What the script does**:
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Creates `.parcelrc` config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline

### Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

### Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

## Reference

- **shadcn/ui components**: https://ui.shadcn.com/docs/components

Источник: anthropics/skills / web-artifacts-builder ↗. Ссылка проверена 2026-10-10.

Похожие