CtrlK
BlogDocsLog inGet started
Tessl Logo

web-artifacts-builder

To build powerful frontend claude.ai artifacts, follow these steps:

37

Quality

35%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

50%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 skill provides a clear high-level workflow for building React artifacts with concrete commands for initialization and bundling, but falls short on the most critical step - actual development guidance. The referenced 'Common Development Tasks' section is missing entirely, leaving a significant gap in actionability. The workflow lacks validation checkpoints and error recovery, and some sections contain unnecessary verbosity (internal script details, tautological 'When to Use').

Suggestions

Add the missing 'Common Development Tasks' section with concrete code examples showing how to create components, use shadcn/ui, and structure the app

Add validation checkpoints after init (e.g., 'verify with npm run dev') and after bundling (e.g., 'verify bundle.html exists and is non-empty')

Remove the 'What the script does' bullet list and the 'When to Use' section to improve conciseness - Claude doesn't need to know Parcel internals

Add a brief error recovery note for common failure cases (e.g., Node version mismatch, missing index.html)

DimensionReasoningScore

Conciseness

The content includes some unnecessary verbosity - the checklist of what the init script creates (✅ items) is somewhat useful but padded, the 'What the script does' section explains internals Claude doesn't need, and the 'When to Use' section is a tautological filler. The design guidelines section is brief but useful. Overall mostly efficient with some bloat.

3 / 5

Actionability

The skill provides concrete bash commands for init and bundling, but Step 2 ('edit the generated files, see Common Development Tasks below') references a section that doesn't exist in the content. The actual development guidance is almost entirely absent - there's no code showing how to create components, use shadcn/ui, or structure the app. The bundling and init steps are actionable but the core development step is vague.

3 / 5

Workflow Clarity

The 5-step workflow is clearly sequenced and easy to follow. However, there are no validation checkpoints - no step to verify the init succeeded, no validation after bundling (e.g., checking bundle.html size or opening it), and no error recovery guidance if bundling fails. For a multi-step build process, the absence of validation/feedback loops is a notable gap.

3 / 5

Progressive Disclosure

The content references 'Common Development Tasks' below which doesn't exist, and references scripts (init-artifact.sh, bundle-artifact.sh) without bundle files provided. The single external reference (shadcn/ui docs URL) is appropriate. The structure is reasonable with sections, but the missing referenced content and lack of bundle files to verify script paths weakens the score.

3 / 5

Total

12

/

20

Passed

Description

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

This description reads more like the opening line of a tutorial than a skill description. It lacks concrete actions, has no 'when to use' guidance, and uses vague language ('powerful') that provides no discriminative value. It would be very difficult for Claude to reliably select this skill from a pool of alternatives.

Suggestions

Replace the vague preamble with specific capabilities, e.g., 'Creates interactive frontend artifacts including React components, HTML/CSS layouts, and data visualizations for the claude.ai artifact sandbox.'

Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks to build an artifact, create a web UI, make an interactive component, or generate a frontend demo.'

Remove instructional language ('follow these steps') and rewrite in third person declarative voice describing what the skill does.

DimensionReasoningScore

Specificity

Names the domain ('frontend claude.ai artifacts') but the only action is the vague 'build powerful', with no concrete actions like 'create components', 'style layouts', etc.

2 / 5

Completeness

The 'what' is extremely vague ('build powerful frontend artifacts') and there is no 'when' clause at all. The phrase 'follow these steps' is instructional preamble, not a description of capabilities or triggers.

1 / 5

Trigger Term Quality

Contains 'frontend' and 'artifacts' as keywords, but 'claude.ai artifacts' is a narrow technical term unlikely to match natural user phrasing. Missing common terms like 'UI', 'React', 'component', 'web app', 'interactive'.

2 / 5

Distinctiveness Conflict Risk

The mention of 'claude.ai artifacts' provides some specificity to a niche, but 'frontend' is broad enough to overlap with general web development or UI skills. The lack of concrete actions increases ambiguity.

3 / 5

Total

8

/

20

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.