Web Artifacts Builder

Scaffoldt een echte Vite + shadcn/ui React-app en bundelt deze tot één draagbaar HTML-artefact.

Door ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Getest · Werkt ★ 8.8/10

Web Artifacts Builder — Scaffoldt een echte Vite + shadcn/ui React-app en bundelt deze tot één draagbaar HTML-artefact.

Wat het doet

Build tooling voor claude.ai artefacten die een enkel JSX-bestand ontgroeien: een init script scaffoldt een Vite+TypeScript+Tailwind project, vooraf geladen met 40+ echte shadcn/ui componenten uit een gebundelde tarball, waarna een bundle script alles compileert en inlijnt (Parcel + html-inline) tot één zelfstandige bundle.html. Expliciet gericht op complexe, stateful, multi-component artefacten — niet op eenvoudige single-file HTML/JSX.

Testrapport

Het init script haalt een echte 40-componenten shadcn/ui tarball op (geverifieerd: downloadt schoon op 19.9KB) en stuurt een echte Vite+Parcel build naar één offline HTML-bestand — echte Radix-ondersteunde componenten, geen handmatig benaderde Tailwind look-alikes die een basisartefact zou produceren.

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

Installatie

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

Commando's en voorbeeldprompts

/web-artifacts-builderScaffoldt een echte Vite + shadcn/ui React-app en bundelt deze tot één draagbaar HTML-artefact.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →