Artifacts Builder
This is a workflow for building complex React artifacts that compile down to single HTML files you can share in Claude conversations. It scaffolds a full React + TypeScript + Tailwind + shadcn/ui project, lets you develop with proper tooling, then bundles everything into one self-contained file. The real value is in skipping the usual "just inline some jQuery" approach when you need actual state management or a component library. The scripts handle the Vite setup, pre-install 40+ shadcn components, and run Parcel to inline all assets. It even calls out avoiding "AI slop" design patterns like excessive purple gradients and centered layouts, which is refreshingly self-aware.
- skills.sh installs
- 333
- GitHub stars
- 79
- last updated
- Aug 21, 2026
Install
$ npx -y skills add bobmatnyc/claude-mpm-skills --skill artifacts-builder --agent claude-codeInstalls into .claude/skills of the current project.
Files
Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (Optional) Test the artifact
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Quick Start
Step 1: Initialize Project
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (
@/) configured - ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/bobmatnyc/claude-mpm-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from bobmatnyc/claude-mpm-skills
All 158- Vercel Ai333
- Terraform332
- Validated Handler332
- Bad Example Skill329
- Emergency Release Workflow328
- Digitalocean Teams327
- Vector Search Workflows324
- Vercel Storage Data324
- Example Framework Skill323
- Vercel Teams Billing320
- Spring Boot319
- Rust Desktop Applications263
- Api Security Review257
- Anthropic Sdk254
- Testing Anti Patterns226
- Root Cause Tracing216
- Mcp206
- Tauri Event System203
- Condition Based Waiting199
- Mcp Builder188
- Writing Plans187
- Dispatching Parallel Agents185
- Requesting Code Review182
- Webapp Testing Patterns181
Recommended
More Frontend Development
bun-tanstack-startsecondsky/claude-skillsTanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.329skills.sh installscloudflare-workers-frameworkssecondsky/claude-skillsFramework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, stat321skills.sh installs
slidev-stylingyoanbernabeu/slidev-skillsStyle Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.320skills.sh installs
gh-pages-deployaviz85/claude-skills-libraryDeploy static or interactive frontend content to GitHub Pages using gh CLI. Use when the user wants to publish, share, or make accessible any HTML/CSS/JS conten312skills.sh installs
web-design-methodologyjezweb/claude-skillsUniversal web design implementation methodology — BEM, responsive, accessibility, CSS architecture, spacing systems, dark mode. The HOW of building production-g311skills.sh installsclerk-authjezweb/claude-skillsClerk auth with API Keys beta (Dec 2025), Next.js 16 proxy.ts (March 2025 CVE context), API version 2025-11-10 breaking changes, clerkMiddleware() options, webh310skills.sh installs