Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Artifacts Builder

Scaffolds React + Tailwind + shadcn/ui projects and bundles them into a single self-contained HTML artifact for claude.ai.

Design & UIIntermediate★ 1,980⑂ 630AI score 8/10Last updated: Jul 26, 2026

What it does

  • Runs scripts/init-artifact.sh to scaffold a React 18 + TypeScript + Vite project with Tailwind CSS 3.4.1, 40+ preinstalled shadcn/ui components, Radix UI dependencies, and @/ path aliases.
  • After you edit the code, scripts/bundle-artifact.sh uses Parcel plus html-inline to inline all JS, CSS, and assets into one self-contained bundle.html.
  • That single file can be shared directly in a Claude conversation as an artifact.
  • Includes design guardrails to avoid "AI slop": no excessive centered layouts, purple gradients, uniform rounded corners, or default Inter font.
  • Testing with Playwright/Puppeteer is explicitly optional and deferred so the artifact ships faster.

Who it's for

  • Anyone building multi-component artifacts that need state management, routing, or shadcn/ui
  • Frontend developers and designers shipping interactive dashboards or demos as one portable file
  • Not for simple single-file HTML/JSX artifacts — it would be overkill

Examples

  1. "Build a revenue dashboard artifact with shadcn/ui tables and charts" → init project → write components → share bundle.html
  2. "Make a multi-step survey tool with tabbed navigation as one HTML file" → routed, stateful app bundled into a single file
  3. "Bundle my existing React project into a shareable HTML artifact" → run only the bundle script to produce inlined HTML

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/HEAD/artifacts-builder/skills/artifacts-builder/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the artifacts-builder/skills/artifacts-builder folder from the GitHub repo composio-community/awesome-claude-plugins into my ~/.claude/skills/artifacts-builder/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/composio-community/awesome-claude-plugins.git && mkdir -p ~/.claude/skills && cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and confirm Node.js 18+ with node -v.
  2. Clone the repo: git clone https://github.com/composio-community/awesome-claude-plugins.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/
  5. Make the scripts executable: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  6. Restart Claude Code and ask something like "use artifacts-builder to create a dashboard artifact".
  7. Expect a few minutes on first run while npm installs dependencies.
View source on GitHub ↗