web-artifacts-builder

How to install web-artifacts-builder

npx skills add anthropics/skills --skill web-artifacts-builder -a claude-code

The skills CLI copies this one skill into Claude Code (use -a for another agent). Or read its SKILL.md on GitHub.

What the SKILL.md says

To build powerful frontend claude.ai artifacts, follow these steps: Initialize the frontend repo using scripts/init-artifact.sh. Develop your artifact by editing the generated code. Bundle all code into a single HTML file using scripts/bundle-artifact.sh. Display artifact to user. (Optional) Test the artifact. Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui 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. Run the initialization script to create a new React project: 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.

Other skills in anthropics/skills

• academy-guide Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching cou…
• algorithmic-art Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art…
• brand-guidelines Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Us…
• canvas-design Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a po…
• claude-api Reference for the Claude API / Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model…
• discernment-nudge After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans,…
• doc-coauthoring Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical…
• docx Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). T…
• frontend-design Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typo…
• internal-comms A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use…
• mcp-builder Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-desig…
• pdf Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining…
• pptx Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitc…
• skill-creator Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, e…
• slack-gif-creator Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use…
• theme-factory Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set…
• webapp-testing Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI b…
• xlsx Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, o…