web-artifacts-builder

anthropics / skills

About web-artifacts-builder

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.

Install web-artifacts-builder

npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Basic information

What it does

Scaffolds React 18 + TypeScript projects with Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components via automated initialization script
Bundles complete artifacts into single self-contained HTML files with inlined assets, ready for Claude artifact display
Includes design guidance to avoid common "AI slop" patterns like excessive centering, purple gradients, and uniform rounded corners
Supports complex workflows requiring routing, state management, and Radix UI dependencies out of the box

More skills in Design & UI

frontend-design

anthropics / skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

grill-me

mattpocock / skills

A relentless interview to sharpen a plan or design.

web-design-guidelines

vercel-labs / agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

grill-with-docs

mattpocock / skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

lark-event

larksuite / cli

Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, Task updates, VC meeting started/joined/ended, Minutes generated, Whiteboard updated, etc.). Use for Lark bots, real-time message processing, long-running subscribers, streaming webhook/push handlers. Supports `--max-events` / `--timeout` bounded runs and a stderr ready-marker contract — designed for AI agents running as subprocesses.

prototype

mattpocock / skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.