Compétences web-artifacts-builder
📦

web-artifacts-builder

Risque faible ⚡ Contient des scripts📁 Accès au système de fichiers⚙️ Commandes externes

Créer des artefacts React avec les composants shadcn/ui

Également disponible depuis: davila7,Azeem-2,anthropics

La création d'artefacts React multi-composants pour les conversations Claude nécessite un bundling et une configuration complexes. Cette compétence automatise la configuration du projet avec React 18, TypeScript, Tailwind CSS et plus de 40 composants shadcn/ui, puis bundle tout dans un seul fichier HTML.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "web-artifacts-builder". Initialiser un projet appelé "task-board" avec une disposition kanban

Résultat attendu:

Projet 'task-board' créé avec succès avec React 18, TypeScript, Vite, Tailwind CSS 3.4.1 et plus de 40 composants shadcn/ui. Alias de chemin (@/) configurés. Exécutez 'cd task-board && pnpm dev' pour démarrer le serveur de développement.

Utilisation de "web-artifacts-builder". Bundle du projet React actuel en un seul artefact HTML

Résultat attendu:

Bundle terminé ! Sortie : bundle.html (487 Ko). Tout le JavaScript, CSS et assets inclus. Ouvrez bundle.html dans le navigateur pour prévisualiser, ou partagez directement dans les conversations Claude.

Audit de sécurité

Risque faible
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
Fichiers analysés
451
Lignes analysées
5
résultats
1
Total des audits
Problèmes à risque faible (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.

Facteurs de risque

⚡ Contient des scripts (1)
scripts/init-artifact.sh:93
📁 Accès au système de fichiers (1)
scripts/init-artifact.sh:230-250
⚙️ Commandes externes (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
Audité par: claude

Score de qualité

45
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
86
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Composants de tableau de bord interactifs

Créez des tableaux de bord complexes de visualisation de données avec plusieurs composants shadcn/ui comme les tables, les cartes, les graphiques et les filtres qui fonctionnent directement dans les conversations Claude.

Applications de formulaires multi-étapes

Créez des flux de formulaires sophistiqués avec validation, gestion d'état et composants UI comme les dialogues, les onglets et les accordions pour les expériences d'intégration utilisateur.

Présentations de systèmes de design

Générez des bibliothèques de composants complètes présentant le thème shadcn/ui, le support du mode sombre et les mises en page responsives pour la documentation de design.

Essayez ces prompts

Démarrage rapide - Initialiser le projet 
Initialisez un nouveau projet d'artefact web appelé "dashboard-demo" avec tous les composants shadcn/ui configurés.
Construire une table de données avec filtres 
Créez un tableau de bord de gestion clients avec une table de données montrant le nom, l'email et le statut. Ajoutez des contrôles de filtre utilisant les composants select et input. Incluez la pagination et les actions de ligne via un menu déroulant.
Formulaire multi-étapes avec validation 
Créez un formulaire d'inscription en 3 étapes en utilisant les composants form, input, select et button. Utilisez react-hook-form avec validation zod. L'étape 1 collecte les infos personnelles, l'étape 2 gère les préférences, l'étape 3 montre la confirmation. Incluez un indicateur de progression.
Tableau de bord analytique en mode sombre 
Créez un tableau de bord analytique avec basculement du mode sombre en utilisant next-themes. Incluez des cartes de métriques, un graphique linéaire placeholder, une table d'activité récente et un dialogue de paramètres. Utilisez les composants card, table, dialog, button et switch avec le thème shadcn/ui approprié.

Bonnes pratiques

  • Exécutez toujours init-artifact.sh avant de commencer le développement pour vous assurer que toutes les dépendances et configurations sont correctement définies
  • Utilisez les alias de chemin fournis (@/components, @/lib) pour des imports plus propres, cohérents avec les conventions shadcn/ui
  • Exécutez bundle-artifact.sh uniquement après le développement terminé pour minimiser le temps de build et la taille de sortie

Éviter

  • N'utilisez pas cette compétence pour les extraits React simples mono-fichier - elle est conçue pour les applications multi-composants
  • Évitez de modifier les scripts de build sauf si vous comprenez la configuration du bundler Parcel et la résolution des alias de chemin
  • Ne committez pas le bundle.html dans le contrôle de version - générez-le frais pour chaque session de partage d'artefact

Foire aux questions

Quelle est la différence entre cette compétence et la génération simple d'artefacts React ?
Cette compétence crée des applications React complètes multi-composants avec les bons outils de build, tandis que les artefacts simples sont des extraits JSX mono-fichier. Utilisez ceci pour les UI complexes nécessitant une gestion d'état, du routage ou de nombreux composants shadcn/ui.
Puis-je utiliser npm ou yarn au lieu de pnpm ?
Les scripts sont écrits pour pnpm. Vous pouvez adapter manuellement les commandes pour npm ou yarn, mais pnpm est recommandé pour la compatibilité avec les scripts fournis et une installation plus rapide des dépendances.
Pourquoi le fichier HTML bundle est-il si volumineux ?
Le bundle inclut toute la bibliothèque React, tous les composants shadcn/ui et Tailwind CSS intégrés dans un seul fichier. Ce compromis permet le partage comme artefact autonome sans dépendances externes.
Puis-je ajouter des composants shadcn/ui personnalisés après l'initialisation ?
Oui. La configuration components.json est configurée pour le CLI shadcn/ui. Exécutez 'pnpm dlx shadcn-ui@latest add <composant>' pour ajouter plus de composants à votre projet.
Cette compétence fonctionne-t-elle avec le mode espace de travail de Claude Code ?
Oui. Les scripts opèrent dans le répertoire du projet actuel. Lorsque vous utilisez Claude Code, assurez-vous d'exécuter les commandes depuis la racine du projet d'artefact où se trouve package.json.
Comment personnaliser le thème Tailwind au-delà des couleurs shadcn par défaut ?
Modifiez tailwind.config.js pour ajouter des couleurs personnalisées, des polices ou étendre le thème. La configuration est pré-configurée avec les variables CSS shadcn que vous pouvez modifier ou étendre.

Détails du développeur

Auteur

ZhanlinCui

Licence

Complete terms in LICENSE.txt

Dépôt

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

Réf

main

Structure de fichiers

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md