Fähigkeiten web-artifacts-builder
📦

web-artifacts-builder

Niedriges Risiko ⚡ Enthält Skripte📁 Dateisystemzugriff⚙️ Externe Befehle

React-Artefakte mit shadcn/ui-Komponenten erstellen

Auch verfügbar von: davila7,Azeem-2,anthropics

Die Erstellung mehrkomponentiger React-Artefakte für Claude-Konversationen erfordert komplexes Bundling und Konfiguration. Diese Fähigkeit automatisiert die Projektinitialisierung mit React 18, TypeScript, Tailwind CSS und über 40 shadcn/ui-Komponenten und bündelt anschließend alles in eine einzige HTML-Datei.

Unterstützt: Claude Codex Code(CC)
🥉 73 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "web-artifacts-builder". Initialisiere ein Projekt namens "task-board" mit Kanban-Board-Layout

Erwartetes Ergebnis:

Projekt 'task-board' erfolgreich erstellt mit React 18, TypeScript, Vite, Tailwind CSS 3.4.1 und über 40 shadcn/ui-Komponenten. Pfad-Aliasse (@/) konfiguriert. Führe 'cd task-board && pnpm dev' aus, um den Entwicklungsserver zu starten.

Verwendung von "web-artifacts-builder". Bündle das aktuelle React-Projekt in ein einzelnes HTML-Artefakt

Erwartetes Ergebnis:

Bündelung abgeschlossen! Ausgabe: bundle.html (487 KB). Alle JavaScript-, CSS- und Asset-Dateien inline eingefügt. Öffne bundle.html im Browser zur Vorschau oder teile sie direkt in Claude-Konversationen.

Sicherheitsaudit

Niedriges Risiko
v1 • 2/24/2026

Static analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.

3
Gescannte Dateien
451
Analysierte Zeilen
5
befunde
1
Gesamtzahl Audits
Probleme mit niedrigem Risiko (2)
scripts/bundle-artifact.sh:1-54scripts/init-artifact.sh:1-323
Shell Script Execution
Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.
scripts/init-artifact.sh:228-251
Filesystem Modification
Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

Risikofaktoren

