Web Artifacts Builder

Stillaser en ekte Vite + shadcn/ui React-app og pakker den inn i ett bærbart HTML-artefakt.

av ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Bestått ★ 8.8/10

Web Artifacts Builder — Stillaser en ekte Vite + shadcn/ui React-app og pakker den inn i ett bærbart HTML-artefakt.

Hva den gjør

Byggeverktøy for claude.ai-artefakter som vokser ut av en enkelt JSX-fil: et init-skript stillaser et Vite+TypeScript+Tailwind-prosjekt forhåndslastet med 40+ ekte shadcn/ui-komponenter fra en pakket tarball, deretter kompilerer og inliner et bundle-skript alt (Parcel + html-inline) til en selvstendig bundle.html. Uttrykkelig avgrenset til komplekse, tilstandsfulle, flerkomponent-artefakter — ikke enkle enkeltfils HTML/JSX.

Testrapport

Dets init-skript trekker en ekte 40-komponent shadcn/ui tarball (verifisert: lastes ned rent på 19.9KB) og driver en ekte Vite+Parcel-bygging til en enkelt offline HTML-fil — ekte Radix-støttede komponenter, ikke hånd-approksimerte Tailwind-etterligninger et grunnleggende artefakt ville produsert.

Testet på: 2026-07-13 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /web-artifacts-builderStillaser en ekte Vite + shadcn/ui React-app og pakker den inn i ett bærbart HTML-artefakt.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • 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