Skill · em Construir interface
web-artifacts-builder
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.
Procedência
- Origem: anthropics/skills
- Caminho:
skills/web-artifacts-builder - Versão fixada:
33375500bcea98d610eb30ce10ac4e59b89c390d - Licença: Apache-2.0
- Espelhado em 25/09/2026
- 103,5 mil instalações no skills.sh (lido em 25/09/2026)
Antes de instalar
5 arquivos · 44,8 KB · inclui 2 scripts que executam: scripts/bundle-artifact.sh, scripts/init-artifact.sh
Instalar na sua CLI
O comando baixa a versão fixada (commit 3337550) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.
Claude Code
Neste projeto: instala em .claude/skills/web-artifacts-builder/.
d=".claude/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Global: instala em ~/.claude/skills/web-artifacts-builder/.
d="$HOME/.claude/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Codex
Neste projeto: instala em .agents/skills/web-artifacts-builder/.
d=".agents/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Global: instala em ~/.agents/skills/web-artifacts-builder/.
d="$HOME/.agents/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Antigravity
Neste projeto: instala em .agents/skills/web-artifacts-builder/.
d=".agents/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Global: instala em ~/.gemini/antigravity-cli/skills/web-artifacts-builder/.
d="$HOME/.gemini/antigravity-cli/skills/web-artifacts-builder" u="https://raw.githubusercontent.com/anthropics/skills/33375500bcea98d610eb30ce10ac4e59b89c390d/skills/web-artifacts-builder" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE.txt" "$u/LICENSE.txt" \ -o "$d/scripts/bundle-artifact.sh" "$u/scripts/bundle-artifact.sh" \ -o "$d/scripts/init-artifact.sh" "$u/scripts/init-artifact.sh" \ -o "$d/scripts/shadcn-components.tar.gz" "$u/scripts/shadcn-components.tar.gz"
Peça ao Rook
Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/anthropic.web-artifacts-builder
Prévia do SKILL.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.
license: Complete terms in LICENSE.txt
---
# 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
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)
…