CtrlK
BlogDocsLog inGet started
Tessl Logo

web-artifacts-builder

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

51

Quality

56%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/web-artifacts-builder/SKILL.md

The canonical home for this skill is web-artifacts-builder in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

65%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 skill is a compact, mostly executable overview backed by real bundle scripts, but it has a dangling section reference and lacks a validation checkpoint around the destructive bundling step. Tightening these would lift both workflow clarity and progressive disclosure.

Suggestions

Add a verification checkpoint after bundling, e.g. "Verify: `test -f bundle.html && du -h bundle.html`; if missing, re-run the bundle step" — this also satisfies the destructive-operation feedback-loop requirement.

Remove or fulfill the dangling "See Common Development Tasks below" reference on line 45 — either add that section or drop the pointer.

Fold the redundant 5-step overview into the detailed steps (or vice versa) to remove the minor conciseness redundancy.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence, with executable bash commands and no padding about what React/Vite are; minor redundancy (the 5-step overview repeated as detailed steps, the checkmark feature list) keeps it just below a 5.

4 / 5

Actionability

Concrete, copy-paste commands (`bash scripts/init-artifact.sh <project-name>`, `bash scripts/bundle-artifact.sh`) backed by real script files cover the main cases; the gap is Step 2 pointing to a "Common Development Tasks" section that does not exist.

4 / 5

Workflow Clarity

Steps are clearly sequenced 1–5, but the bundling step performs a destructive `rm -rf dist bundle.html` with no validation/verification checkpoint after the build, so per the guideline workflow clarity is capped at 3.

3 / 5

Progressive Disclosure

The body is organized into Quick Start sections and references real scripts, but it dangles a "See Common Development Tasks below" pointer to a non-existent section, a navigation gap that fits the anchor for some structure with references not clearly signaled.

3 / 5

Total

14

/

20

Passed

Description

48%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 identifies a clear niche but is thin: it names the domain without concrete actions and omits any "Use when…" trigger guidance, leaving Claude little to match on. Trigger-term coverage is partial.

Suggestions

Add 2–3 concrete actions, e.g. "scaffold a React+TypeScript artifact, develop it, and bundle it into a single self-contained HTML file".

Append an explicit trigger clause: "Use when the user asks to build, prototype, or share a frontend web app or HTML artifact on claude.ai."

Include natural synonyms ("web app", "widget", "HTML artifact") so users phrasing it differently still trigger the skill.

DimensionReasoningScore

Specificity

The description names the domain ("frontend claude.ai artifacts") but lists no concrete actions, only "follow these steps" — matching the anchor where the domain is named but actions are minimal or generic.

2 / 5

Completeness

It gives a clear-ish "what" (build frontend claude.ai artifacts) but entirely lacks a "when"/"Use when…" clause; per the guideline a missing trigger clause caps completeness at 3.

3 / 5

Trigger Term Quality

"claude.ai artifacts" is a relevant natural term users would say, but common variations and synonyms (e.g., "web app", "widget", "HTML artifact") are missing, fitting the anchor for some relevant keywords with missing variations.

3 / 5

Distinctiveness Conflict Risk

"frontend claude.ai artifacts" carves a fairly distinct niche with minimal overlap risk against other skills, fitting the anchor for mostly distinct with only minor overlap risk.

4 / 5

Total

12

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

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.