Initialisiert ein Projekt mit React 18, TypeScript und Vite samt Tailwind CSS und über 40 shadcn/ui-Komponenten und bündelt anschließend alles mit Parcel und html-inline zu einer eigenständigen bundle.html für claude.ai-Artifacts. Gedacht für komplexe Artifacts mit State, Routing oder shadcn/ui.
Was es kann
Wo Web Artifacts Builder läuft und was es ergänzt, laut Dokumentation
Initialisiert ein Projekt mit scripts/init-artifact.sh
Konfiguriert React, TypeScript, Vite, Tailwind 3.4.1, Pfad-Aliase und shadcn/ui vor
Bündelt mit scripts/bundle-artifact.sh zu einer einzigen eingebetteten bundle.html
Rät von generischem KI-Einheitsdesign ab (zentrierte Layouts, violette Verläufe, Schriftart Inter)
Tests sind optional und erfolgen, nachdem das Artifact präsentiert wurde
Wann Sie es einsetzen sollten
Gut geeignet
Komplexe claude.ai-Artifacts mit Zustandsverwaltung, Routing oder shadcn/ui
Nicht geeignet für
Einfache HTML- oder JSX-Artifacts in einer einzigen Datei
So installieren Sie Web Artifacts Builder
Sie benötigen: Node 18+ (das Skript legt eine kompatible Vite-Version fest); index.html im Projektstamm zum Bündeln
Den Marketplace in Claude Code registrieren: /plugin marketplace add anthropics/skills
Das Bundle installieren, das ihn enthält: /plugin install example-skills@anthropic-agent-skills
Oder den Skill-Ordner nach ~/.claude/skills/web-artifacts-builder/ (persönlich) oder .claude/skills/web-artifacts-builder/ (Projekt) kopieren
Die Aufgabe in einem Prompt nennen; Claude lädt den Skill automatisch, wenn die Beschreibung in SKILL.md passt
Berechtigungen und Sicherheit
Worauf es zugreifen kann
Führt Shell-Skripte aus, die npm-Pakete (parcel, html-inline und weitere) installieren und Dateien bauen
Sicherheitshinweise der Maintainer
Haftungsausschluss im Anthropic-Repository: Skills werden zu Demonstrations- und Bildungszwecken bereitgestellt; das Verhalten in Claude kann abweichen
Prüfen Sie den Quellcode, bevor Sie einem Agenten Zugriff auf Zugangsdaten oder Produktivsysteme geben. Wir dokumentieren die Angaben der Maintainer; Code prüfen wir nicht.
Einschränkungen
Die Repo-README weist darauf hin, dass Skills Demonstrations- und Bildungsbeispiele sind
Das agentische Coding-Tool von Anthropic, das Ihre Codebasis liest, Dateien bearbeitet und Befehle ausführt, im Terminal, in IDEs, in der Desktop-App oder im Browser.
Kostenlos bis: Kein kostenloser Tarif: Claude Code ist in den bezahlten Claude-Abonnements (Pro, Max, Team, Enterprise) enth…
Wie installiere ich den Skill web-artifacts-builder in Claude Code?
Fügen Sie den Marketplace mit /plugin marketplace add anthropics/skills hinzu und installieren Sie das Bundle, das ihn enthält, oder kopieren Sie skills/web-artifacts-builder nach ~/.claude/skills/. Quelle
Wann verwendet Claude den Skill web-artifacts-builder?
Claude lädt ihn automatisch, wenn die Anfrage zum Feld description im Frontmatter von SKILL.md passt. Quelle
Welche Lizenz hat der Skill web-artifacts-builder?
Seine SKILL.md verweist auf LICENSE.txt, das ist die Apache License 2.0. Quelle
