CtrlK
BlogDocsLog inGet started
Tessl Logo

wireframe-annotated

An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline".

77

Quality

98%

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

100%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 an exemplar of a compact single-purpose skill: a tight workflow that specifies the exact two-column shell, all five greybox blocks with their pins, worked spec-note examples, and an explicit self-check checklist, all within ~50 lines and with zero padding. It closes with an unambiguous output contract (artifact format, one sentence before, nothing after).

DimensionReasoningScore

Conciseness

The ~50-line body is lean and every line is instructive — type-token guidance ('one clean sans like Inter / system-ui'), the accent-color rule ('use it ONLY for the numbered pins... everything else stays greyscale'), and the output contract. No padding and no explanations of concepts Claude already knows, matching anchor 5.

5 / 5

Actionability

The guidance is concrete and directly executable for an instruction-only skill: a named block-by-block layout with pin assignments ('Top nav... Pin ①' through 'Footer... Pin ⑤'), worked spec-note examples ('① Sticky nav, 64px, condenses on scroll'), data-od-id marking, and an exact artifact output format. Anchor 5 applies; anchor 4 would require minor gaps in the concrete guidance, and the five-block structure plus output contract covers the common case fully.

5 / 5

Workflow Clarity

A five-step sequence ends in an explicit validation step ('**Self-check**: Every numbered pin on the canvas has exactly one matching spec row') with a checklist covering pin/row parity, accent-color usage, thumbnail legibility, and style compliance. This matches anchor 5 (clear sequence with explicit validation steps and a checklist); the destructive/batch cap does not apply since this is a single generative task.

5 / 5

Progressive Disclosure

The skill is under 50 lines, single-purpose, with no bundle files (no references/, scripts/, or assets/ exist), and the body is cleanly sectioned into Workflow, self-check, and Output contract. Per the simple-skill scoring note, this earns anchor 5 on well-organized sections alone.

5 / 5

Total

20

/

20

Passed

Description

96%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 description: it states precisely what artifact the skill produces (greybox wireframe with numbered pins and a mirrored spec panel), disambiguates the style against hand-drawn alternatives, and provides an explicit 'Use when' clause with a rich set of natural trigger phrases in both English and Chinese. The only residual risk is mild overlap with generic wireframe/low-fidelity design skills via the broadest trigger terms.

Suggestions

Qualify the broadest triggers (e.g., 'wireframe' or 'low fidelity') so they only fire when the annotated/redline form is meant, e.g., '"wireframe" only when annotation pins or a spec panel are requested'.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete capabilities: 'a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note'. Coverage is comprehensive with no gaps, matching the anchor-5 example rather than anchor 4 (which requires minor gaps).

5 / 5

Completeness

Both questions are answered explicitly: a detailed 'what' (annotated redline wireframe with greybox canvas and spec panel, plus style constraints 'NOT hand-drawn') and a concrete 'when' ('Use when the brief asks for...') with trigger phrases. This mirrors the anchor-5 example structure; anchor 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

The 'Use when' clause lists comprehensive natural trigger phrases with synonyms and variants: 'annotated wireframe', 'redline wireframe', 'wireframe with spec', 'lo-fi landing wireframe', 'low fidelity', '线框图', '标注线框', 'redline'. This matches anchor 5 (comprehensive natural-term coverage including synonyms).

5 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche with a disambiguation clause ('This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn') and mostly distinct triggers, but the generic terms 'wireframe' and 'low fidelity' in the trigger list carry some overlap risk with other lo-fi design skills. This sits between anchor 4 (minor overlap risk) and anchor 5, closer to 4.

4 / 5

Total

19

/

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

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository
nexu-io/open-design
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.