artifacts-builder

anthropics/skills · Agent Skill

Costruisce artefatti web interattivi: applicazioni a pagina singola, dashboard e giochi con la struttura corretta.

Panoramica

Autore	anthropicsOrganizzazione
Repository	anthropics/skills ↗
Cartella dello skill	`web-artifacts-builder`
Stelle	176.064
File inclusi	solo SKILL.md
Licenza	non indicata — verifica con l'autore
Link	Sorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza

rischio basso · nessun rischio evidente — il report completo mostra i dettagli

Compatibilità

solo istruzioni — funziona con la maggior parte degli agenti

Skill simili

144 skill simili trovati

Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

Install the “artifacts-builder” skill from mozgi.io (https://mozgi.io/skills/artifacts-builder/) for me.

1. Take the skill folder from the source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “artifacts-builder” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/artifacts-builder/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/web-artifacts-builder .claude/skills/web-artifacts-builder

Riavvia Claude Code: lo skill compare nell'elenco; per richiamarlo a mano usa /artifacts-builder. Per tutti i progetti: ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .agents/skills
cp -r /tmp/skills/skills/web-artifacts-builder .agents/skills/web-artifacts-builder

Codex cerca gli skill in .agents/skills dalla cartella corrente fino alla radice del repo; richiamalo con /skills o $artifacts-builder. Per tutti i progetti: ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .cursor/skills
cp -r /tmp/skills/skills/web-artifacts-builder .cursor/skills/web-artifacts-builder

Cursor carica lo skill all'avvio; richiamalo con “/” nella chat Agent. Cursor legge anche .claude/skills e .agents/skills. Per tutti i progetti: ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .gemini/skills
cp -r /tmp/skills/skills/web-artifacts-builder .gemini/skills/web-artifacts-builder

Gemini CLI propone di attivare lo skill quando il compito corrisponde: tu confermi. Per tutti i progetti: ~/.gemini/skills.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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

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

Domande frequenti

Che cosa fa lo skill artifacts-builder?

Costruisce artefatti web interattivi: applicazioni a pagina singola, dashboard e giochi con la struttura corretta.

Come si installa artifacts-builder?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona artifacts-builder?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi artifacts-builder funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

artifacts-builder è gratuito?

Lo skill è pubblicato apertamente da anthropics. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati. Nel repository non è indicata una licenza: verifica le condizioni con l'autore prima di un uso commerciale.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →

mcp-builder Assiste nella progettazione e costruzione di server MCP: struttura del progetto, strumenti, risorse e test del protocollo. anthropics176k

webapp-testing Testare applicazioni web tramite automazione del browser: scenari, controlli dell'interfaccia utente e debug. anthropics176k

claude-md-improver Uno strumento per controllare e migliorare i file CLAUDE.md nei repository. Scansiona il progetto, valuta la qualità della documentazione rispetto ai template, genera report e applica aggiornamenti mirati per ottimizzare il contesto del progetto. anthropics43.8k

playground Strumento per creare playground HTML interattivi con controlli visivi, anteprima dal vivo e generazione di prompt. Consente agli utenti di configurare parametri e visualizzare concetti complessi in un unico file. anthropics43.8k

hook-development Strumento per lo sviluppo e l'implementazione di hook basati su eventi per i plugin di Claude Code. Consente la convalida delle chiamate, l'automazione dei flussi e la gestione delle sessioni tramite API avanzate. anthropics43.8k

agent-transcript Aggiunge una trascrizione dell'agente redatta ai corpi di PR o issue di GitHub nei flussi di lavoro creati dall'agente OpenClaw. openclaw389k