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.

82

2.50x
Quality

75%

Does it follow best practices?

Impact

95%

2.50x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

63%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 skill delivers a clear, mostly executable workflow with working scripts, but its central step defers to a 'Common Development Tasks' section that was never written, and the bundled shadcn component archive is invisible to the reader. Fixing the dangling reference and trimming the duplicated step lists would move this from adequate to strong.

Suggestions

Add the missing 'Common Development Tasks' section (or remove the SKILL.md:44 pointer to it) — it is the only guidance for the core development step.

Document the bundled scripts/shadcn-components.tar.gz in the body (what it contains, when/how it is used) so the 40+ pre-installed components are discoverable.

Remove the redundancy between the top-level 5-step list and the Quick Start section headers to tighten token usage.

DimensionReasoningScore

Conciseness

Largely lean: short step sections, copy-paste commands, no explanation of concepts Claude already knows. Minor padding: the checkmark feature list under Step 1 restates what the init script already reports, and the top-level numbered steps duplicate the Quick Start sections. Not 5 due to that duplication; well above the 'noticeably verbose' 2 anchor.

4 / 5

Actionability

Concrete commands exist ("bash scripts/init-artifact.sh <project-name>", "bash scripts/bundle-artifact.sh") with an explicit requirement ("Your project must have an index.html in the root directory"), but the core step — "Develop your artifact by editing the generated code. See **Common Development Tasks** below for guidance" — points to a section that does not exist anywhere in the body. That dangling reference leaves the central development step without the promised concrete guidance. Not 4 because a key step's guidance is missing; above 2/3-with-pseudocode since the commands present are executable.

3 / 5

Workflow Clarity

Clear 5-step sequence with per-step headers, explicit preconditions, and a well-scoped optional testing step with sensible latency guidance. The scripts themselves contain error checks (Node version gate, missing package.json/index.html), which act as checkpoints, but the skill body gives no explicit post-bundle validation (e.g., verify bundle.html exists/opens). Minor validation gap fits the 4 anchor; not 5 since there is no explicit verify loop in the body.

4 / 5

Progressive Disclosure

Body references real bundle files (scripts/init-artifact.sh, scripts/bundle-artifact.sh, both verified present) and one external link, but navigation is undermined by the dangling "See **Common Development Tasks** below" pointer to a nonexistent section, and the bundled shadcn-components.tar.gz (40+ components) is never mentioned in the body, so its purpose and use are undiscoverable. Structure exists but references are not reliably signaled — fits the 3 anchor better than 4.

3 / 5

Total

14

/

20

Passed

Description

87%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: concrete domain and stack, explicit 'Use for...' triggers with a useful negative boundary. Minor room to broaden natural synonyms and enumerate a couple more capability verbs.

Suggestions

Add common synonyms or extensions users might say (e.g., 'interactive web page', '.html file', 'dashboard') to widen trigger coverage.

Consider naming one or two additional concrete actions (e.g., 'bundle to a single self-contained HTML file') to lift specificity.

DimensionReasoningScore

Specificity

"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui)" names the domain, a concrete action (creating multi-component artifacts), and the specific stack. Not 5 because it offers essentially one capability verb ('creating') rather than multiple distinct concrete actions; not 3 because the stack enumeration and 'multi-component' qualifier go beyond '1-2 concrete actions'.

4 / 5

Completeness

Explicitly answers both what ("Suite of tools for creating... claude.ai HTML artifacts using... 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"), with a concrete negative boundary. Clear match for the 5 anchor, including explicit 'Use for...' trigger phrasing.

5 / 5

Trigger Term Quality

Good natural-keyword coverage: "claude.ai HTML artifacts", "React, Tailwind CSS, shadcn/ui", "state management, routing", "single-file HTML/JSX artifacts" — phrases a user would plausibly say. Not 5 because synonyms/extensions (.html, 'web app', 'interactive page') are absent; not 3 because coverage is broad and includes the key product-specific phrase rather than missing common variations.

4 / 5

Distinctiveness Conflict Risk

Clear niche (claude.ai HTML artifacts built with React/shadcn/ui) with distinct triggers, and the explicit negative trigger ('not for simple single-file HTML/JSX artifacts') further reduces mis-triggering against generic HTML skills. Minimal conflict risk.

5 / 5

Total

18

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
davepoon/buildwithclaude
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.