CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./artifacts-builder/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

50%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is command-driven and well sectioned, but it is held to a 2 across dimensions by a missing 'Common Development Tasks' section referenced in Step 2, an absence of validation checkpoints, and some explanatory bundler detail that could be cut.

Suggestions

Resolve the broken reference: either add a 'Common Development Tasks' section with concrete development guidance or remove the 'See Common Development Tasks below' pointer in Step 2.

Add a validation/verification checkpoint after bundling (e.g., open bundle.html or run a quick build check) before the 'Share Artifact' step.

Trim the 'What the script does' install-detail bullets to keep the body lean, since Claude already understands how bundlers and inlining work.

DimensionReasoningScore

Conciseness

Mostly efficient with command-first steps, but the 'What the script does' install bullets (parcel, @parcel/config-default, html-inline) explain bundler mechanics Claude already knows and could be trimmed.

2 / 3

Actionability

Concrete executable commands exist for steps 1 and 3, but Step 2 says 'See Common Development Tasks below' — a section that does not exist — leaving the core development step without guidance.

2 / 3

Workflow Clarity

A clear numbered 5-step sequence is present, but there are no validation or verification checkpoints (e.g., confirming the bundle builds or renders) before sharing the artifact.

2 / 3

Progressive Disclosure

Sections are well organized and referenced scripts (scripts/init-artifact.sh, scripts/bundle-artifact.sh) are real files, but most detail lives inline in SKILL.md and the dangling 'Common Development Tasks' reference weakens navigation.

2 / 3

Total

8

/

12

Passed

Description

90%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description with an explicit trigger clause and a helpful negative boundary that sharply scopes the skill. The only weakness is that the capability list centers on one verb ('creating') rather than enumerating several concrete actions.

DimensionReasoningScore

Specificity

Names the domain ('claude.ai HTML artifacts') and concrete tech (React, Tailwind, shadcn/ui) but the only real verb is 'creating' rather than a list of multiple distinct actions.

2 / 3

Completeness

Explicitly answers what ('creating elaborate, multi-component claude.ai HTML artifacts') and when ('Use for complex artifacts requiring state management, routing, or shadcn/ui components'), plus a negative boundary.

3 / 3

Trigger Term Quality

Includes natural terms a user would say when requesting this — 'artifacts', 'React', 'shadcn/ui', 'state management', 'routing', 'HTML/JSX'.

3 / 3

Distinctiveness Conflict Risk

Clear niche (multi-component claude.ai artifacts) and an explicit negative boundary ('not for simple single-file HTML/JSX artifacts') keeps it from triggering for generic HTML work.

3 / 3

Total

11

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
Prat011/awesome-llm-skills
Reviewed

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.