wireframe-sketch

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".

Quality

91%

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

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 exemplary instruction-only skill: lean, concrete, and fully self-contained. Every step carries novel aesthetic specification rather than known-concept explanation, and the self-check checklist provides a genuine validation loop.

Dimension	Reasoning	Score
Conciseness	The ~65-line body is a dense, purposeful aesthetic spec — exact fonts, a 24px × 24px grid, rotation values, tab/KPI/sticky-note composition rules — none of which Claude could infer, and it explains no already-known concepts. Every token earns its place, matching anchor 5.	5 / 5
Actionability	Guidance is fully executable for an instruction-only skill: named Google Fonts ('Caveat', 'Patrick Hand', 'Architects Daughter'), concrete CSS ('background: 24px × 24px grid drawn with linear-gradient lines', 'transform: rotate(-0.6deg)'), required 'data-od-id' attributes, and a copy-ready <artifact> output contract with an example tag.	5 / 5
Workflow Clarity	A clear five-step sequence (skip DESIGN.md → pick tab variants → layout order → write single HTML → self-check) ending in an explicit checklist ('marker / pencil + graph paper + hatched fills + sticky notes are all present; if any is missing, add it') with corrective feedback, matching anchor 5. This is a generative single-file task, so the destructive/batch validation cap does not apply.	5 / 5
Progressive Disclosure	A single compact, well-sectioned file (## Workflow, ## Output contract) with no bundle files and no content that warrants splitting into references. Navigation is trivial and everything appropriately lives in SKILL.md, matching the well-organized single-file pattern.	5 / 5
	Total	20 / 20 Passed

Description

83%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 with an explicit 'Use when' clause and concrete, bilingual trigger terms. Its main gaps are the absence of an action verb stating what the skill produces (a single HTML wireframe page) and a few missing natural variants like 'low fidelity' and 'mockup'.

Suggestions

State the deliverable explicitly with an action verb, e.g. 'Generates a single hand-drawn wireframe HTML page' rather than 'A hand-drawn wireframe exploration'.

Add the natural trigger variants 'low fidelity', 'low-fidelity mockup', and 'prototype' to the 'Use when' clause to broaden keyword coverage.

Sharpen distinctiveness by pairing 'wireframe' with a fidelity qualifier (e.g. 'lo-fi wireframe sketch') so it does not compete with full-fidelity UI design skills.

Dimension	Reasoning	Score
Specificity	The description lists several concrete output features ('graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills'), but it is a descriptive noun phrase ('A hand-drawn wireframe exploration') with no action verb and never states the deliverable (a single HTML page). This matches anchor 4 (several specifics, minor gaps) rather than anchor 5's comprehensive action coverage, and clearly exceeds anchor 3's '1-2 concrete actions'.	4 / 5
Completeness	It explicitly answers both questions: the 'what' is the concrete hand-drawn wireframe look and its elements, and the 'when' is an explicit trigger clause ('Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard"...') with concrete trigger phrases — exactly the anchor 5 pattern.	5 / 5
Trigger Term Quality	The 'Use when' clause covers natural terms including synonyms across two languages ('wireframe', 'sketch wireframe', 'hand-drawn', 'lo-fi', 'whiteboard', '草稿', '手绘原型'), which is good keyword coverage. It stops short of anchor 5 because common variants like 'low fidelity', 'mockup', and 'prototype' are absent.	4 / 5
Distinctiveness Conflict Risk	The niche (hand-drawn, lo-fi wireframes) is clear and most triggers are distinctive, but the bare term 'wireframe' also plausibly applies to general UI/mockup-generation skills, creating minor overlap risk with closely related skills — anchor 4 rather than anchor 5's 'minimal conflict risk'.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/wireframe-sketch/SKILL.md
Commit: 1b47e60

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.