⚡ Enthält Skripte (1)
scripts/init-artifact.sh:93
📁 Dateisystemzugriff (1)
scripts/init-artifact.sh:230-250
⚙️ Externe Befehle (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
Auditiert von: claude

Qualitätsbewertung

45
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
86
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Interaktive Dashboard-Komponenten

Erstellen komplexer Datenvisualisierungs-Dashboards mit mehreren shadcn/ui-Komponenten wie Tabellen, Karten, Diagrammen und Filtern, die direkt in Claude-Konversationen funktionieren.

Mehrstufige Formularanwendungen

Erstellung ausgefeilter Formularabläufe mit Validierung, Zustandsverwaltung und UI-Komponenten wie Dialogen, Tabs und Akkordeons für Benutzer-Onboarding-Erlebnisse.

Design-System-Präsentationen

Generierung umfassender Komponentenbibliotheken, die shadcn/ui Theming, Dark-Mode-Unterstützung und responsives Layout für Design-Dokumentationen präsentieren.

Probiere diese Prompts

Schnellstart - Projekt initialisieren 
Initialisiere ein neues Web-Artefakt-Projekt namens "dashboard-demo" mit allen konfigurierten shadcn/ui-Komponenten.
Datentabelle mit Filtern erstellen 
Erstelle ein Kundenmanagement-Dashboard mit einer Datentabelle, die Name, E-Mail und Status anzeigt. Füge Filtersteuerungen mit den select- und input-Komponenten hinzu. Füge Paginierung und Zeilenaktionen über ein Dropdown-Menü hinzu.
Mehrstufiges Formular mit Validierung 
Baue ein 3-stufiges Registrierungsformular mit den Komponenten form, input, select und button. Verwende react-hook-form mit zod-Validierung. Schritt 1 sammelt persönliche Informationen, Schritt 2 behandelt Präferenzen, Schritt 3 zeigt die Bestätigung. Füge eine Fortschrittsanzeige hinzu.
Analytics-Dashboard mit Dark Mode 
Erstelle ein Analytics-Dashboard mit Dark-Mode-Umschalter mit next-themes. Füge Metrikkarten, einen Line-Chart-Platzhalter, eine Tabelle für aktuelle Aktivitäten und einen Einstellungsdialog hinzu. Verwende die Komponenten card, table, dialog, button und switch mit entsprechendem shadcn/ui Theming.

Bewährte Verfahren

  • Führe init-artifact.sh immer vor Beginn der Entwicklung aus, um sicherzustellen, dass alle Abhängigkeiten und Konfigurationen korrekt eingerichtet sind
  • Verwende die bereitgestellten Pfad-Aliasse (@/components, @/lib) für sauberere Imports, die mit den shadcn/ui-Konventionen übereinstimmen
  • Führe bundle-artifact.sh erst nach Abschluss der Entwicklung aus, um Build-Zeit und Ausgabegröße zu minimieren

Vermeiden

  • Verwende diese Fähigkeit nicht für einfache einzeilige React-Snippets - sie ist für mehrkomponentige Anwendungen konzipiert
  • Vermeide Änderungen an den Build-Skripten, es sei denn, du verstehst die Parcel-Bundling-Konfiguration und die Auflösung von Pfad-Aliassen
  • Committe bundle.html nicht in die Versionskontrolle - generiere sie bei jeder Artefakt-Freigabesitzung neu

Häufig gestellte Fragen

Was ist der Unterschied zwischen dieser Fähigkeit und einfacher React-Artefakt-Generierung?
Diese Fähigkeit erstellt vollständige mehrkomponentige React-Anwendungen mit ordnungsgemäßer Build-Tooling, während einfache Artefakte einzeilige JSX-Snippets sind. Verwende dies für komplexe UIs, die Zustandsverwaltung, Routing oder viele shadcn/ui-Komponenten erfordern.
Kann ich npm oder yarn statt pnpm verwenden?
Die Skripte sind für pnpm geschrieben. Du kannst die Befehle manuell für npm oder yarn anpassen, aber pnpm wird für Kompatibilität mit den bereitgestellten Skripten und schnellere Abhängigkeitsinstallation empfohlen.
Warum ist die gebündelte HTML-Datei so groß?
Das Bundle enthält die gesamte React-Bibliothek, alle shadcn/ui-Komponenten und Tailwind CSS inline in einer einzigen Datei. Dieser Kompromiss ermöglicht die gemeinsame Nutzung als in sich geschlossenes Artefakt ohne externe Abhängigkeiten.
Kann ich nach der Initialisierung benutzerdefinierte shadcn/ui-Komponenten hinzufügen?
Ja. Die components.json-Konfiguration ist für die shadcn/ui-C CLI eingerichtet. Führe 'pnpm dlx shadcn-ui@latest add <component>' aus, um weitere Komponenten zu deinem Projekt hinzuzufügen.
Funktioniert diese Fähigkeit mit dem Claude Code-Workspace-Modus?
Ja. Die Skripte arbeiten innerhalb des aktuellen Projektverzeichnisses. Stelle bei der Verwendung von Claude Code sicher, dass du Befehle vom Artefakt-Projektstammverzeichnis aus ausführst, wo package.json existiert.
Wie passe ich das Tailwind-Theme über die standardmäßigen shadcn-Farben hinaus an?
Bearbeite tailwind.config.js, um benutzerdefinierte Farben, Schriftarten hinzuzufügen oder das Theme zu erweitern. Die Konfiguration ist mit shadcn-CSS-Variablen vorkonfiguriert, die du modifizieren oder erweitern kannst.

Entwicklerdetails

Lizenz

Complete terms in LICENSE.txt

Repository

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

Ref

main

Dateistruktur

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md