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.
81
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Evaluation results
93%
56%Team Roster & Performance Dashboard
Anti-AI-slop design and shadcn/ui components
No excessive centering
50%
41%
No purple/violet gradients
0%
100%
No uniform rounded corners
90%
100%
No Inter font
0%
100%
shadcn/ui Card component
0%
100%
shadcn/ui component usage
0%
100%
TypeScript source files
100%
100%
Tailwind utility classes used
0%
100%
React component structure
100%
100%
Realistic fabricated data
100%
100%
Without context: $0.6163 · 2m 40s · 22 turns · 75 in / 13,047 out tokens
With context: $0.7794 · 3m 1s · 32 turns · 793 in / 8,788 out tokens
100%
64%Expense Tracker Artifact
Bundling pipeline: parcel, html-inline, .parcelrc config
Parcel bundler used
0%
100%
parcel-resolver-tspaths included
0%
100%
html-inline included
0%
100%
.parcelrc resolvers config
0%
100%
pnpm package manager
0%
100%
No source maps flag
0%
100%
html-inline step present
0%
100%
bundle.html produced
100%
100%
bundle.html is self-contained
100%
100%
No intermediate build artifacts
100%
100%
Correct Tailwind version
100%
100%
Without context: $0.5619 · 2m 4s · 32 turns · 39 in / 7,169 out tokens
With context: $0.9692 · 3m 20s · 38 turns · 1,355 in / 10,226 out tokens
92%
49%Recipe Browser Artifact
Workflow order, path aliases, and CSS variable theming
Init before develop
100%
100%
Develop before bundle
100%
100%
Bundle before display
100%
100%
Testing is last or absent
100%
100%
@/ path aliases in imports
0%
100%
Path alias tsconfig config
0%
100%
Path alias vite config
0%
100%
CSS variable theming
0%
100%
Tailwind references CSS vars
0%
100%
pnpm in workflow
0%
0%
React + TypeScript stack
100%
100%
Tailwind 3.4.1 version
50%
100%
Without context: $0.7751 · 3m 40s · 30 turns · 35 in / 13,796 out tokens
With context: $0.9906 · 4m 32s · 34 turns · 1,040 in / 14,920 out tokens
- Evaluated
- Agent
- Claude Code
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.