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.

2.50x

Quality

70%

Does it follow best practices?

Impact

95%

2.50x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./plugins/all-skills/skills/artifacts-builder/SKILL.md

Evaluation results

93%

56%

Team Roster & Performance Dashboard

Anti-AI-slop design and shadcn/ui components

Criteria

Without context

With context

No excessive centering

50%

41%

No purple/violet gradients

100%

No uniform rounded corners

90%

100%

No Inter font

100%

shadcn/ui Card component

100%

shadcn/ui component usage

100%

TypeScript source files

100%

Tailwind utility classes used

100%

React component structure

100%

Realistic fabricated data

100%

64%

Expense Tracker Artifact

Bundling pipeline: parcel, html-inline, .parcelrc config

Criteria

Without context

With context

Parcel bundler used

100%

parcel-resolver-tspaths included

100%

html-inline included

100%

.parcelrc resolvers config

100%

pnpm package manager

100%

No source maps flag

100%

html-inline step present

100%

bundle.html produced

100%

bundle.html is self-contained

100%

No intermediate build artifacts

100%

Correct Tailwind version

100%

92%

49%

Recipe Browser Artifact

Workflow order, path aliases, and CSS variable theming

Criteria

Without context

With context

Init before develop

100%

Develop before bundle

100%

Bundle before display

100%

Testing is last or absent

100%

@/ path aliases in imports

100%

Path alias tsconfig config

100%

Path alias vite config

100%

CSS variable theming

100%

Tailwind references CSS vars

100%

pnpm in workflow

React + TypeScript stack

100%

Tailwind 3.4.1 version

50%

100%

Repository: davepoon/buildwithclaude
Commit: 7cc63f3

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

Table of Contents

Team Roster & Performance Dashboard Expense Tracker Artifact Recipe Browser Artifact

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.