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.

62

Quality

73%

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/skills/artifacts-builder/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

A clean, well-structured short skill with executable init/bundle commands and good progressive disclosure. Its main gaps are a duplicated step list (conciseness), a broken reference to a 'Common Development Tasks' section that is absent (actionability), and no explicit validation checkpoint after bundling (workflow clarity).

Suggestions

Remove the duplicate top-level 5-step list or the detailed Quick Start steps — keep only one sequenced workflow to tighten token use.

Add the missing 'Common Development Tasks' section (or drop the reference) so Step 2 gives concrete, actionable development guidance instead of pointing to a non-existent section.

Insert an explicit validation checkpoint after 'bash scripts/bundle-artifact.sh' — e.g., confirm bundle.html was created and renders — before moving to the 'Share Artifact' step.

DimensionReasoningScore

Conciseness

The body is mostly lean (concrete commands, short bullets, no explanation of concepts Claude knows), but it states the 5-step workflow twice — once as a compact list up top and again as the detailed 'Quick Start' Steps 1-5 — which is removable redundancy, landing it at anchor 2 rather than 3.

2 / 3

Actionability

Init and bundle commands are fully executable ('bash scripts/init-artifact.sh <project-name>', 'bash scripts/bundle-artifact.sh'), but the core development step ('Develop your artifact by editing the generated files. See Common Development Tasks below') references a 'Common Development Tasks' section that does not exist, leaving the most important step without concrete guidance — an anchor-2 incomplete case.

2 / 3

Workflow Clarity

A clear 5-step sequence (Initialize → Develop → Bundle → Share → Test) is present, but there is no explicit validation checkpoint after the fragile Parcel bundling step (e.g., confirm the build succeeded or that bundle.html renders) before sharing, so checkpoints are implicit — anchor 2.

2 / 3

Progressive Disclosure

For a short, single-purpose skill the body is well-organized into clearly labeled sections, references bundle scripts by path one level deep ('scripts/init-artifact.sh', 'scripts/bundle-artifact.sh'), and points to a single external doc URL, with no nested references — meeting the anchor-3 bar for simple skills.

3 / 3

Total

9

/

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, specific description with an explicit 'Use for' trigger and a helpful negative boundary that disambiguates it from simpler HTML skills. Its only weakness is that it describes essentially one action (creating) rather than a suite of distinct verbs, keeping specificity at 2.

DimensionReasoningScore

Specificity

Names the domain concretely ('creating elaborate, multi-component claude.ai HTML artifacts') and lists technical qualifiers ('state management, routing, or shadcn/ui components'), but the only real action verb is 'creating' — it does not enumerate multiple distinct actions like the anchor-3 example, so it sits at anchor 2.

2 / 3

Completeness

Explicitly answers both what ('Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts...') and when via an explicit 'Use for...' trigger plus a negative boundary ('not for simple single-file HTML/JSX artifacts'), satisfying the anchor-3 'both what AND when' requirement.

3 / 3

Trigger Term Quality

Covers a strong spread of natural terms a user would say — 'claude.ai HTML artifacts', 'React', 'Tailwind CSS', 'shadcn/ui', 'state management', 'routing', 'simple single-file HTML/JSX artifacts' — matching the anchor-3 bar for good coverage of natural phrasings.

3 / 3

Distinctiveness Conflict Risk

The niche is sharply defined (claude.ai HTML artifacts with React/Tailwind/shadcn/ui, complex multi-component) and the 'not for simple single-file HTML/JSX artifacts' exclusion sharply separates it from a generic HTML skill, so it is unlikely to trigger for the wrong skill.

3 / 3

Total

11

/

12

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 4 missing

Warning

Total

15

/

16

Passed

Repository
composio-community/awesome-claude-plugins
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.