CtrlK
BlogDocsLog inGet started
Tessl Logo

web-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.

91

1.75x
Quality

70%

Does it follow best practices?

Impact

93%

1.75x

Average score across 10 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./configs/microservice/bff-service/configs/agent-skills/claude-science/web-artifacts-builder/SKILL.md

The canonical home for this skill is web-artifacts-builder in anthropics/skills

SKILL.md
Quality
Evals
Security

Quality

Content

57%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 is lean and its scaffold/bundle commands are executable, but the skill's central step — developing the artifact — rests on a reference to a "Common Development Tasks" section that was never written, leaving Claude without concrete guidance at the heart of the workflow. Validation of the build output is also absent, so the workflow has no checkpoints between initialization and sharing. Fixing the dangling reference would be the single highest-impact improvement.

Suggestions

Add the missing "Common Development Tasks" section (or remove the dangling reference at line 43) with concrete guidance for Step 2 — e.g., where component code lives in the generated project, how to add routes/state, and a minimal App.tsx example using the pre-installed shadcn/ui components.

Add a validation checkpoint after bundling: confirm bundle.html exists in the project root, is a single self-contained file, and open it to spot-check that assets inlined — this closes the workflow's missing feedback loop.

Surface the bundled shadcn assets: mention scripts/shadcn-components.tar.gz (or the component list it contains) in the body so Claude can discover what is pre-installed instead of the opaque "40+ shadcn/ui components" claim, and trim the ✅ checklist and the "Tailwind CSS 3.4.1" version pin to tighten token efficiency.

DimensionReasoningScore

Conciseness

The body is mostly efficient — commands are given directly ("bash scripts/init-artifact.sh <project-name>") with no explanations of concepts Claude already knows — but includes minor padding such as the ✅ checklist ("✅ 40+ shadcn/ui components pre-installed") and a pinned version ("Tailwind CSS 3.4.1"). This fits anchor 4 (efficient, minor instances that could be trimmed); it is above anchor 3 because there is no unnecessary explanation, and below anchor 5 because the checkmark list and version pin are not load-bearing.

4 / 5

Actionability

Steps 1 and 3 are copy-paste ready ("bash scripts/init-artifact.sh <project-name>", "bash scripts/bundle-artifact.sh"), but the core development step is vague: "To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance" — and no "Common Development Tasks" section exists in the document, so the promised concrete guidance is missing entirely. This matches anchor 3 (some concrete guidance but incomplete, missing key details); it is above anchor 2 because executable commands exist for the scaffolding and bundling steps, and below anchor 4 because the central step's guidance is a dangling reference.

3 / 5

Workflow Clarity

A clear five-step sequence is present (initialize → develop → bundle → share → optional test) with concrete commands for steps 1 and 3, but there are no validation checkpoints: nothing confirms the project scaffolded correctly, and nothing verifies the bundle output (e.g., that bundle.html exists and is self-contained). Step 2's guidance pointer is also broken. This fits anchor 3 (sequence present but checkpoints missing or implicit); above anchor 2 because the sequence is coherent and executable in part, below anchor 4 because both the step-2 guidance and any validation of the build output are absent.

3 / 5

Progressive Disclosure

The referenced bundle files are real and one level deep (scripts/init-artifact.sh and scripts/bundle-artifact.sh verified on disk), and the body stays a lean overview — but the single in-body navigation pointer is broken: "See **Common Development Tasks** below for guidance" points to a section that does not exist, and the shadcn component payload shipped in the bundle (scripts/shadcn-components.tar.gz) is never surfaced for discovery. This fits anchor 3 (some structure but could be better organized); above anchor 2 because the body is short, well-sectioned, and does externalize scripts, below anchor 4 because a dangling reference to the main development guidance is more than a minor organization gap.

3 / 5

Total

13

/

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 is written in third person, states a concrete what and an explicit, trigger-rich when, and even includes a negative boundary to prevent mis-triggering on simple artifacts. The only weakness is that the "what" stays at the level of one broad capability rather than enumerating the concrete actions (initialize, develop, bundle) the skill performs.

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 and a concrete stack, but describes only one broad action rather than several distinct concrete actions. It matches anchor 3 (domain plus 1-2 concrete actions, not comprehensive) — above anchor 2 because the domain and action are specific, below anchor 4 because no list of separate actions is given.

3 / 5

Completeness

It explicitly answers both questions: what ("Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts...") and when ("Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts"), with concrete trigger phrases and an explicit exclusion boundary. This matches anchor 5; it exceeds anchor 4 because the "when" clause is already explicit and specific rather than vague or merely improvable.

5 / 5

Trigger Term Quality

Natural terms users would say are present — "claude.ai HTML artifacts", "state management, routing, or shadcn/ui components", plus named libraries "React, Tailwind CSS, shadcn/ui" and a negative trigger "not for simple single-file HTML/JSX artifacts". Coverage is good but misses common variations like "web app", "interactive", or "dashboard", so it fits anchor 4 rather than the comprehensive synonym coverage of anchor 5, and above anchor 3 because the terms present are natural user phrasings rather than jargon.

4 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche (multi-component claude.ai HTML artifacts built with React/Tailwind/shadcn) and actively disambiguates with "not for simple single-file HTML/JSX artifacts", giving minimal conflict risk with other skills. This is a direct match to anchor 5's "clear niche with distinct triggers"; anchor 4 would require some residual overlap risk that the explicit negative boundary largely closes.

5 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
UnicomAI/wanwu
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.