React-HTML-Artefakte erstellen
Komplexe interaktive Artefakte benötigen mehr Einrichtung, als eine einzelne HTML-Datei bietet. Diese Skill richtet React, Tailwind CSS, shadcn/ui und Bündelungsskripte für Claude-, Codex- und Claude Code-Workflows ein.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "web-artifacts-builder" from https://skillstore.io/skills/azeem-2-web-artifacts-builder.md and its manifest at https://skillstore.io/api/skills/azeem-2-web-artifacts-builder/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„web-artifacts-builder“ wird verwendet. Erstelle einen mehrstufigen Onboarding-Assistenten als Claude-Artefakt.
Erwartetes Ergebnis:
Ein React TypeScript-Projekt mit Tailwind-Styling, shadcn-Steuerelementen und einem gebündelten HTML-Artefakt, bereit zum Teilen.
„web-artifacts-builder“ wird verwendet. Wandle eine vorhandene Vite-App in eine einzelne Artefaktdatei um.
Erwartetes Ergebnis:
Ein Parcel-basierter Bündelungsworkflow, der eine eigenständige HTML-Datei mit Inline-Assets erzeugt.
„web-artifacts-builder“ wird verwendet. Starte einen Designsystem-Prototyp mit gängigen UI-Komponenten.
Erwartetes Ergebnis:
Ein generiertes Projekt mit shadcn-Komponentendateien, Radix-Abhängigkeiten, Tailwind-Theme-Variablen und Pfadaliasen.
All 29 static alerts are benign uses of shell syntax, local configuration files, Markdown formatting, or documentation links. The scripts still introduce a medium supply-chain risk by installing unpinned packages and changing global package-manager state.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/azeem-2-web-artifacts-builder/audits/12?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/azeem-2-web-artifacts-builder?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/azeem-2-web-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/azeem-2-web-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/azeem-2-web-artifacts-builder.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Azeem-2. (2026). web-artifacts-builder security audit report (audit version 12) [Author version unspecified]. Skillstore. https://skillstore.io/skills/azeem-2-web-artifacts-builder/audits/12@techreport{azeem-2-azeem-2-web-artifacts-builder-2026,
author = {Azeem-2},
title = {web-artifacts-builder security audit report (audit version 12)},
institution = {Skillstore},
year = {2026},
number = {12},
url = {https://skillstore.io/skills/azeem-2-web-artifacts-builder/audits/12},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-artifacts-builder security audit report (audit version 12)"
version: "unspecified"
type: report
authors:
- name: "Azeem-2"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/azeem-2-web-artifacts-builder/audits/12"
identifiers:
- type: other
value: "skillstore:azeem-2-web-artifacts-builder:audit:12"
description: "Skillstore immutable audit report identifier"
Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
davila7-web-artifacts-builder
2026-09-09
azeem-2-web-artifacts-builder
2026-09-09
sickn33-web-artifacts-builder
2026-09-09
web-artifacts-builder
2026-09-09
zhanlincui-web-artifacts-builder
2026-09-09
Erstellen Sie React-basierte Claude-Artefakte, die Zustand, wiederverwendbare Komponenten und einen modernen Build-Workflow benötigen.
Erstellen Sie eine ausgefeilte Produktdemo und exportieren Sie sie als ein teilbares HTML-Artefakt.
Generieren Sie einen shadcn/ui-bereiten Workspace zum Testen von Layouts, Formularen, Dialogen, Tabellen und Navigationsmustern.
Verwende diese Skill, um ein React-Artefakt namens dashboard-demo zu initialisieren. Fasse anschließend die generierten Dateien und nächsten Befehle zusammen.
Verwende das generierte shadcn/ui-Setup, um ein Einstellungs-Panel mit Tabs, Formularen und validierungsbereiten Feldern zu erstellen.
Bündle das aktuelle React-Artefakt in eine HTML-Datei und melde den Ausgabeort sowie die Dateigröße.
Erstelle ein geroutetes React-Artefakt mit gemeinsamem Layout, wiederverwendbaren shadcn/ui-Steuerelementen, Tailwind-Theming und einer final gebündelten HTML-Ausgabe.
Autor
Azeem-2Lizenz
Complete terms in LICENSE.txt
Skillstore-Revision
r3
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
8c3e20bba512c392d9b02ee748b18e0b09d4982c
Aktualität der Wartung
24.7.2026
Nutzung
6 Downloads · 260 Aufrufe
Dateistruktur
Projektverfassungen aus Dokumenten entwerfen
Teams verstecken Mission, Werte und Governance-Regeln oft in verstreuten Dokumenten. Dieser Skill extrahiert diese Elemente und wandelt sie in eine klare Projektverfassung um.
Unverwechselbare Frontend-Oberflächen gestalten
Generische Weboberflächen wirken austauschbar und verfehlen möglicherweise den Marken- oder Produktkontext des Nutzers. Diese Skill leitet Claude, Codex und Claude Code dabei an, ausgereifte, funktionale Frontends mit einer klaren visuellen Richtung zu entwerfen.
PDF-Verarbeitung automatisieren
PDF-Workflows erfordern häufig Extraktion, Ausfüllen von Formularen und Dateikonvertierung über mehrere Tools hinweg. Dieser Skill gibt Claude, Codex und Claude Code strukturierte Schritte und Skripte für gängige PDF-Aufgaben.
Slack-taugliche animierte GIFs erstellen
Teams benötigen kleine animierte GIFs, die in Slack gut aussehen. Diese Skill unterstützt bei Generierung, Validierung und Optimierung von Emoji- und Nachrichten-GIFs.
Starke Dokumentation gemeinsam verfassen
Das Schreiben komplexer Dokumentation ist schwierig, wenn Kontext, Struktur und Annahmen der Leserschaft unklar sind. Dieser Skill unterstützt bei der Kontexterfassung, dem Entwerfen von Abschnitten, iterativen Bearbeitungen und Lesertests.
Interne Unternehmensupdates entwerfen
Teams verlieren Zeit damit, verstreute Updates in klare interne Mitteilungen zu verwandeln. Dieser Skill leitet Claude, Codex und Claude Code dabei an, prägnante Newsletter, 3P-Updates, FAQs und allgemeine Kommunikation zu entwerfen.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
shadcn/ui-Oberflächen in Next.js erstellen
von Asmayaseen
React-Teams benötigen konsistente UI-Muster, die mit modernem Next.js funktionieren. Dieser Skill bietet Anleitungen zur Einrichtung von shadcn/ui, Komponentenbeispiele, Formularvalidierung, Tabellen, Sidebars und Muster für den Dunkelmodus.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.
Typsichere React-Komponenten erstellen
von softaworks
React-TypeScript-Arbeit erfordert häufig präzise Typen für Events, Hooks und Routen. Diese Skill bietet fokussierte Muster für typisierte Komponenten, React 19 APIs und Routing.