Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Artifacts Builder

Scaffolds a React + Tailwind + shadcn/ui project and bundles it into a single self-contained HTML artifact.

Dev & CodingIntermediate★ 1,866⑂ 546AI score 7/10Last updated: Jul 26, 2026

What it does

A tool suite for building elaborate, multi-component claude.ai artifacts that need state management, routing, or shadcn/ui — not for simple single-file HTML/JSX.

  • init-artifact.sh scaffolds React 18 + TypeScript + Vite + Tailwind CSS 3.4 with 40+ shadcn/ui components pre-installed
  • Auto-configures @/ path aliases, Radix UI deps, and Parcel bundling via .parcelrc
  • bundle-artifact.sh inlines all JS/CSS/assets into bundle.html, ready to share as an artifact
  • Includes design guidance to avoid "AI slop" (over-centered layouts, purple gradients, uniform rounded corners, Inter font)
  • Optional post-hoc verification with Playwright or Puppeteer

Who it's for

  • Anyone building dashboards, multi-step forms, or mini SaaS prototypes with Claude
  • Frontend developers who want the shadcn/ui look but a single-file deliverable
  • Users tired of repeating Tailwind + bundler setup boilerplate

Examples

  1. "Build a revenue dashboard artifact with tabs, charts, and dark mode" → init project, compose shadcn Tabs/Card, deliver bundle.html
  2. "Make a 3-step survey wizard with routing and saved state" → React state management bundled to one HTML file
  3. "Screenshot the artifact to confirm it renders" → bundle first, then verify with Playwright

· · · Install guide · · ·

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 /tmp/acp && mkdir -p ~/.claude/skills && cp -r /tmp/acp/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 or newer: node -v
  2. Clone the repository: git clone https://github.com/composio-community/awesome-claude-plugins.git
  3. Copy the skill into your Claude skills directory: mkdir -p ~/.claude/skills && cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/
  4. Verify that scripts/init-artifact.sh and scripts/bundle-artifact.sh came along, then make them executable: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  5. Restart Claude Code and prompt something like "build a complex React artifact with shadcn/ui".
  6. The first run installs npm dependencies and may take a few minutes.
View source on GitHub ↗