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

74%

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 ./resources/skills/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

61%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 delivers a clear, mostly actionable five-step workflow with real bundle scripts, but is held back by missing validation checkpoints, mild verbosity and unpinned version strings, and a broken internal pointer to a 'Common Development Tasks' section that does not exist. These are fixable without restructuring.

Suggestions

Add a validation checkpoint after bundling (e.g., verify bundle.html exists and opens in a browser; if Parcel fails, re-run and check error output before sharing) to lift workflow clarity.

Fix or remove the dangling 'See Common Development Tasks below' reference in Step 2 — either add that section with concrete editing guidance or drop the pointer.

Tighten Step 1's feature checklist and move version strings (Tailwind 3.4.1, React 18, Node 18+) into a single pinned 'Stack' note or a deprecated/old-patterns framing to reduce padding and avoid time-sensitivity penalties.

DimensionReasoningScore

Conciseness

Mostly efficient, but includes some padding ('VERY IMPORTANT: To avoid what is often referred to as AI slop'), a restated feature checklist in Step 1, and unpinned time-sensitive version strings ('Tailwind CSS 3.4.1', 'React 18', 'Node 18+') without a deprecated/old-patterns framing, which the rubric penalizes.

3 / 5

Actionability

Provides concrete executable commands (init and bundle scripts) and explains what each does, but Step 2 ('edit the generated files') is vague and defers to a 'Common Development Tasks' section that is not present in the body, leaving a minor gap.

4 / 5

Workflow Clarity

A clear five-step numbered sequence is present, but there are no validation checkpoints (e.g., verify bundle.html was created and renders) and no error-recovery feedback loop for the bundling step, matching the 'steps listed but checkpoints missing' anchor.

3 / 5

Progressive Disclosure

Well-organized sections with a single one-level-deep external reference (shadcn/ui docs) and verified bundle scripts referenced correctly; the dangling 'Common Development Tasks below' pointer (no such section exists in the body) is a minor organization gap keeping it below 5.

4 / 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.

The description is strong: it clearly conveys both purpose and trigger conditions with concrete, natural language and an explicit negative boundary that reduces conflict risk. It is comprehensive on completeness and distinctiveness while only marginally shy of maximum specificity and trigger-term coverage.

DimensionReasoningScore

Specificity

Names the domain ('claude.ai HTML artifacts') and several concrete capabilities ('multi-component', 'state management', 'routing', 'shadcn/ui components'), though it lists artifact characteristics more than enumerated actions, leaving minor gaps versus the comprehensive anchor.

4 / 5

Completeness

Explicitly states both 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 a negative boundary clause.

5 / 5

Trigger Term Quality

Includes natural user-facing terms like 'artifacts', 'state management', 'routing', and 'shadcn/ui components', with good coverage but a few synonyms/extensions missing versus the comprehensive anchor.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (multi-component frontend claude.ai artifacts with shadcn/ui) and adds an explicit exclusion ('not for simple single-file HTML/JSX artifacts'), minimizing overlap with simpler artifact skills.

5 / 5

Total

18

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
ThinkInAIXYZ/deepchat
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.