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.
92
82%
Does it follow best practices?
Impact
93%
1.75xAverage score across 10 eval scenarios
Passed
No findings from the security scan
The canonical home for this skill is web-artifacts-builder in anthropics/skills
Evaluation results
0%
Employee Directory Dashboard
Project initialization workflow
Init script usage
0%
Project name argument
0%
pnpm package manager
0%
TypeScript source files
0%
Vite configuration present
0%
Tailwind CSS configured
0%
Path alias configured
0%
shadcn components directory
0%
Bundle script usage
0%
bundle.html output
0%
index.html in root
0%
26%
Interactive Quiz Widget
Bundling and build pipeline
Bundle script used
0%
bundle.html produced
0%
Parcel bundler used
0%
.parcelrc config exists
0%
No source maps in build
100%
html-inline used
0%
Init step documented
0%
Workflow order correct
100%
pnpm used
0%
index.html in project root
0%
Self-contained HTML
100%
0%
Interactive Settings Panel
shadcn/ui component usage and imports
Tabs from shadcn/ui
0%
Input from shadcn/ui
0%
Switch from shadcn/ui
0%
Select from shadcn/ui
0%
Slider from shadcn/ui
0%
Checkbox from shadcn/ui
0%
@/ path alias imports
0%
TypeScript with types
0%
Tailwind utility classes
0%
No purple gradients
0%
RadioGroup from shadcn/ui
0%
bundle.html output
0%
30%
Personal Finance Tracker Landing Page
Anti-slop design and styling
No purple gradients
100%
No Inter font
100%
Non-centered hero layout
0%
Varied border radius
100%
Tailwind CSS usage
0%
shadcn/ui Button component
0%
shadcn/ui Card component
0%
TypeScript source
0%
lucide-react icons
0%
CSS variables theming
0%
bundle.html output
0%
24%
Task Management Board
Full stack and utility library usage
React 18 used
0%
next-themes for dark mode
0%
shadcn/ui Dialog component
0%
shadcn/ui Badge component
0%
shadcn/ui Avatar component
0%
lucide-react icons
0%
cn utility function
0%
CSS variables dark mode
100%
No excessive centering
100%
No Inter font
100%
tailwindcss-animate plugin
0%
bundle.html output
0%
- Repository
- ThinkInAIXYZ/deepchat
- Commit
b8dbc89
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.