Language:JapaneseEnglish

web-artifacts-builder Claude Code Skill

Author
Anthropic
Topics
Web & App Development · Claude Code Customization & Workflow · Design & Media Production
License
Apache-2.0(opens in a new tab)
First cataloged
2026-07-09 (UTC)
Explanation last updated
2026-10-28 (UTC)
Source (GitHub) last updated
2026-04-20 (UTC) (198 days ago)

The explanation below is AI-generated. Please verify it against the sources.

This skill is a workflow and script toolkit for building complex, multi-component HTML artifacts for claude. ai using React, TypeScript, Vite, Tailwind CSS, and shadcn/ui. According to the SKILL. md, it is intended for artifacts that need state management, routing, or shadcn/ui components, rather than simple single-file HTML or JSX artifacts. The process involves initializing a pre-configured frontend project with a script, editing the generated code to build the artifact, then bundling everything into one self-contained HTML file for sharing. An optional final step allows testing or visualizing the artifact using tools such as Playwright or Puppeteer. The SKILL.

What you can do with web-artifacts-builder

  • Initialize a React + TypeScript + Vite project pre-configured with Tailwind CSS and over 40 shadcn/ui components
  • Develop multi-component artifacts that require state management, routing, or shadcn/ui UI elements
  • Bundle the finished project into a single self-contained HTML file using the provided bundling script
  • Share the bundled HTML file directly as a claude.ai artifact
  • Optionally test or visualize the artifact afterward using tools like Playwright or Puppeteer
  • Apply design guidance intended to avoid generic, templated-looking AI output

Sources

Back to list