Skip to content
AI Dev Toolkit.
Esc
  • AI Token CounterCount tokens for GPT, Claude, Gemini, DeepSeek, Qwen and more.Tool
  • LLM API Cost CalculatorEstimate per-request, daily and monthly API costs.Tool
  • AI Model ComparisonCompare prices, context windows and features across models.Tool
  • AI Model Pricing PagesSpecs, real costs and cheaper alternatives for popular models.Tool
  • Context Window CheckerSee whether your text fits each model’s context window.Tool
  • Subscription vs API CalculatorFind out whether a chat plan or the API is cheaper for you.Tool
  • GPU / VRAM CalculatorCheck how much VRAM a local model needs and which GPUs fit.Tool
  • Prompt Caching CalculatorEstimate savings from prompt caching.Tool

Claude skill · Development · Anthropic

Web artifacts builder skill for Claude

Builds complex claude.ai artifacts as React, TypeScript, Tailwind and shadcn/ui projects, then bundles them into one HTML file.

Command
/web-artifacts-builder
Licence
Apache-2.0, copying allowed with attribution
Folder
5 files, 45 KB
Runs code
2 scripts

Overview

What it does

For artifacts too big for a single file. A setup script creates a Vite project with Tailwind, path aliases and about forty shadcn/ui components; Claude builds the app; a bundling script runs Parcel and inlines everything into a single bundle.html that can be shared as an artifact.

It’s meant for apps that need state, routing or many components. For a simple one-file artifact the skill says not to use it.

Triggers

When Claude uses it

  • Elaborate, multi-component artifacts that need state management, routing or shadcn/ui.
Its description, which Claude matches against
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.

What it needs

  • Node.js 18 or later and pnpm (the setup script installs pnpm globally if it’s missing). The scripts download npm packages, so they need network access.

Install

How to install it

Claude Code

Plugin (type in Claude Code)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

The example-skills plugin installs 12 skills from this repository, including this one. Its skills are then namespaced, such as /example-skills:web-artifacts-builder.

Or copy the folder (shell)
git clone --depth 1 https://github.com/anthropics/skills.git
mkdir -p ~/.claude/skills
cp -r skills/skills/web-artifacts-builder ~/.claude/skills/

That makes it a personal skill, available as /web-artifacts-builder in all your projects. Copy it into .claude/skills/ in a repository instead to share it with your team.

claude.ai and the Claude API

Zip the skill folder, then in claude.ai open Customize > Skills, choose + and Create skill, then Upload a skill. Code execution must be turned on.

Upload with the Python SDK
from anthropic import Anthropic
from anthropic.lib import files_from_dir

client = Anthropic()
skill = client.skills.create(files=files_from_dir("web-artifacts-builder"))
print(skill.id)  # use as a custom skill_id with the code execution tool

Checks

SKILL.md validator results

Its SKILL.md (74 lines) run through our SKILL.md validator, with the folder’s file list, for both targets. These check the file’s format, not whether the skill works well.

Claude Code

0 errors, 0 warnings, 1 tip

  • tipSKILL.md doesn’t mention scripts/shadcn-components.tar.gz. Say what each file is for and when to read or run it, or Claude won’t know to use it.

claude.ai and the API

0 errors, 0 warnings, 2 tips

  • tipThe Claude Help Center’s upload guide gives a 200-character description limit for claude.ai, though the platform docs say 1,024. Keep it under 200 if you’ll upload it there.
  • tipSKILL.md doesn’t mention scripts/shadcn-components.tar.gz. Say what each file is for and when to read or run it, or Claude won’t know to use it.

Folder

What’s in the folder

  • LICENSE.txt11 KB
  • SKILL.md3.0 KB
  • scripts/3 files, 31 KB

SKILL.md sections

  1. Web Artifacts Builder
  2. Design & Style Guidelines
  3. Quick Start
  4. Step 1: Initialize Project
  5. Step 2: Develop Your Artifact
  6. Step 3: Bundle to Single HTML File
  7. Step 4: Share Artifact with User
  8. Step 5: Testing/Visualizing the Artifact (Optional)
  9. Reference

Source

Licence and source

Related

More skills

All Claude skillsWrite your own skillSlash command builderGuide: subagents, skills and commands