Guide de lecture localisé

web-artifacts-builderObjectif, utilisation et source

Suite d'outils pour la création d'artefacts HTML claude.ai complexes et multi-composants utilisant des technologies web frontend modernes (React, Tailwind CSS,shadcn/uiÀ utiliser pour les artefacts complexes nécessitant une gestion d'état, un routage oushadcn/uicomposants - pas pour un simple fichier uniqueHTML/JSXartefacts.

Source récupérée: 2026-10-29

Dépôt source: anthropics/skills
SKILL.md: skills/web-artifacts-builder/SKILL.md
Étoiles du dépôt: 185,373
Mise à jour du dépôt: 2026-10-29
Catégories de capacités: Développement
Dernière collecte: 2026-10-31 10:38 UTC+08:00

Licence : Fichier de licence à vérifier

SKILL.md original

Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.

Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.

À quoi sert cette compétence ?

Comment fonctionne le flux de travail en amont

Étape1Initialiser le projet

Exécutez le script d'initialisation pour créer un nouveau projet React : cela crée un projet entièrement configuré avec : ✅ React + TypeScript (via Vite) ✅ Tailwind CSS3.4.1avecshadcn/uisystème de thèmes

passage en amont · L24 ↗

Étape2: Développez votre artefact

Pour créer l'artefact, modifiez les fichiers générés. Consultez la section « Tâches de développement courantes » ci-dessous pour obtenir des instructions.

passage en amont · L41 ↗

Étape3: Regrouper en un seul fichier HTML

Pour regrouper l'application React en un seul fichier HTML : Cela créebundle.html- Un fichier autonome contenant tous les fichiers JavaScript, CSS et dépendances intégrés. Ce fichier peut être partagé directement dans les conversations Claude. Prérequis : Votre projet doit avoir unindex.htmldans le répertoire racine. Ce que fait le script :

passage en amont · L45 ↗

passage en amont · bash ↗

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

Configuration requise

Aucun extrait de configuration n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sans dépendances. Consultez les instructions de configuration du dépôt et les fichiers référencés.

Limites et contrôles de qualité

Aucun passage de limite distinct n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sûre pour toutes les entrées ou tous les environnements. Consultez le code source complet et validez vos résultats.

Commencez par un essai sans danger

Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.

Spécifications du format et du répertoire des compétences ↗

Pour en savoir plus, consultez la source.

Traduction et étendue

Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.

Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.

Source épinglée: Lire l'original ↗
Source récupérée: 2026-10-29T09:32:23Z
Commit source: ca45fc496a3436251f191354091d557da31c15b5
Source SHA-256: 81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8

Retour au catalogue complet des compétences