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 with Tessl CLI
npx tessl i github:boisenoise/skills-collections --skill web-artifacts-builder91
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/skillEvaluation — 93%
↑ 1.72xAgent success when using this skill
Validation for skill structure
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%
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%
- Evaluated
- Agent
- Claude Code
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.