CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

57

Quality

72%

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

Quality

Content

50%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.

The body presents a clear, mostly lean five-step workflow with executable commands, but it under-delivers on its own promises: the referenced 'Common Development Tasks' guidance is absent, the referenced scripts are not in the bundle, and the build pipeline has no validation checkpoints before the artifact is shared with the user.

Suggestions

Add the missing 'Common Development Tasks' section (or remove the pointer at Step 2), covering how to edit the generated files, add/modify shadcn/ui components, and use the @/ path aliases — this is the core development guidance the workflow currently lacks.

Insert a validation checkpoint after Step 3, e.g. verify bundle.html was created and is self-contained, plus a short error-recovery note for Parcel build failures, so problems are caught before sharing the artifact with the user.

Tighten token usage: drop the duplicated step list at the top (the Quick Start already covers it), compress the optional-testing note to one sentence, and move pinned versions (Tailwind 3.4.1, Node 18+, Vite pinning) into the scripts themselves rather than the SKILL.md body.

DimensionReasoningScore

Conciseness

Mostly efficient and command-focused, but padded in places: the opening 5-step list duplicates the Quick Start detail, the optional-testing note says 'optional' three different ways ('completely optional', 'Only perform if necessary or requested', 'avoid testing the artifact upfront'), and pinned versions (React 18, Tailwind CSS 3.4.1, Node 18+) are time-sensitive details not placed in a deprecation/old-patterns section. Fits 'mostly efficient but includes some unnecessary explanation or could be tightened'; not 4 because the redundancy and version pins go beyond minor trimming.

3 / 5

Actionability

The two script invocations ('bash scripts/init-artifact.sh <project-name>', 'bash scripts/bundle-artifact.sh') are copy-paste ready and requirements are stated ('Your project must have an index.html in the root directory'), but Step 2 — the core development step — points to a 'Common Development Tasks' section that does not exist anywhere in the body, leaving key details missing. This is 'some concrete guidance but incomplete... missing key details' rather than the mostly-complete anchor at 4.

3 / 5

Workflow Clarity

A clear 5-step sequence (init, develop, bundle, share, optional test) with a summary list and per-step headings, but validation checkpoints are absent: no verify-bundle-exists step, no error-handling guidance if the Parcel build fails, and the only verification (Step 5) is explicitly discouraged upfront. Matches 'steps listed but validation gaps; sequence present but checkpoints missing or implicit'; not 4 because essentially no checkpoints are present, not 2 because the sequence itself is well defined.

3 / 5

Progressive Disclosure

Sections are well organized and the only external reference (shadcn/ui docs, one level deep) is clearly signaled, but the body references scripts/init-artifact.sh and scripts/bundle-artifact.sh which are not present in the bundle (no scripts/ directory), and the in-body pointer to 'Common Development Tasks' dangles with no target section. References exist but are broken or lead nowhere, fitting 'some structure but could be better organized; references present but not clearly signaling real content'; not 4 because the broken references are more than minor organization gaps.

3 / 5

Total

12

/

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 description: it concretely states what the skill does and gives explicit, conditional 'use for / not for' trigger guidance including an exclusion boundary. The main weakness is thin action coverage — only 'creating' is named — and a few missing natural synonyms users might say.

DimensionReasoningScore

Specificity

Names the domain clearly ('creating elaborate, multi-component claude.ai HTML artifacts') and the concrete stack ('React, Tailwind CSS, shadcn/ui'), but lists essentially one action — 'creating' — rather than several concrete actions (e.g., initialize, bundle to single HTML). Fits the 'names domain and 1-2 concrete actions, not comprehensive' anchor; not 4 because it does not enumerate several distinct actions, and not 2 because the language is concrete, not generic.

3 / 5

Completeness

Explicitly answers both: what — 'Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui)' — and when — 'Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts'. The 'when' clause uses concrete trigger conditions and even adds an exclusion, matching the top anchor; a 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'artifacts', 'HTML artifacts', 'React', 'Tailwind CSS', 'shadcn/ui', 'state management', 'routing'. A few natural terms users would plausibly say are missing ('web app', 'dashboard', 'SPA', 'multi-page'), so it falls just short of the comprehensive-synonyms anchor at 5 but is well above 'some relevant keywords with missing common variations' at 3.

4 / 5

Distinctiveness Conflict Risk

Clear niche (complex, multi-component claude.ai artifacts built on a specific React/shadcn stack) with an explicit negative boundary ('not for simple single-file HTML/JSX artifacts') that sharply reduces overlap with generic HTML-artifact skills. Minimal conflict risk, matching the 'clear niche with distinct triggers' anchor.

5 / 5

Total

17

/

20

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 4 missing

Warning

Total

15

/

16

Passed

Repository

Microck/ordinary-claude-skills

Path

skills_all/artifacts-builder/SKILL.md

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.