Web Artifacts Builder

Tworzy szkielet prawdziwej aplikacji React z Vite + shadcn/ui i pakuje ją w jeden przenośny artefakt HTML.

Autor: ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Testowano · Działa ★ 8.8/10

Web Artifacts Builder — Tworzy szkielet prawdziwej aplikacji React z Vite + shadcn/ui i pakuje ją w jeden przenośny artefakt HTML.

Co robi ten skill

Narzędzia do budowania artefaktów claude.ai, które wykraczają poza pojedynczy plik JSX: skrypt inicjujący tworzy szkielet projektu Vite+TypeScript+Tailwind wstępnie załadowanego ponad 40 prawdziwymi komponentami shadcn/ui z dołączonego tarballa, następnie skrypt pakujący kompiluje i wbudowuje wszystko (Parcel + html-inline) w jeden samodzielny plik bundle.html. Wyraźnie ograniczone do złożonych, stanowych, wielokomponentowych artefaktów — nie prostych jednoplikowych HTML/JSX.

Raport z testu

Jego skrypt inicjujący pobiera prawdziwy tarball shadcn/ui z 40 komponentami (zweryfikowano: pobiera się czysto, 19.9KB) i napędza prawdziwą kompilację Vite+Parcel do pojedynczego pliku HTML offline — prawdziwe komponenty oparte na Radix, a nie ręcznie przybliżone imitacje Tailwind, które wygenerowałby podstawowy artefakt.

Testowano: 2026-07-13 · Claude Code 2.x (agent harness)

Instalacja

git clone https://github.com/ThinkInAIXYZ/deepchat
cd deepchat
mkdir -p ~/.claude/skills
cp -r resources/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

Komendy i przykładowe prompty

/web-artifacts-builderTworzy szkielet prawdziwej aplikacji React z Vite + shadcn/ui i pakuje ją w jeden przenośny artefakt HTML.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

Build a multi-component React app with shadcn and bundle it into one HTML file
This artifact needs real state management, scaffold a Vite React project for it
Turn this stateful dashboard prototype into a single portable HTML artifact

Pełny raport →