Web Artifacts Builder

Gerüstet eine echte Vite + shadcn/ui React-App und bündelt sie zu einem portablen HTML-Artefakt.

von ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Getestet · Funktioniert ★ 8.8/10

Web Artifacts Builder — Gerüstet eine echte Vite + shadcn/ui React-App und bündelt sie zu einem portablen HTML-Artefakt.

Was es kann

Build-Tools für claude.ai-Artefakte, die über eine einzelne JSX-Datei hinausgehen: Ein Init-Skript gerüstet ein Vite+TypeScript+Tailwind-Projekt, vorab geladen mit über 40 echten shadcn/ui-Komponenten aus einem gebündelten Tarball, dann kompiliert und inlined ein Bundle-Skript alles (Parcel + html-inline) in eine eigenständige bundle.html. Explizit auf komplexe, zustandsbehaftete, Multi-Komponenten-Artefakte zugeschnitten – nicht auf einfache Single-File-HTML/JSX.

Testbericht

Sein Init-Skript zieht einen echten 40-Komponenten-shadcn/ui-Tarball (verifiziert: sauberer Download bei 19,9 KB) und treibt einen echten Vite+Parcel-Build in eine einzelne Offline-HTML-Datei – echte Radix-basierte Komponenten, keine handapproximierten Tailwind-Look-alikes, die ein Basis-Artefakt produzieren würde.

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

Installation

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

Befehle & Beispiel-Prompts

/web-artifacts-builderGerüstet eine echte Vite + shadcn/ui React-App und bündelt sie zu einem portablen HTML-Artefakt.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →