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.

1.25x

Quality

77%

Does it follow best practices?

Impact

78%

1.25x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./data/03-developer-artifactsbuilder/SKILL.md

Evaluation results

94%

Editorial Studio Portfolio Page

Anti-AI-slop design adherence

Criteria

Without context

With context

No Inter font

100%

No purple gradient dominance

100%

Non-centered primary layout

100%

Varied border-radius

100%

80%

React used

100%

Tailwind CSS classes

100%

Self-contained bundle

100%

60%

Not monochromatic purple/blue palette

100%

Distinct card layouts

70%

100%

TypeScript source

100%

Without context: $0.9050 · 3m 58s · 43 turns · 49 in / 12,669 out tokens

With context: $1.0960 · 4m 26s · 46 turns · 229 in / 14,617 out tokens

80%

30%

Sales Performance Dashboard

Correct tech stack and bundle output

Criteria

Without context

With context

bundle.html produced

100%

React 18 dependency

100%

TypeScript configured

100%

Tailwind CSS dependency

100%

shadcn/ui or Radix UI components

Path alias configured

100%

TypeScript typed source

100%

Self-contained HTML

100%

Component architecture

Parcel bundler used

100%

Without context: $0.6841 · 3m 12s · 35 turns · 83 in / 10,112 out tokens

With context: $1.0248 · 3m 53s · 51 turns · 55 in / 12,551 out tokens

60%

10%

Employee Onboarding Checklist Tool

shadcn/ui component integration

Criteria

Without context

With context

shadcn/ui Card component

shadcn/ui Button component

shadcn/ui Checkbox or Progress

React state management

100%

TypeScript typed props

100%

Tailwind CSS styling

bundle.html self-contained

100%

No test files produced

100%

No Inter font

100%

React 18 + TypeScript stack

100%

Without context: $0.6310 · 3m 3s · 31 turns · 79 in / 9,447 out tokens

With context: $0.8171 · 3m 21s · 40 turns · 294 in / 10,598 out tokens

Repository: majiayu000/claude-skill-registry-data
Commit: 2bbaa03

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Editorial Studio Portfolio Page Sales Performance Dashboard Employee Onboarding Checklist Tool

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.