artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
What it is
artifacts-builder is a development & code tools skill for AI coding agents. Maintained by Anthropic. Skills are small, focused packages of instructions and tools that an agent loads on demand, so it gains this capability only when the task calls for it, keeping its context lean the rest of the time.
When to use it
Reach for artifacts-builder whenever your task falls under development & code tools. Because it ships as a portable skill, it works across Claude Code, Cursor, Codex and any agent that reads the SKILL.md format.
How to install
This is an official Anthropic skill. Add it to your `~/.claude/skills` directory (or your project's `.claude/skills`) and Claude will load it automatically when relevant.
Source
View the full skill, documentation and license at the source repository: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
Related Development & Code Tools skills
aws-skills
AWS development with CDK best practices, cost optimization MCP servers, and serverless/event-driven architecture patterns.
building-blog
Adds an SEO-first, i18n-ready blog to a Next.js + Sanity site via a 40-question intake, a one-page plan, and a 20-section spec. Includes a generator for AI hero images via Gemini 3 Pro Image (Nano Banana Pro).
Changelog Generator
Automatically creates user-facing changelogs from git commits by analyzing history and transforming technical commits into customer-friendly release notes.
Chrome Relay
Drives the user's already-open Chrome session — cookies, SSO, extensions, localhost — through a local CLI bridge. Real-Chrome counterpart to Playwright Browser Automation; install via `npx skills add chrome-relay` + a [Chrome Web Store extension](https://chromewebstore.google.com/detail/chrome-relay/cpdiapbifblhlcpnmlmfpgfjlacebokb). No remote relay, no Playwright fixtures, no MCP server needed.
Claude Code Terminal Title
Gives each Claud-Code terminal window a dynamic title that describes the work being done so you don't lose track of what window is doing what.
Connect
Connect Claude to any app. Send emails, create issues, post messages, update databases - take real actions across Gmail, Slack, GitHub, Notion, and 1000+ services.