html-diagram

Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.

Quality

80%

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/html-diagram/SKILL.md

Quality

Content

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is concise, well-sequenced with an explicit verification step, and appropriately self-contained for a sub-50-line single-purpose skill. Its main gap is actionability: it gives principles and checklists but no concrete worked example or minimal template to anchor the guidance.

Suggestions

Add one minimal self-contained HTML/SVG snippet (e.g., a 4-node topology) to ground the model-selection and rendering guidance in something copy-paste ready.

Show one short example of the required return (absolute path + chosen form + assumptions) so the deliverable format is unambiguous.

Optionally pair each of the 8 model forms with a one-line trigger condition to make selection more directly actionable.

Dimension	Reasoning	Score
Conciseness	The body is lean, assumes Claude's competence (no definitions of HTML/CSS/SVG/Canvas/WebGL), and every line carries guidance with no padding or restated concepts, matching 'lean and efficient; every token earns its place'.	3 / 3
Actionability	Concrete elements exist (an 8-entry model-selection table, a verification checklist, a deliverable spec, and accessibility requirements), but there are no worked examples or templates and the opening ('Build the smallest visual model...') is principle-level, so it is actionable but not copy-paste ready.	2 / 3
Workflow Clarity	A clear three-phase sequence (choose model -> choose rendering method -> build and verify) with an explicit verification checkpoint ('Inspect the result at wide and narrow widths. Check...') and a defined deliverable, satisfying the explicit-validation anchor without triggering the destructive/batch feedback-loop cap.	3 / 3
Progressive Disclosure	At ~39 lines with no external references needed and no bundle files present, the well-organized section structure (Choose the right model / Choose the rendering method / Build and verify) satisfies the simple-skill allowance for a top score.	3 / 3
	Total	11 / 12 Passed

Description

75%

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 cleanly answers what and when with an explicit, routing-based trigger and strong distinctiveness, but its action vocabulary is abstract and its natural trigger terms are limited to 'diagram' variants. Adding concrete verbs and broader natural keywords would lift specificity and trigger_term_quality.

Suggestions

Lead with concrete actions (e.g., 'Builds, renders, and verifies self-contained HTML/SVG diagrams...') instead of describing the artifact's purpose.

Broaden trigger terms to include phrases users naturally say, such as 'flowchart', 'sequence diagram', 'architecture diagram', or 'visualize relationships'.

Tighten the structure-type list or move it into the body so the description stays scannable.

Dimension	Reasoning	Score
Specificity	Names the domain (self-contained HTML diagrams) and enumerates structure types (relationships, sequence, topology, state, hierarchy, quantitative), but describes the artifact's purpose rather than listing concrete build/render actions, so it stops short of the 'multiple specific concrete actions' anchor.	2 / 3
Completeness	Explicitly answers what (self-contained HTML diagrams clarifying listed structure types) and when ('Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here'), with an explicit trigger clause.	3 / 3
Trigger Term Quality	Includes 'HTML diagrams', 'diagram', and 'html-diagram', but coverage is narrow and misses common natural variations a user might say (e.g., flowchart, architecture diagram, visualize, sequence diagram), matching 'some relevant keywords but missing common variations'.	2 / 3
Distinctiveness Conflict Risk	The 'Direct-invocation specialist' framing plus 'Do not activate independently from a general request' carves out a clear niche and explicitly prevents incidental triggering, making conflict with sibling skills unlikely.	3 / 3
	Total	10 / 12 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: plannotator/effective-html
Path: skills/html-diagram/SKILL.md
Commit: 4a9a1e5

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.