Artifacts Builder
This is for building complex React artifacts that go beyond simple single-file HTML. It sets up a full React 18 + TypeScript + Vite stack with Tailwind CSS and 40+ pre-installed shadcn/ui components, then bundles everything into a single HTML file that Claude can display as an artifact. You get state management, routing, and modern UI components without manual dependency wrangling. The bundling script uses Parcel to inline all JavaScript, CSS, and assets into one self-contained file. Worth noting: it explicitly warns against "AI slop" design patterns like excessive purple gradients and centered layouts, which is refreshingly self-aware. Best for interactive dashboards, multi-page apps, or anything needing proper component architecture.
- skills.sh installs
- 4.8K
- GitHub stars
- 79.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add composiohq/awesome-claude-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/composiohq/awesome-claude-skills
- Category
- Frontend Development
More from composiohq/awesome-claude-skills
All 32- Meeting Insights Analyzer4.8K
- Mcp Builder4.7K
- Connect Apps4.6K
- Connect4.6K
- Developer Growth Analysis4.6K
- Theme Factory4.6K
- Brand Guidelines4.5K
- Langsmith Fetch4.4K
- Skill Share4.4K
- Slack Gif Creator4.4K
- Internal Comms4.3K
- Raffle Winner Picker4.3K
- Template Skill4.3K
- Gmail Automation173
- Google Calendar Automation159
- Googlesheets Automation132
- Google Drive Automation112
- Tailored Resume Generator10.4K
- Content Research Writer8.7K
- Changelog Generator7.7K
- File Organizer7.3K
- Youtube Downloader6.3K
- Competitive Ads Extractor5.8K
- Lead Research Assistant5.7K
Recommended
More Frontend Development
uitw93/wazaProduces distinctive, production-grade UI for pages, components, visual interfaces, typography, and screenshot-driven polish. Use when users ask in any language4.7Kskills.sh installs
app-observabilitygrafana/skillsGet RED metrics + service maps + frontend RUM + AI/LLM monitoring out of Grafana Cloud — Application Observability (`traces_spanmetrics_*` from OTel traces, p504.7Kskills.sh installs
cosscosscom/cossHelps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), 4.7Kskills.sh installs
uniwinduni-stack/uniwindUniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. C4.6Kskills.sh installsapp-sdk-conceptsgrafana/skillsUse when starting any grafana-app-sdk work — scaffolding a Grafana app, initializing a Grafana App Platform app, picking a deployment mode (standalone operator 4.5Kskills.sh installstestinggrafana/skillsProbe, load-test, and instrument frontends from Grafana Cloud. Covers Synthetic Monitoring (HTTP / DNS / TCP / Ping / Traceroute / Multihttp / k6-browser script4.5Kskills.sh installs