Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
web-artifacts-builder
web-artifacts-builder is an open-source frontend skill for claude.ai, published by anthropics. Its author describes it as: “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, o…”. The project has 167k stars on GitHub and does not declare a license, so check with the author before reuse. Add it to your setup with `/plugin marketplace add anthropics/skills`.
Installation
Add web-artifacts-builder to your agent with:
/plugin marketplace add anthropics/skillsAlways review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.
When to use it
Reach for web-artifacts-builder when you want frontend help from claude.ai without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.
Strengths
- Ships in anthropics/skills, an established project with 166,577 GitHub stars
- Declares compatibility with claude.ai
- Actively maintained (recent commits)
Things to check
- No license declared — confirm terms with the author before reuse
Topics
Frequently asked questions
- What does web-artifacts-builder do?
- 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.
- How do I install web-artifacts-builder?
- Run /plugin marketplace add anthropics/skills in your agent, then reload your skills. Review the source at https://github.com/anthropics/skills before installing.
- Is web-artifacts-builder free to use?
- web-artifacts-builder is publicly available on GitHub, but anthropics has not declared a standard open-source license (No license). Confirm the terms with the author before reusing it.
- Which agents does web-artifacts-builder work with?
- web-artifacts-builder declares compatibility with claude.ai. Agent Skills use a portable SKILL.md format, so other compatible clients can usually load it too.
- Where does web-artifacts-builder come from?
- web-artifacts-builder ships inside anthropics/skills, a repository that contains 19 catalogued skills in total. The repository's 166,577 GitHub stars apply to that whole collection, not to this skill on its own.
Related skills
More Frontend →Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Phase 1 sample plugin synthesizing a SKILL.md frontmatter for backwards-compat tests.
Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.