Web Artifacts Builder

Genera una vera app React Vite + shadcn/ui e la raggruppa in un unico artefatto HTML portatile.

Promosso ★ 8.8/10

Cosa fa

Strumenti di build per artefatti claude.ai che superano un singolo file JSX: uno script di inizializzazione genera un progetto Vite+TypeScript+Tailwind precaricato con oltre 40 componenti shadcn/ui reali da un tarball in bundle, quindi uno script di bundle compila e inietta tutto (Parcel + html-inline) in un unico bundle.html autonomo. Esplicitamente mirato ad artefatti complessi, con stato e multi-componente — non semplici HTML/JSX a file singolo.

Rapporto di test

Il suo script di inizializzazione scarica un vero tarball shadcn/ui da 40 componenti (verificato: scarica pulito a 19.9KB) e guida una build Vite+Parcel genuina in un singolo file HTML offline — veri componenti basati su Radix, non imitazioni Tailwind approssimate a mano che un artefatto di base produrrebbe.

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

Installazione

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

Comandi e prompt di esempio

/web-artifacts-builderGenera una vera app React Vite + shadcn/ui e la raggruppa in un unico artefatto HTML portatile.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →