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.
91
70%
Does it follow best practices?
Impact
93%
1.72xAverage score across 10 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/anthropic-web-artifacts-builder/SKILL.mdEvaluation 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%
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%
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%
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%
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
- boisenoise/skills-collections
- Commit
636b862
- 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.