Featured

artifacts-builder

Name: artifacts-builder
Rating: 5 (12368 reviews)
Author: davila7

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

TL;DR

Tools for creating complex, stateful React artifacts with shadcn/ui and Tailwind CSS, bundled into single HTML files.

What Is It

Suite of tools for building multi-component React artifacts
Uses modern frontend tech: React, TypeScript, Tailwind CSS, shadcn/ui
Bundles code into single HTML for sharing in Claude
Designed for complex, stateful UIs, not simple HTML/JSX

Key Features

Uses React 18 + TypeScript + Vite + Parcel
Includes 40+ shadcn/ui components with theming
Path aliases and Radix UI dependencies pre-configured
Bundles all assets into single HTML file
Self-contained artifacts with no external dependencies
Avoids AI slop: no purple gradients, centered layouts, Inter font
Supports state management and routing
No source maps in production builds

How to Use

1.Run `scripts/init-artifact.sh` to create project
2.Edit generated files to develop artifact
3.Run `scripts/bundle-artifact.sh` to create bundle.html
4.Share bundle.html as artifact with user
5.Optional: test with tools like Playwright or Puppeteer

Guardrails & Gotchas

VERY IMPORTANT: Avoid excessive centered layouts
VERY IMPORTANT: Avoid purple gradients
VERY IMPORTANT: Avoid uniform rounded corners
VERY IMPORTANT: Avoid Inter font
Must have index.html in root directory
Do not test upfront; test only if requested or needed

GitHub Stats

Author

@davila7

Repository

davila7/claude-code-templates

Stars

12368

Explore More Skills

move-code-quality

@davila7

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working with .move files or Move.toml manifests.

12.4k

1.1k

6d ago

artifacts-builder

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns