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.

61

Quality

71%

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

61%Weight 40%Scale 1-5

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

A well-structured, mostly concise build workflow with concrete commands for initialization and bundling. Its weaknesses are a dangling reference to a missing 'Common Development Tasks' section that leaves the development step without actionable guidance, and an absence of validation checkpoints across the workflow.

Suggestions

Add the missing 'Common Development Tasks' section (or remove the dangling reference) with concrete development guidance — e.g., example shadcn component imports, where to place app code, and how to wire routing/state management — so the core build step is actionable.

Insert explicit validation checkpoints between steps, such as verifying the project scaffold ran cleanly after Step 1 and confirming bundle.html exists and renders after Step 3, to make the workflow more robust.

De-duplicate the intro 5-step list against the Quick Start section and trim the ✅ marketing checklist to tighten token usage without losing information.

DimensionReasoningScore

Conciseness

The body is mostly lean, assumes Claude knows React/Tailwind, and earns its tokens with concrete commands and a useful anti-'AI slop' design note; minor padding comes from the duplicated 5-step intro list repeated again as Quick Start and the marketing-style ✅ checklist.

4 / 5

Actionability

Init and bundle steps give copy-paste-ready bash commands backed by real scripts, but the core 'develop your artifact' step (Step 2) points to a 'Common Development Tasks' section that does not exist, leaving the most important step without concrete, executable guidance.

3 / 5

Workflow Clarity

The five steps are clearly numbered and sequenced, but there are no validation checkpoints between them (e.g., verify the project initialized, verify bundle.html was produced and opens), matching the 'sequence present but checkpoints missing' anchor.

3 / 5

Progressive Disclosure

Clear sectioned overview that points to real bundle files (scripts/init-artifact.sh, scripts/bundle-artifact.sh) and a one-level external reference (shadcn docs URL); the one organization gap is the dangling 'Common Development Tasks' reference pointing to a nonexistent section.

4 / 5

Total

14

/

20

Passed

Description

82%Weight 40%Scale 1-5

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, third-person description that clearly states what the skill does and when to use it, with an explicit negative boundary that reduces conflict risk. Its main weakness is that it describes one action ('creating') rather than enumerating several concrete capabilities.

DimensionReasoningScore

Specificity

It names the domain concretely ('creating elaborate, multi-component claude.ai HTML artifacts' with React, Tailwind, shadcn/ui) but essentially lists one action ('creating') rather than several distinct concrete actions, so it sits at the 'domain + 1-2 actions' anchor rather than the 'several specific actions' anchor.

3 / 5

Completeness

It explicitly answers both 'what' (suite of tools for creating multi-component React/Tailwind/shadcn artifacts) and 'when' ('Use for complex artifacts requiring state management, routing, or shadcn/ui components'), plus a concrete negative boundary ('not for simple single-file HTML/JSX artifacts').

5 / 5

Trigger Term Quality

Natural terms a user would say are well covered ('HTML artifacts', 'React', 'Tailwind CSS', 'shadcn/ui', 'state management', 'routing'), but it lacks synonyms/variations and file-extension-style breadth, so it is just below the comprehensive anchor.

4 / 5

Distinctiveness Conflict Risk

It carves a clear niche (multi-component React/Tailwind/shadcn claude.ai artifacts) with distinct triggers and an explicit 'not for simple single-file HTML/JSX' exclusion, minimizing overlap with simpler artifact skills.

5 / 5

Total

17

/

20

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
ComposioHQ/awesome-claude-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.