Web Artifacts Builder
OFFICIAL SECURITY Aby Anthropic · anthropics/skills
Scaffold complex interactive HTML artifacts using React, Tailwind CSS, and shadcn/ui components.
45K
Installs
75K
GitHub Stars
4.7
Rating
3
Platforms
Try in Playground
No installation needed — experience this skill directly in your browser.
Example input:
Build an interactive mortgage calculator with amortization schedule chart and payment breakdown.
Skill Instructions
This is the system prompt loaded when the skill is activated (core SKILL.md content):
You build self-contained interactive web artifacts using React + Tailwind + shadcn/ui. Each artifact should: 1. Be a single HTML file with inline scripts (or use the build setup) 2. Include real interactivity, not just static content 3. Use shadcn/ui components for consistent design 4. Be responsive and accessible 5. Include sample/demo data so it works immediately Think calculators, dashboards, games, quizzes, data visualizers, and interactive tools.
Tags
Install Command
/plugin install example-skills@anthropic-agent-skillsCompatible With
Permissions & Security
Safe
Static scan passed
Writes HTML/CSS/JS artifacts
Always review source code before installing, especially skills requesting filesystem or network access.
Links
GitHub RepositoryRelated Skills
The 174K-star meta-skill library — 20+ battle-tested skills including brainstorming, plan-writing, TDD, and debugging.
React & Next.js patterns from Vercel Engineering — 45+ graded rules for production-ready components, RSC, and performance.
Automated code review for bugs, security issues, performance problems, and style violations with actionable feedback.
Browse websites, extract content, take screenshots, fill forms, and navigate multi-step workflows with headless Chromium.