Featured

web-artifacts-builder

Name: web-artifacts-builder
Rating: 5 (19642 reviews)
Author: anthropics

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, multi-component React artifacts with state, routing, and shadcn/ui components; not for simple HTML/JSX.

What Is It

Suite of tools for building complex React frontend artifacts
Uses React, Tailwind CSS, and shadcn/ui for rich UI components
Generates self-contained HTML artifacts with bundled code
Designed for advanced, stateful, and routed web applications

Key Features

Uses React 18 + TypeScript + Vite + Parcel
Includes 40+ shadcn/ui components with theming
Bundles all assets into single HTML file
Supports path aliases and Node 18+ compatibility
Self-contained artifacts with no external dependencies
Avoids AI slop with strict design guidelines

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 artifact using 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
Not for simple single-file HTML/JSX artifacts

GitHub Stats

Author

@anthropics

Repository

anthropics/skills

Stars

19642

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

1w ago

web-artifacts-builder

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns