Web Artifacts Builder

Pour construire des artifacts frontend puissants sur claude.ai, suivez ces étapes :

1. Initialisez le dépôt frontend en utilisant scripts/init-artifact.sh
2. Développez votre artifact en éditant le code généré
3. Regroupez tout le code dans un seul fichier HTML en utilisant scripts/bundle-artifact.sh
4. Affichez l'artifact à l'utilisateur
5. (Optionnel) Testez l'artifact

Stack : React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Directives de Design & Style

TRÈS IMPORTANT : Pour éviter ce qu'on appelle souvent le « AI slop », évitez les mises en page excessivement centrées, les dégradés violets, les coins arrondis uniformes et la police Inter.

Guide de Démarrage Rapide

Étape 1 : Initialiser le Projet

Exécutez le script d'initialisation pour créer un nouveau projet React :

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Cela crée un projet entièrement configuré avec :

• ✅ React + TypeScript (via Vite)
• ✅ Tailwind CSS 3.4.1 avec le système de thème shadcn/ui
• ✅ Alias de chemin (@/) configurés
• ✅ 40+ composants shadcn/ui pré-installés
• ✅ Toutes les dépendances Radix UI incluses
• ✅ Parcel configuré pour le bundling (via .parcelrc)
• ✅ Compatibilité Node 18+ (détection automatique et verrouillage de la version Vite)

Étape 2 : Développer Votre Artifact

Pour construire l'artifact, éditez les fichiers générés. Consultez Tâches de Développement Courantes ci-dessous pour des conseils.

Étape 3 : Regrouper en un Seul Fichier HTML

Pour regrouper l'application React dans un seul artifact HTML :

bash scripts/bundle-artifact.sh

Cela crée bundle.html — un artifact autonome avec tout le JavaScript, CSS et dépendances inlinés. Ce fichier peut être partagé directement dans les conversations Claude en tant qu'artifact.

Prérequis : Votre projet doit avoir un index.html dans le répertoire racine.

Ce que fait le script :

• Installe les dépendances de bundling (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
• Crée la configuration .parcelrc avec le support des alias de chemin
• Effectue le build avec Parcel (sans source maps)
• Inline tous les assets dans un seul HTML en utilisant html-inline

Étape 4 : Partager l'Artifact avec l'Utilisateur

Enfin, partagez le fichier HTML regroupé dans la conversation avec l'utilisateur afin qu'il puisse le visualiser en tant qu'artifact.

Étape 5 : Test/Visualisation de l'Artifact (Optionnel)

Remarque : Il s'agit d'une étape complètement optionnelle. Effectuez-la uniquement si nécessaire ou si demandé.

Pour tester/visualiser l'artifact, utilisez les outils disponibles (notamment d'autres Skills ou les outils intégrés comme Playwright ou Puppeteer). En général, évitez de tester l'artifact au départ car cela augmente la latence entre la requête et le moment où l'artifact terminé peut être visualisé. Testez ultérieurement, après présentation de l'artifact, si demandé ou si des problèmes surviennent.

Référence

• Composants shadcn/ui : https://ui.shadcn.com/docs/components