Install
scripts/init-artifact.shÀ qui ça s'adresse
Utilisez web-artifacts-builder pour un artifact HTML claude.ai complexe, multi-composants, qui a besoin de gestion d'état, de routage ou de composants shadcn/ui. La pile est React, Tailwind CSS et shadcn/ui. Ne l'utilisez pas pour un artifact HTML/JSX simple en un seul fichier.
Le bon prérequis : vous acceptez React 18 + TypeScript + Vite + Parcel (empaquetage) + Tailwind CSS + shadcn/ui. Le résumé mentionne aussi la compatibilité Node 18+. Le matériau ne liste pas de produits d'agent. La page officielle du guide est
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
Premier essai en 3 minutes
La première commande recommandée est le script d'initialisation ; n'inventez pas un autre chemin de chargement :
scripts/init-artifact.sh
Cette commande génère un dépôt frontend, donc elle écrit sur le disque. Confirmez que le répertoire courant peut être initialisé, puis exécutez. Signal de succès : du code frontend éditable a été généré. N'initialisez pas sans confirmer le répertoire.
Après l'init, n'empaquetez pas encore. Ensuite, éditez le code généré pour en faire votre interface multi-composants. Côté style, évitez le «AI slop» nommé par le matériau : pas de mise en page trop centrée, de dégradés violets, de coins arrondis uniformes, ni Inter. C'est une contrainte de design réversible ; avant de changer les styles, regardez les fichiers générés et confirmez que vous n'écraserez pas la structure que vous venez d'écrire.
Si vous voulez seulement vérifier que la pile correspond, vous pouvez vous arrêter à ce contrôle : continuer seulement s'il faut de l'état, du routage ou shadcn/ui ; si la cible est un HTML monofichier, arrêtez-vous ici et n'initiez pas.
Cas d'usage
Cas 1 : initialiser et retravailler une interface à état. D'abord scripts/init-artifact.sh, puis éditer le code généré. Le critère de fin : le dépôt a été généré et vous avez modifié des fichiers générés, pas lancé un échafaudage non nommé. L'étape quatre est de le montrer à l'utilisateur, mais l'extrait n'écrit pas de commande d'affichage ; n'inventez pas de prévisualiseur. Avant de montrer, ouvrez la page générée en local et confirmez.
Cas 2 : empaqueter le projet en un fichier unique partageable. La commande est scripts/bundle-artifact.sh. Elle génère bundle.html, enligne JavaScript, CSS et dépendances, prêt à partager comme artifact dans une conversation Claude. Prérequis : la racine du projet doit avoir index.html. C'est une écriture disque : confirmez le chemin bundle.html qui sera écrasé, puis empaquetez. Le critère de fin : un bundle.html autonome apparaît à la racine. S'il manque index.html, n'assumez pas que le script le créera pour vous.
Limites d'usage
Uniquement pour des artifacts complexes, multi-composants, qui ont besoin d'état/routage/shadcn/ui, pas pour du HTML/JSX simple monofichier. La pile est figée : React 18, TypeScript, Vite, Parcel, Tailwind, shadcn/ui. Le produit d'empaquetage est bundle.html ; la racine doit avoir index.html. Évitez le centrage excessif, les dégradés violets, les coins uniformes et Inter.
N'inventez pas de chemin d'installation hors init et bundle. Le matériau ne donne pas de liste de clients et ne dit pas quelle commande un fichier simple devrait utiliser à la place. Avant d'écraser bundle.html ou d'initialiser un répertoire non vide, confirmez les effets de bord. Au-delà de ces quatre étapes et interdits de style déjà écrits, ce guide ne couvre rien.