qvib.pro
EN

web-artifacts-builder

Для чего: собирать сложные React-артефакты claude.ai в один HTML (TS + Tailwind + shadcn).

open-source бесплатно профи

Официальный скил Anthropic (anthropics/skills) проверено 2026-06-01

$ /plugin install example-skills@anthropic-agent-skills

Открыть источник ↗

Что делает

Набор инструментов для сложных многокомпонентных HTML-артефактов claude.ai на современном фронтенд-стеке: React 18 + TypeScript + Tailwind CSS + shadcn/ui, Vite как dev-сервер, сборка через Parcel. Воркфлоу: инициализировать проект → разработать компоненты → собрать всё в один HTML-файл с инлайн-ассетами → отдать пользователю. Для проектов со стейтом/роутингом/библиотекой компонентов, где простого статичного HTML мало.

Как поставить

Входит в набор example-skills:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Или папкой web-artifacts-builder/ в ~/.claude/skills/.

Когда брать

  • Нужен интерактивный артефакт (дашборд, калькулятор, мини-приложение) с компонентами и состоянием.
  • Хочешь современный React/TS/Tailwind-стек, но получить один самодостаточный HTML.

Пример

«Собери интерактивный дашборд с фильтрами и графиками как артефакт» — навык разведёт компоненты на React+shadcn и склеит в один HTML с инлайн-ассетами.