CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

html-wireframe

Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.

Quality

84%

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

SKILL.md
Quality
Evals
Security

Quality

Content

75%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 a well-structured, concise, and actionable guide that sequences the wireframing workflow end-to-end with a verification checkpoint. The main improvement opportunity is adding an explicit fix-and-reverify feedback loop in the Verify section.

Suggestions

In the 'Verify and hand off' section, add an explicit feedback loop: if reading order, overflow, or a click path fails the check, fix it and re-verify before handing off.

Tighten framing prose such as the opening 'The wireframe should help reviewers decide...' to preserve the lean, directive tone throughout.

Consider a tiny inline HTML skeleton (grayscale tokens, semantic landmarks, the keyboard-operable direction selector) to make the build contract concretely executable rather than only described.

DimensionReasoningScore

Conciseness

The body is lean and directive, assuming Claude's competence without explaining basic HTML or wireframing concepts, but contains some framing prose (e.g. "The wireframe should help reviewers decide...") that could be trimmed slightly.

4 / 5

Actionability

As an instruction-only skill it provides concrete directives ("restrained grayscale palette, system type, plain borders", "one self-contained .html file with essential CSS and JavaScript inline", "small, keyboard-operable selector") that are actionable, with only minor gaps and no executable code examples.

4 / 5

Workflow Clarity

Sections form a clear sequenced workflow (establish question → explore structure → keep unfinished → add behavior → build contract → verify and hand off) ending in an explicit verification checklist, though no validate→fix→retry feedback loop is spelled out.

4 / 5

Progressive Disclosure

Content is well-organized under clear section headers with two one-level-deep, clearly-signaled references (the sibling design-artifact skill and an external Further reading link), and no bundle files to navigate; minor organization gaps only.

4 / 5

Total

16

/

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.

A strong, well-scoped description that clearly states what the skill does, when to use it, and where its boundaries lie relative to sibling skills. Trigger-term coverage and the specificity of concrete actions are the only minor areas for improvement.

DimensionReasoningScore

Specificity

The description names the domain and lists several concrete things the wireframes test — "information hierarchy, content, navigation, task flow, and responsive structure" — but the core action (create wireframes) is singular with the rest as tested dimensions, leaving minor coverage gaps rather than a comprehensive action list.

4 / 5

Completeness

It explicitly answers both "what" ("Direct-invocation specialist for low-fidelity, self-contained HTML wireframes...") and "when" ("Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here") with concrete trigger phrases.

5 / 5

Trigger Term Quality

It includes natural trigger terms users would say ("wireframe", "html-wireframe", "broad html skill routes a wireframe request here") with good coverage, though common synonyms like "schematic" or "layout sketch" are absent.

4 / 5

Distinctiveness Conflict Risk

A clear niche (low-fidelity wireframes) with explicit boundary guidance distinguishing it from html-prototype ("Do not use for polished mockups or production-like interaction") and routing rules ("Do not activate independently from a general request"), giving minimal conflict risk.

5 / 5

Total

18

/

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

plannotator/effective-html

Path

skills/html-wireframe/SKILL.md

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.