Artifacts Builder

par Anthropic

Suite d'outils pour créer des artefacts HTML claude.ai élaborés et multi-composants à l'aide de technologies frontend web modernes (React, Tailwind CSS, shadcn/ui). À utiliser pour les artefacts complexes nécessitant une gestion d'état, un routage ou des composants shadcn/ui - pas pour les artefacts HTML/JSX simples à fichier unique. licence : Conditions complètes dans LICENSE.txt

npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder
Télécharger ZIPGitHub
177.1k

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (Optional) Test the artifact

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

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

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

This creates a fully configured project with:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
  • ✅ Path aliases (@/) configured
  • ✅ 40+ shadcn/ui components pre-installed
  • ✅ All Radix UI dependencies included
  • ✅ Parcel configured for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

  • Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Creates .parcelrc config with path alias support
  • Builds with Parcel (no source maps)
  • Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

Plus de skills de Anthropic

Algorithmic Art
Anthropic
Création d'art algorithmique avec p5.js utilisant l'aléatoire ensemencé et l'exploration interactive de paramètres. Utilisez ceci lorsque les utilisateurs demandent la création d'art par code, d'art génératif, d'art algorithmique, de champs de flux ou de systèmes de particules. Créez un art algorithmique original plutôt que de copier le travail d'artistes existants pour éviter les violations de droits d'auteur. licence : Conditions complètes dans LICENSE.txt
creative
Internal Comms
Anthropic
Un ensemble de ressources pour m'aider à rédiger toutes sortes de communications internes, en utilisant les formats que mon entreprise préfère. Claude doit utiliser cette compétence chaque fois qu'on lui demande de rédiger une communication interne (rapports d'avancement, mises à jour pour la direction, mises à jour 3P, bulletins d'entreprise, FAQ, rapports d'incidents, mises à jour de projet, etc.). licence : Conditions complètes dans LICENSE.txt
Webapp Testing
Anthropic
Kit d'outils pour interagir avec et tester des applications web locales à l'aide de Playwright. Permet de vérifier les fonctionnalités frontend, de déboguer le comportement de l'interface utilisateur, de capturer des captures d'écran du navigateur et de consulter les journaux du navigateur. licence : Conditions complètes dans LICENSE.txt
development
XLSX
Anthropic
Création, édition et analyse complètes de feuilles de calcul avec prise en charge des formules, du formatage, de l'analyse des données et de la visualisation. Lorsque Claude doit travailler avec des feuilles de calcul (.xlsx, .xlsm, .csv, .tsv, etc.) pour : (1) Créer de nouvelles feuilles de calcul avec formules et formatage, (2) Lire ou analyser des données, (3) Modifier des feuilles de calcul existantes tout en préservant les formules, (4) Analyser et visualiser des données dans des feuilles de calcul, ou (5) Recalculer des formules licence : Propriétaire. LICENSE.txt contient les conditions complètes
document
Skill Creator
Anthropic
Guide pour créer des skills efficaces. Cette compétence doit être utilisée lorsque les utilisateurs souhaitent créer un nouveau skill (ou mettre à jour un skill existant) qui étend les capacités de Claude avec des connaissances spécialisées, des workflows ou des intégrations d'outils. licence : Conditions complètes dans LICENSE.txt
Slack Gif Creator
Anthropic
Boîte à outils pour créer des GIFs animés optimisés pour Slack, avec des validateurs pour les contraintes de taille et des primitives d'animation composables. Cette compétence s'applique lorsque les utilisateurs demandent des GIFs animés ou des animations d'emoji pour Slack à partir de descriptions comme "fais-moi un GIF pour Slack de X faisant Y". licence : Conditions complètes dans LICENSE.txt
creative
Theme Factory
Anthropic
Boîte à outils pour styliser des artefacts avec un thème. Ces artefacts peuvent être des diapositives, des documents, des rapports, des pages d'atterrissage HTML, etc. Il existe 10 thèmes prédéfinis avec des couleurs/polices que vous pouvez appliquer à tout artefact déjà créé, ou générer un nouveau thème à la volée. licence : Conditions complètes dans LICENSE.txt
creative
Brand Guidelines
Anthropic
Applique les couleurs officielles de la marque Anthropic et sa typographie à tout type d'artefact pouvant bénéficier de l'apparence et de la sensation d'Anthropic. Utilisez-le lorsque les couleurs de la marque, les directives de style, le formatage visuel ou les normes de conception de l'entreprise s'appliquent. licence : Conditions complètes dans LICENSE.txt
creative