SubmitLog in
c/frontend › command
0votes

Web artifacts builder (Anthropic)

Skill
submitted by u/client to c/frontend · 0 uses

Build multi-component React + Tailwind + shadcn/ui apps bundled into a single HTML file.

For bigger claude.ai artifacts that need state, routing or many components. Scripts set up a React and TypeScript project with Tailwind CSS and shadcn/ui pre-wired, then bundle everything into one self-contained HTML file that can be shared. It also gives style guidance to avoid generic-looking output. Needs Node.js; not meant for simple single-file artifacts.

Try asking:

  • "Build a habit tracker artifact with tabs, charts and local state"
  • "Make an interactive pricing calculator using shadcn components"
  • "Turn this React prototype into a single shareable HTML file"

Source: anthropics/skills · Apache-2.0 · by Anthropic

0 commentsreport

Install this skill

Skills are folders with a SKILL.md file. Claude loads one on its own when a task matches its description. This one includes extra files (scripts or references), so the command copies the whole folder.

Claude Code plugin (easiest, stays up to date)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Claude Code: for every project
npx degit anthropics/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder
Claude Code: this project only (commit it to share with your team)
npx degit anthropics/skills/skills/web-artifacts-builder .claude/skills/web-artifacts-builder
View SKILL.mdSource

Made by Anthropic, Apache-2.0 license. Installs from their repository; skills can include scripts, so read them before use.

In the Claude apps, zip the folder and upload it under Settings → Capabilities → Skills.

More from c/frontend

See all of c/frontend →
0 comments

Log in to join the discussion.