Initialise un projet React 18 + TypeScript + Vite avec Tailwind CSS et plus de 40 composants shadcn/ui, puis regroupe le tout avec Parcel et html-inline dans un bundle.html autonome pour les artifacts claude.ai. Destiné aux artifacts complexes nécessitant de l'état, du routage ou shadcn/ui.
Ce qu'il fait
Où Web Artifacts Builder s'exécute et ce qu'il ajoute, d'après sa documentation
Initialise un projet avec scripts/init-artifact.sh
Préconfigure React, TypeScript, Vite, Tailwind 3.4.1, les alias de chemins et shadcn/ui
Empaquette dans un seul bundle.html inline avec scripts/bundle-artifact.sh
Déconseille le style générique typique de l'IA (mises en page centrées, dégradés violets, police Inter)
Les tests sont facultatifs et réalisés après la présentation de l'artifact
Quand l'utiliser
Bonne adéquation
Artifacts claude.ai complexes nécessitant gestion d'état, routage ou shadcn/ui
Pas pour
Les artifacts HTML ou JSX simples en un seul fichier
Comment installer Web Artifacts Builder
Il vous faut : Node 18+ (le script épingle une version compatible de Vite); index.html à la racine du projet pour l'empaquetage
Enregistrez la marketplace dans Claude Code : /plugin marketplace add anthropics/skills
Installez le bundle qui le contient : /plugin install example-skills@anthropic-agent-skills
Ou copiez le dossier du skill dans ~/.claude/skills/web-artifacts-builder/ (personnel) ou .claude/skills/web-artifacts-builder/ (projet)
Mentionnez la tâche dans un prompt ; Claude charge le skill automatiquement lorsque la description du SKILL.md correspond
Autorisations et sécurité
Ce à quoi il accède
Exécute des scripts shell qui installent des paquets npm (parcel, html-inline et autres) et construisent des fichiers
Notes de sécurité des mainteneurs
Avertissement du repo d'Anthropic : les skills sont fournis à titre de démonstration et d'éducation ; le comportement dans Claude peut différer
Examinez la source avant de donner à un agent l'accès à des identifiants ou à des systèmes de production. Nous documentons ce que déclarent les mainteneurs ; nous n'auditons pas le code.
Limites
Le README du repo indique que les skills sont des exemples de démonstration/éducatifs
Outil de codage agentique d'Anthropic qui lit votre base de code, modifie des fichiers et exécute des commandes depuis le terminal, les IDE ou le navigateur.
La gratuité s'arrête à : Pas d'offre gratuite : Claude Code est inclus dans les abonnements Claude payants (Pro, Max, Team, Enterprise…
Comment installer le skill web-artifacts-builder dans Claude Code ?
Ajoutez la marketplace avec /plugin marketplace add anthropics/skills et installez le bundle qui le contient, ou copiez skills/web-artifacts-builder dans ~/.claude/skills/. source
Quand Claude utilise-t-il le skill web-artifacts-builder ?
Claude le charge automatiquement lorsque la demande correspond au champ description du frontmatter de son SKILL.md. source
Quelle licence le skill web-artifacts-builder utilise-t-il ?
Son SKILL.md renvoie à LICENSE.txt, qui est la licence Apache 2.0. source
