Lokalisierter Leseleitfaden

web-artifacts-builderZweck, Verwendung und Quelle

Werkzeugsammlung zur Erstellung komplexer, mehrkomponentiger claude.ai HTML-Artefakte unter Verwendung moderner Frontend-Webtechnologien (React, Tailwind CSS,shadcn/uiVerwendung für komplexe Artefakte, die Zustandsverwaltung, Routing odershadcn/uiKomponenten – nicht für einfache EinzelreihenHTML/JSXArtefakte.

Quelle abgerufen: 2026-10-29

Quell-Repository: anthropics/skills
SKILL.md: skills/web-artifacts-builder/SKILL.md
Repository-Sterne: 185,373
Repository zuletzt aktualisiert: 2026-10-29
Fähigkeitskategorien: Entwicklung
Letzte Datenerfassung: 2026-10-31 10:38 UTC+08:00

Lizenz: Lizenzdatei: Prüfung ausstehend

Original SKILL.md

Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.

Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.

Was diese Fähigkeit bewirkt

Wie der vorgelagerte Workflow funktioniert

Schritt1Projekt initialisieren

Führen Sie das Initialisierungsskript aus, um ein neues React-Projekt zu erstellen: Dadurch wird ein vollständig konfiguriertes Projekt mit folgenden Inhalten erstellt: ✅ React + TypeScript (über Vite) ✅ Tailwind CSS3.4Die1mitshadcn/uiThemensystem

Aufwärtspassage · L24 ↗

Schritt2Entwickle dein Artefakt

Um das Artefakt zu erstellen, bearbeiten Sie die generierten Dateien. Hinweise dazu finden Sie unter „Häufige Entwicklungsaufgaben“ weiter unten.

Aufwärtspassage · L41 ↗

Schritt3: Zusammenfassen zu einer einzelnen HTML-Datei

Um die React-App in ein einzelnes HTML-Artefakt zu bündeln: Dadurch wird Folgendes erstelltbundle.html- Ein in sich geschlossenes Artefakt, in dem der gesamte JavaScript-, CSS- und Abhängigkeitscode eingebettet ist. Diese Datei kann direkt in Claude-Konversationen als Artefakt geteilt werden. Voraussetzungen: Ihr Projekt muss Folgendes enthalten:index.htmlim Stammverzeichnis. Was das Skript bewirkt:

Aufwärtspassage · L45 ↗

Aufwärtspassage · bash ↗

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Anforderungen und Einrichtung

Aus dieser Datei wurde kein Abschnitt mit kurzen Anforderungen ausgewählt. Dies bedeutet nicht, dass die Fertigkeit keine Abhängigkeiten hat. Überprüfen Sie die Anweisungen zur Repository-Einrichtung und die referenzierten Dateien.

Grenzwerte und Qualitätskontrollen

Aus dieser Datei wurde kein separater Grenzwertabschnitt ausgewählt. Dies bedeutet nicht, dass die Anwendung für jede Eingabe oder Umgebung geeignet ist. Überprüfen Sie den vollständigen Quellcode und validieren Sie Ihr Ergebnis selbst.

Beginnen Sie mit einem sicheren Testlauf

Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.

Spezifikation des Kompetenzformats und des Verzeichnisses ↗

Lesen Sie mehr dazu in der Quelle.

Übersetzung und Umfang

Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.

Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.

Angeheftete Quelle: Lesen Sie das Original ↗
Quelle abgerufen: 2026-10-29T09:32:23Z
Source-Commit: ca45fc496a3436251f191354091d557da31c15b5
Quelle SHA-256: 81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8

Zurück zum vollständigen Kompetenzkatalog