web-artifacts-builder

Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

Quality

46%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/web-artifacts-builder/SKILL.md

Quality

Content

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

This is a catalogue stub rather than an operational skill: the body is well-organized and brief, but it provides no executable install steps, no workflow, and no verification, deferring everything to an upstream GitHub link. As an advertisement it is serviceable; as a SKILL.md it is not actionable.

Suggestions

Replace "install the upstream bundle into your active agent's skills directory" with a concrete, executable command or step-by-step install instructions (clone URL, target path, and how to confirm the skill loaded).

Drop the "## What it does" section that duplicates the frontmatter description verbatim, and the H1 that restates the name, to remove pure redundancy.

Add a verification checkpoint after the install step (e.g., list the skill directory or invoke the skill in a dry run) so the workflow has a validation loop.

Dimension	Reasoning	Score
Conciseness	The body is short, but "## What it does" repeats the frontmatter description verbatim and the H1 restates the skill name — clear redundancies that could be trimmed, matching the "mostly efficient but could be tightened" anchor.	3 / 5
Actionability	"install the upstream bundle into your active agent's skills directory" gives no command, path, or steps, and the only code block merely opens a GitHub URL — minimal concrete guidance with the specific execution steps missing.	2 / 5
Workflow Clarity	A rough sequence exists (inspect upstream, install bundle, invoke by name or trigger), but steps are poorly defined — no install mechanics, no target paths, and no verification that the skill is installed and invocable.	2 / 5
Progressive Disclosure	The body is short and cleanly sectioned (What it does / Source / How to use), and its single reference — the upstream repository URL — is one level deep and clearly signaled; it falls short of a 5 because all substantive content is deferred to an external link rather than well-signaled bundle references.	4 / 5
	Total	11 / 20 Passed

Description

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

The description communicates a clear niche and one concrete capability, but it reads as a catalogue blurb rather than invocation guidance: it lacks a "Use when..." clause, omits natural trigger variations, and pads with a marketing sentence. Adding explicit trigger guidance and synonyms would move it into the 4-5 range.

Suggestions

Append an explicit trigger clause, e.g. "Use when building HTML artifacts for claude.ai, embedding React components, styling artifacts with Tailwind, or when the user mentions web/react/tailwind artifacts."

Replace the promotional second sentence ("Anthropic's reference workflow for shipping rich, embeddable artifacts") with concrete actions such as scaffolding, styling, and validating artifacts.

Include natural synonyms users would actually say — "web page", "landing page", "UI", "component" — alongside "HTML artifacts" to improve trigger term coverage.

Dimension	Reasoning	Score
Specificity	"Build complex claude.ai HTML artifacts with React and Tailwind" names the domain plus 1-2 concrete actions, but the second sentence ("reference workflow for shipping rich, embeddable artifacts") is promotional filler rather than an action, so coverage is not comprehensive.	3 / 5
Completeness	The "what" is clearly stated but there is no "Use when..." clause or equivalent trigger guidance in the description, which per the judging guidelines caps completeness at 3.	3 / 5
Trigger Term Quality	Terms like "HTML artifacts", "React", and "Tailwind" are relevant, but common natural phrasings users would say ("web page", "landing page", "build a UI", "component") are missing, so coverage is partial.	3 / 5
Distinctiveness Conflict Risk	The claude.ai-artifacts-with-React/Tailwind niche is fairly distinct with only minor overlap risk against generic frontend/web-development skills; it stops short of anchor 5 because the description itself carries no explicit distinguishing trigger phrases.	4 / 5
	Total	13 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: skills/web-artifacts-builder/SKILL.md
Commit: 1b47e60

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.