Web Artifacts Builder - Claude Skill pour artefacts React

Source : contenu adapté de anthropics/skills (MIT). Dernière synchronisation : 8 juillet 2026, sur la mise à jour upstream du 20 avril 2026.

Vue d'ensemble

La description officielle : "Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, shadcn/ui. For complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file artifacts."

Notez le périmètre : les artefacts simples mono-fichier n'ont pas besoin de cette skill. Elle existe pour le moment où un projet dépasse un unique bloc JSX.

Comment fonctionne la skill

La SKILL.md est une pipeline en cinq étapes enrobée de guidelines design :

1. Initialiser le projet avec scripts/init-artifact.sh - un workspace React + Tailwind + shadcn/ui préconfiguré
2. Développer avec de vrais composants, du state management et du routing
3. Bundler le tout en un seul fichier HTML via scripts/bundle-artifact.sh
4. Partager l'artefact avec l'utilisateur
5. Tester/visualiser (étape de vérification optionnelle)

Une archive shadcn-components.tar.gz est incluse pour installer les composants sans accès réseau.

Contenu du dossier de la skill

• scripts/init-artifact.sh - scaffolding du projet
• scripts/bundle-artifact.sh - bundler HTML mono-fichier
• scripts/shadcn-components.tar.gz - bibliothèque de composants hors-ligne
• SKILL.md, LICENSE.txt

À retenir pour vos propres skills

• Les scripts exécutables battent les instructions : plutôt que décrire le setup en prose, la skill livre des shell scripts que Claude exécute.
• Embarquer les dépendances hors-ligne (l'archive shadcn) rend la skill utilisable en environnement sandboxé - un détail absent de la plupart des skills communautaires.

Voir sur GitHub

skills/web-artifacts-builder