web-artifacts-builder

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

Quality

57%

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

57%

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

This is a lean, well-structured catalogue stub that clearly points to an upstream bundle, but it provides only pointer-level actionability and a vague install workflow rather than executable artifact-building guidance.

Suggestions

Replace the verbatim restate of the frontmatter description in 'What it does' with body-specific context, or remove the section to avoid duplication and tighten conciseness.

Add a concrete install command or step for placing the upstream bundle into the agent's skills directory instead of the generic 'install the upstream bundle' direction.

Include at least one minimal executable snippet or concrete first step for building a React/Tailwind artifact so the body is actionable without requiring an external repo round-trip.

Dimension	Reasoning	Score
Conciseness	The body is short and free of concept-explanation fluff, but the 'What it does' section restates the frontmatter description verbatim and 'Source' repeats the upstream URL already in the frontmatter, so a few tokens do not earn their place.	2 / 3
Actionability	It gives some concrete guidance (the `open <url>` command and 'invoke this skill by name (`web-artifacts-builder`) or with one of the trigger phrases'), but the actual artifact-building instructions are deferred to the external upstream repo, so key details are missing.	2 / 3
Workflow Clarity	A loose sequence is present (advertise in Open Design → install upstream bundle → inspect README → invoke), but the install step has no concrete command and there are no checkpoints, fitting the anchor for steps listed with gaps.	2 / 3
Progressive Disclosure	The skill is under 50 lines with clearly organized sections (What it does, Source, How to use) and a single clearly-signaled external reference (the upstream repo URL), satisfying the simple-skill allowance for well-organized content with no local bundle files.	3 / 3
	Total	9 / 12 Passed

Description

57%

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 is specific about its niche and technology stack but omits an explicit "Use when..." trigger clause and lists only a single action, leaving completeness and trigger coverage at the mid level.

Suggestions

Add an explicit 'Use when...' clause naming natural user phrases (e.g. 'Use when the user asks to build a web page, landing page, or interactive component for a claude.ai artifact').

Expand the single 'Build' verb into a few concrete actions (e.g. 'Build, style, and iterate on claude.ai HTML artifacts with React and Tailwind') to raise specificity.

Include common user-facing variations such as 'web page', 'landing page', or 'UI component' alongside 'HTML artifacts' to improve trigger term coverage.

Dimension	Reasoning	Score
Specificity	The description names a concrete domain and stack ("claude.ai HTML artifacts with React and Tailwind") but uses a single action verb ("Build") rather than listing multiple specific concrete actions, matching the anchor that names a domain and some actions but is not comprehensive.	2 / 3
Completeness	It clearly answers "what" (build React/Tailwind HTML artifacts) but the "when" is missing from the description — there is no explicit "Use when..." clause, which per the guidelines caps completeness at 2.	2 / 3
Trigger Term Quality	It surfaces relevant terms ("HTML artifacts", "React", "Tailwind") a user might say, but misses common variations (e.g. "web page", "landing page", "component", "UI") and embeds no "Use when..." phrasing in the description field itself.	2 / 3
Distinctiveness Conflict Risk	The claude.ai HTML-artifact niche built with React and Tailwind is specific and unlikely to trigger for unrelated skills; it is clearly distinguishable from generic document or code skills.	3 / 3
	Total	9 / 12 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: a2ba3ee

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.