83.3K+Scarica
Vai alla guida all’uso
web-artifacts-builderdi Anthropic

Web Artifacts Builder Skill.

Uno skill per Claude Code e Codex dedicato al design UI: prodotti HTML interattivi multi-componente con React, Tailwind e shadcn/ui.

  • Web & UI
  • HTML
Scarica OpenDesignGuida all'uso
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
Intestazione e sezioni lette dal file upstream il 14 settembre 2026 · 3.073 caratteri in totale

01 Cosa fa

Cosa fa la Skill web-artifacts-builder in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill per creare artifact React complessi e multi-componente per claude.ai utilizzando uno stack moderno composto da React 18, TypeScript, Vite, Parcel, Tailwind CSS e shadcn/ui. La skill fornisce script di inizializzazione per configurare un progetto completamente configurato con oltre 40 componenti shadcn/ui pre-installati e script di bundling per compilare il tutto in un unico file HTML autonomo.

È pensata per artifact che richiedono gestione dello stato, routing o componenti shadcn/ui, non per semplici artifact HTML o JSX a file singolo. Il workflow segue cinque passaggi: inizializzare il repository frontend, sviluppare l'artifact modificando il codice generato, unire il tutto in un unico file HTML, mostrarlo all'utente e, facoltativamente, testarlo.

HTML
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Inizializzare un Progetto React Configurato

    Eseguire lo script init-artifact.sh con un nome di progetto per creare un progetto completamente configurato con React, TypeScript, Tailwind CSS, alias di percorso, oltre 40 componenti shadcn/ui e la configurazione di bundling Parcel.

  2. 02
    Sviluppare Modificando i File Generati

    Costruire l'artifact modificando i file generati durante l'inizializzazione, seguendo le indicazioni sulle attività di sviluppo comuni fornite nella skill.

  3. 03
    Unire in un HTML Autonomo

    Eseguire bundle-artifact.sh per compilare l'app React in bundle.html, un unico file con tutto il JavaScript, il CSS e le dipendenze incorporati tramite Parcel e html-inline.

  4. 04
    Mostrare l'Artifact all'Utente

    Condividere il file HTML unito nella conversazione in modo che l'utente possa visualizzarlo come artifact di claude.ai.

02 Trova la tua applicazione

Quando Usare la Skill web-artifacts-builder

Usa la skill web-artifacts-builder in Claude Code o Codex quando il lavoro riguarda il design UI di questo tipo. Idoneità e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Interfacce multi-componente che utilizzano la libreria di componenti shadcn/ui

Conosci i limiti

  • Da usare per artefatti complessi che richiedono gestione dello stato, routing o componenti shadcn/ui - non per semplici artefatti HTML/JSX a file singolo.

Cosa fornire

  • Nome del progetto per l'inizializzazioneUn nome per la nuova directory del progetto React quando si esegue lo script init-artifact.sh.

03 Dentro la skill

Regole che la Skill web-artifacts-builder Fornisce a Claude Code e Codex

5 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Da usare solo per artifact complessi

    Questa skill è specifica per artifact complessi che richiedono gestione dello stato, routing o componenti shadcn/ui. Non usarla per artifact HTML o JSX semplici a file unico.

  2. Evitare i pattern di design da AI slop

    Non usare layout eccessivamente centrati, gradienti viola, angoli uniformemente arrotondati o il font Inter, per evitare quello che viene definito AI slop.

  3. Il progetto deve avere un index.html nella root

    Lo script di bundling richiede che il progetto abbia un file index.html nella directory root.

  4. Eseguire i test solo quando necessario

    Il testing è del tutto opzionale e deve essere eseguito solo se necessario o richiesto.

  5. Seguire il workflow in cinque passaggi

    Il processo di creazione dell'artifact segue una sequenza specifica: inizializzare il repo frontend, sviluppare modificando il codice generato, unire tutto il codice in un singolo file HTML, mostrarlo all'utente e, opzionalmente, testarlo.

04 Mettila al lavoro

Installa web-artifacts-builder in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi web-artifacts-builder a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per skills/web-artifacts-builder/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Usare strumenti disponibili come Playwright o Puppeteer per testare o visualizzare l'artifact, se richiesto o in caso di problemi
  • Verificare che il design eviti layout eccessivamente centrati, gradienti viola, angoli uniformemente arrotondati e il font Inter

In OpenDesign web-artifacts-builder è incluso: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
File della skill
skills/web-artifacts-builder/SKILL.md Checksum del contenuto registrato alla verifica; commit 34040c9
License
Apache-2.0 Da skills/web-artifacts-builder/LICENSE.txt; SKILL.md dice "Termini completi in LICENSE.txt".
Stelle del repository
176.183 Snapshot GitHub del 2026-09-14 per l'intero repository anthropics/skills, che contiene 7 skill in questo catalogo. Non è un conteggio di utilizzo o una valutazione per web-artifacts-builder.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Linee guida di design e stileIstruzioni per evitare pattern da AI slop come centratura eccessiva, gradienti viola, angoli uniformemente arrotondati e font Inter
  2. Avvio rapidoWorkflow in cinque passaggi, dall'inizializzazione allo sviluppo, al bundling, alla condivisione e al testing opzionale
  3. Passaggio 1: inizializzare il progettoEseguire init-artifact.sh per creare un progetto React configurato con TypeScript, Tailwind, componenti shadcn/ui e Parcel
  4. Passaggio 2: sviluppare l'artifactModificare i file generati per costruire l'artifact seguendo le indicazioni sulle attività di sviluppo comuni
  5. Passaggio 3: unire in un singolo file HTMLEseguire bundle-artifact.sh per creare un bundle.html autonomo con JavaScript, CSS e dipendenze incorporati
  6. Passaggio 4: condividere l'artifact con l'utenteCondividere il file HTML risultante nella conversazione per la visualizzazione come artifact
  7. Passaggio 5: testare/visualizzare l'artifact (opzionale)Test opzionale con strumenti come Playwright o Puppeteer, evitando test preliminari per ridurre la latenza
  8. RiferimentoLink alla documentazione dei componenti shadcn/ui
Descrizione della skill
"Suite di strumenti per creare artifact HTML claude.ai elaborati e multi-componente utilizzando tecnologie frontend web moderne (React, Tailwind CSS, shadcn/ui). Da usare per artifact complessi che richiedono gestione dello stato, routing o componenti shadcn/ui - non per semplici artifact HTML/JSX a file singolo."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 3.073 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill web-artifacts-builder

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quali componenti e librerie sono già installati?

Lo script di inizializzazione crea un progetto con React 18, TypeScript tramite Vite, Tailwind CSS 3.4.1 con theming shadcn/ui, oltre 40 componenti shadcn/ui pre-installati, tutte le dipendenze Radix UI e Parcel configurato per il bundling. Gli alias di percorso sono configurati in modo da poter importare usando il prefisso at-slash.

Web Artifacts Builder

Esegui web-artifacts-builder su un task di design UI reale.

La skill web-artifacts-builder è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder