Web Artifacts Builder - Claude Skill für React-Artefakte

Quelle: Inhalte adaptiert aus anthropics/skills (MIT). Zuletzt synchronisiert am 8. Juli 2026, Stand des Upstream-Updates vom 20. April 2026.

Überblick

Die offizielle Beschreibung: "Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, shadcn/ui. For complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file artifacts."

Man beachte die Abgrenzung: einfache Ein-Datei-Artefakte brauchen diesen Skill nicht. Er existiert für den Moment, in dem ein Projekt aus einem einzelnen JSX-Block herauswächst.

So funktioniert der Skill

Die SKILL.md ist eine Fünf-Schritte-Pipeline mit Design-Guidelines:

1. Initialisieren mit scripts/init-artifact.sh - ein vorkonfigurierter React + Tailwind + shadcn/ui Workspace
2. Entwickeln mit echten Komponenten, State Management und Routing
3. Bündeln in eine einzige HTML-Datei via scripts/bundle-artifact.sh
4. Teilen des Artefakts mit dem Nutzer
5. Testen/Visualisieren (optionaler Verifikationsschritt)

Ein Archiv shadcn-components.tar.gz liegt dem Skill bei, damit Komponenten ohne Netzwerkzugriff installierbar sind.

Was im Skill-Ordner steckt

• scripts/init-artifact.sh - Projekt-Scaffolding
• scripts/bundle-artifact.sh - Single-File-HTML-Bundler
• scripts/shadcn-components.tar.gz - Offline-Komponentenbibliothek
• SKILL.md, LICENSE.txt

Erkenntnisse für eigene Skills

• Ausführbare Skripte schlagen Anleitungen: statt Setup in Prosa zu beschreiben, liefert der Skill Shell-Skripte, die Claude ausführt.
• Offline-Dependencies zu bündeln (das shadcn-Archiv) macht einen Skill sandbox-tauglich - ein Detail, das den meisten Community-Skills fehlt.

Auf GitHub ansehen

skills/web-artifacts-builder