artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

Quality

54%

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/artifacts-builder/SKILL.md

Quality

Content

47%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/pointer stub rather than an executable skill: it is honest and tidy about deferring to the upstream bundle, but it provides no locally actionable guidance — the one runnable command just opens a GitHub page, and the substantive workflow lives entirely outside the skill. Conciseness and structure are fine; actionability and workflow clarity are the weak points.

Suggestions

Include the actual installation commands (e.g. a git clone or copy into the skills directory) and the resulting path layout instead of deferring to 'Inspect the upstream README for exact paths'.

Number the workflow steps (install → verify present in skills dir → invoke by name or trigger phrase) with a verification checkpoint that the skill loaded.

Add a minimal inline quick-start (a sample React/Tailwind/shadcn artifact snippet) so the skill is useful without round-tripping to the external repo.

Dimension	Reasoning	Score
Conciseness	The body is short, well under budget, and explains nothing Claude already knows. Minor trims are possible: the 'What it does' section restates the description verbatim and the upstream URL appears in both frontmatter and the Source section.	4 / 5
Actionability	The only executable command is 'open <GitHub URL>', which merely opens a page; the actual task instructions ('install the upstream bundle', 'Inspect the upstream README for exact paths') are high-level hints with no concrete install commands, paths, or file names. Real guidance is delegated to an external README.	2 / 5
Workflow Clarity	A rough implied sequence exists (open the repo, inspect the README, install the bundle, invoke by name), but the steps are poorly defined — no install procedure, no expected file layout, no verification that the skill is installed — and the steps aren't even enumerated.	2 / 5
Progressive Disclosure	The body is under 50 lines with clean, clearly headed sections (What it does, Source, How to use) and its single pointer (the upstream repo) is well signaled. It misses 5 because the entire payload lives behind an external URL rather than local, one-level-deep reference files, so navigation offloads to the browser.	4 / 5
	Total	12 / 20 Passed

Description

61%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 is serviceable: it names a concrete domain and technology stack in third person, and frontmatter triggers are natural. Its main weaknesses are buzzword padding ('Suite of tools', 'elaborate', 'modern'), a single generic action instead of a list of capabilities, and a missing 'Use when...' clause.

Suggestions

Replace fluff ('Suite of tools', 'elaborate', 'modern') with concrete actions, e.g. 'Build multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui; scaffold components, wire state, and style with utility classes'.

Add an explicit trigger clause: 'Use when the user asks for an HTML artifact, a React/Tailwind artifact, or a multi-component web UI on claude.ai.'

Broaden trigger terms to include synonyms like 'tailwind artifact', 'shadcn component', and 'build a web page/UI' to cover natural user phrasing.

Dimension	Reasoning	Score
Specificity	The description names the domain (claude.ai HTML artifacts) and a concrete tech stack (React, Tailwind CSS, shadcn/ui) but offers only one generic action ('creating') alongside fluff like 'Suite of tools', 'elaborate', and 'modern frontend web technologies'. It does not list several specific actions, so it sits at the domain-plus-1-2-actions anchor rather than above.	3 / 5
Completeness	It clearly answers 'what' (create multi-component claude.ai HTML artifacts with React/Tailwind/shadcn) but has no 'when' clause or equivalent trigger guidance in the description itself, which caps completeness at 3 per the judging guidelines.	3 / 5
Trigger Term Quality	Frontmatter triggers ('artifacts builder', 'html artifact', 'multi component artifact', 'react artifact') are natural phrases a user would say for this need. Not 5 because common variations like 'tailwind', 'shadcn', 'web page', or 'build a UI' are missing; not 3 because four distinct, plausible trigger phrases are present rather than a few generic keywords.	4 / 5
Distinctiveness Conflict Risk	'claude.ai HTML artifacts' is a fairly distinct niche and the triggers are specific to artifacts, minimizing mis-trigger risk. Minor overlap with general web-development or component-building skills keeps it below the clear-niche anchor of 5.	4 / 5
	Total	14 / 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/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.