Artifacts Builder
This is your go-to when you need Claude to build complex HTML artifacts with React, TypeScript, and shadcn/ui components. It sets up a full Vite project, lets you develop with proper state management and routing, then bundles everything into a single HTML file that works as a Claude artifact. The stack is React 18, Tailwind CSS, and 40+ pre-installed shadcn/ui components. Worth noting: it specifically calls out avoiding "AI slop" design patterns like excessive centering and purple gradients, which is refreshingly honest. Skip this for simple single-file HTML artifacts, but reach for it when you need real component architecture.
- skills.sh installs
- 355
- GitHub stars
- 33.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add davila7/claude-code-templates --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/davila7/claude-code-templates
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from davila7/claude-code-templates
All 618- Blip 2 Vision Language355
- Programmatic Seo355
- Biopython354
- Production Code Audit354
- Model Pruning353
- Fda Consultant Specialist352
- Voice Ai Development351
- Evaluating Code Models350
- Geo Database350
- Notion Spec To Implementation350
- Training Llms Megatron350
- Changelog Generator349
- Performance Profiling349
- Server Management349
- Tensorrt Llm349
- Deslop348
- Algorithmic Art347
- Email Systems347
- Faiss347
- Voice Agents347
- Git Pushing346
- Brand Guidelines344
- Paid Ads344
- Guidance343
Recommended
More Frontend Development
auto-animatejezweb/claude-skillsZero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bu355skills.sh installs
env-managerbobmatnyc/claude-mpm-skillsEnvironment variable validation, security scanning, and management for Next.js, Vite, React, and Node.js applications350skills.sh installscloudflare-turnstilejezweb/claude-skillsAdd bot protection with Turnstile (CAPTCHA alternative). Use when: protecting forms, securing login/signup, preventing spam, migrating from reCAPTCHA, integrati348skills.sh installs
uniwindpproenca/dot-skillsUniwind best practices for React Native styling with Tailwind CSS. This skill should be used when writing, reviewing, or refactoring React Native code using Uni348skills.sh installs
symfony-uxsmnandre/symfony-ux-skillsSymfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when t345skills.sh installs