Web Artifacts Builder
This is your go-to when you need to build complex Claude artifacts with React, TypeScript, and shadcn/ui components. It handles the full workflow: spins up a preconfigured Vite project with 40+ shadcn components already installed, lets you develop with proper state management and routing, then bundles everything into a single HTML file that works as a Claude artifact. The bundling step uses Parcel with inline assets so you get one shareable file. Worth noting the explicit anti-slop guidance about avoiding purple gradients and centered layouts. Skip this for simple single-file HTML stuff, but when you need actual component architecture or shadcn's design system, it beats manual setup every time.
- skills.sh installs
- 334
- GitHub stars
- 33.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add davila7/claude-code-templates --skill web-artifacts-builder --agent claude-codeInstalls into .claude/skills of the current project.
Files
Web 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/davila7/claude-code-templates
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from davila7/claude-code-templates
All 618- Move Code Quality333
- Email Sequence332
- Nemo Guardrails332
- Optimizing Attention Flash332
- Figma331
- Zapier Workflows330
- Scikit Survival329
- Axolotl328
- Developer Growth Analysis328
- Alphafold Database326
- Llm App Patterns326
- Gh Fix Ci325
- Pyhealth325
- Scanpy325
- Aeon324
- Web To Markdown322
- Biomni321
- Constitutional Ai321
- Nanogpt320
- Sglang320
- Uspto Database318
- Receiving Code Review317
- Transformer Lens Interpretability317
- Skypilot Multi Cloud Orchestration316
Recommended
More Frontend Development
vercel-composition-patternspedronauck/skillsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reus334skills.sh installs
artifacts-builderbobmatnyc/claude-mpm-skillsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui)333skills.sh installs
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