83.3K+Télécharger
Aller au guide d’utilisation
web-artifacts-builderpar Anthropic

Web Artifacts Builder Skill.

Un skill Claude Code et Codex pour la conception d'interfaces : artefacts HTML interactifs multi-composants avec React, Tailwind et shadcn/ui.

  • Web et UI
  • HTML
Télécharger OpenDesignVoir le guide d'utilisation
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start
En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 3 073 caractères au total

01 Ce qu'il fait

Ce que fait le skill web-artifacts-builder dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill pour construire des artefacts React complexes, multi-composants, pour claude.ai, à l'aide d'une stack moderne composée de React 18, TypeScript, Vite, Parcel, Tailwind CSS et shadcn/ui. Le skill fournit des scripts d'initialisation pour mettre en place un projet entièrement configuré avec plus de 40 composants shadcn/ui préinstallés, ainsi que des scripts d'assemblage pour tout compiler en un seul fichier HTML autonome.

Il est conçu pour les artefacts nécessitant une gestion d'état, du routage ou des composants shadcn/ui, et non pour de simples artefacts HTML ou JSX à fichier unique. Le workflow suit cinq étapes : initialiser le dépôt frontend, développer l'artefact en modifiant le code généré, l'assembler en un seul fichier HTML, l'afficher à l'utilisateur et, éventuellement, le tester.

HTML
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Initialiser un projet React configuré

    Exécutez le script init-artifact.sh avec un nom de projet pour créer un projet entièrement configuré avec React, TypeScript, Tailwind CSS, des alias de chemins, plus de 40 composants shadcn/ui et une configuration de bundling Parcel.

  2. 02
    Développer en modifiant les fichiers générés

    Construisez l'artefact en modifiant les fichiers générés lors de l'initialisation, en suivant les indications sur les tâches de développement courantes fournies par le skill.

  3. 03
    Assembler en HTML autonome

    Exécutez bundle-artifact.sh pour compiler l'application React en bundle.html, un fichier unique regroupant tout le JavaScript, le CSS et les dépendances en ligne, à l'aide de Parcel et html-inline.

  4. 04
    Afficher l'artefact à l'utilisateur

    Partagez le fichier HTML assemblé dans la conversation afin que l'utilisateur puisse le consulter comme un artefact claude.ai.

02 Trouvez celui qui vous convient

Quand utiliser le skill web-artifacts-builder

Utilisez le skill web-artifacts-builder dans Claude Code ou Codex lorsque le travail relève de ce type de conception UI. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • Interfaces multi-composants utilisant la bibliothèque de composants shadcn/ui

Connaître les limites

  • À utiliser pour les artefacts complexes nécessitant une gestion d'état, du routage ou des composants shadcn/ui – pas pour de simples artefacts HTML/JSX mono-fichier.

Quoi fournir

  • Nom de projet pour l'initialisationUn nom pour le nouveau répertoire de projet React lors de l'exécution du script init-artifact.sh.

03 Dans le skill

Règles que le skill web-artifacts-builder donne à Claude Code et Codex

5 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. À utiliser uniquement pour les artefacts complexes

    Ce skill est spécifiquement conçu pour les artefacts complexes nécessitant une gestion d'état, du routing ou des composants shadcn/ui. Ne l'utilisez pas pour des artefacts HTML ou JSX simples à fichier unique.

  2. Évitez les schémas de design « AI slop »

    N'utilisez pas de mises en page centrées excessives, de dégradés violets, de coins arrondis uniformes ou la police Inter, afin d'éviter ce que l'on appelle l'AI slop.

  3. Le projet doit avoir un index.html à la racine

    Le script de bundling exige que votre projet possède un fichier index.html situé dans le répertoire racine.

  4. Ne testez que si nécessaire

    Le test est totalement facultatif et ne doit être effectué que si nécessaire ou sur demande.

  5. Suivez le workflow en cinq étapes

    Le processus de construction d'artefact suit une séquence précise : initialiser le repo frontend, développer en modifiant le code généré, regrouper tout le code dans un seul fichier HTML, afficher au utilisateur, puis, éventuellement, tester.

04 Mettez-le en pratique

Installer web-artifacts-builder dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter web-artifacts-builder à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Forme générique de la CLI skills pour skills/web-artifacts-builder/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Utilisez des outils disponibles comme Playwright ou Puppeteer pour tester ou visualiser l'artefact si demandé ou en cas de problème
  • Vérifiez que le design évite les mises en page centrées excessives, les dégradés violets, les coins arrondis uniformes et la police Inter

Dans OpenDesign, web-artifacts-builder est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Anthropic
Repository
github.com/anthropics/skills Branche main
Fichier du skill
skills/web-artifacts-builder/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 34040c9
License
Apache-2.0 Source : skills/web-artifacts-builder/LICENSE.txt ; SKILL.md indique « Conditions complètes dans LICENSE.txt ».
Étoiles du dépôt
176 183 Capture GitHub effectuée le 14 septembre 2026 pour l'ensemble du dépôt anthropics/skills, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour web-artifacts-builder.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Consignes de design et de styleInstructions pour éviter les schémas d'AI slop tels que le centrage excessif, les dégradés violets, les coins arrondis uniformes et la police Inter
  2. Démarrage rapideWorkflow en cinq étapes, de l'initialisation au développement, au bundling, au partage, et au test optionnel
  3. Étape 1 : Initialiser le projetExécutez init-artifact.sh pour créer un projet React configuré avec TypeScript, Tailwind, des composants shadcn/ui, et Parcel
  4. Étape 2 : Développez votre artefactModifiez les fichiers générés pour construire l'artefact en suivant les indications sur les tâches de développement courantes
  5. Étape 3 : Regrouper en un seul fichier HTMLExécutez bundle-artifact.sh pour créer un bundle.html autonome avec JavaScript, CSS et dépendances intégrés
  6. Étape 4 : Partager l'artefact avec l'utilisateurPartagez le fichier HTML regroupé dans la conversation pour l'afficher en tant qu'artefact
  7. Étape 5 : Tester/visualiser l'artefact (optionnel)Test optionnel avec des outils comme Playwright ou Puppeteer, en évitant les tests en amont pour réduire la latence
  8. RéférenceLien vers la documentation des composants shadcn/ui
Description du skill lui-même
« Suite d'outils pour créer des artefacts HTML claude.ai élaborés et multi-composants à l'aide de technologies web frontend modernes (React, Tailwind CSS, shadcn/ui). À utiliser pour les artefacts complexes nécessitant une gestion d'état, du routage ou des composants shadcn/ui – pas pour de simples artefacts HTML/JSX mono-fichier. »

Description en en-tête du fichier SKILL.md. Le fichier complet compte environ 3 073 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill web-artifacts-builder

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quels composants et bibliothèques sont déjà installés ?

Le script d'initialisation crée un projet avec React 18, TypeScript via Vite, Tailwind CSS 3.4.1 avec le thème shadcn/ui, plus de 40 composants shadcn/ui préinstallés, toutes les dépendances Radix UI, et Parcel configuré pour le bundling. Les alias de chemin sont configurés afin que vous puissiez importer en utilisant le préfixe at-slash.

Web Artifacts Builder

Exécuter web-artifacts-builder sur une tâche de conception UI réelle.

Le skill web-artifacts-builder est fourni avec OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder