wireframe

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.

Quality

82%

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

82%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.

A highly actionable, well-structured skill body: concrete tokens, a copy-paste SVG starter, a sequenced workflow with viewer verification, and clean one-level references. The main improvement opportunities are moving the inline viewer-page spec into a reference or the existing site template, and adding a quick render check for the wireframe SVGs themselves.

Suggestions

Move the viewer-page anatomy, viewer house style, and responsive breakpoint behavior into a reference file (or fold the essential invariants into assets/site-template.html) and keep only the file layout and trigger phrases inline, tightening both conciseness and progressive disclosure.

Add a lightweight verification step to the core workflow (e.g., open the written SVG in a browser or re-read it to confirm coordinates snap to 8px and text has stroke="none") to give the SVG path the same checkpoint the viewer path already has.

Trim the here-now publishing section to the invocation shape and the two or three non-obvious gotchas, deferring credential and claim-token details to that skill.

Dimension	Reasoning	Score
Conciseness	The body is dense and operational — token table, exact breakpoints, gotchas like 'set stroke="none" on <text>' — with almost no explanation of concepts Claude already knows. It falls short of level 5 because the ~60-line inline viewer-page spec (CSS custom properties, responsive behavior per breakpoint) and the detailed here-now publishing steps duplicate material that the site template and the here-now skill already carry.	4 / 5
Actionability	Copy-paste-ready minimal SVG, exact file paths (wireframes/<slug>.svg, design/<task-slug>/index.html), exact stroke/fill/type tokens on an 8px grid, and a concrete publish command with --slug and install fallback — specific examples cover the common cases fully.	5 / 5
Workflow Clarity	The six-step workflow is clearly sequenced with a scope-confirmation step and an explicit verification pass for viewer pages ('walk it at 1440×900, 768×1024, and 390×844'), but plain SVG wireframe production has no render/validity checkpoint, so it stops short of the feedback-loop completeness of level 5.	4 / 5
Progressive Disclosure	Three real, one-level-deep references (references/components.md, references/grid-system.md, references/examples.md) are clearly signaled with explicit load-when instructions, plus three template assets. It misses level 5 because the full viewer-page anatomy, viewer house style, and responsive spec are inlined in SKILL.md rather than split out, partially duplicating assets/site-template.html.	4 / 5
	Total	17 / 20 Passed

Description

82%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 tight, third-person description with an explicit 'Use when' trigger clause and a well-delineated lo-fi wireframing niche. Its only real gap is thin action coverage — it says what is produced but not the range of things it does (e.g., multi-screen flows, annotation, viewer pages are compressed into 'viewer pages').

Suggestions

Enumerate one or two more concrete capabilities in the description (e.g., 'compose screens from a primitive library, emit numbered annotations, and bundle screens into a browsable viewer page') to lift specificity.

Add missing natural trigger variants such as 'lo-fi', 'mockup', or 'rough layout' to broaden keyword coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and output format ('Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages') but offers only one to two concrete actions, matching the anchor for partial coverage rather than the several specific actions of level 4.	3 / 5
Completeness	Explicitly answers what ('Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages') and when ('Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes') with concrete trigger phrases, matching the top anchor exactly.	5 / 5
Trigger Term Quality	Natural phrases like 'wireframe', 'sketch a screen', 'draft a layout', 'low-fi mockup', and 'publish wireframes' give good keyword coverage, but common variants such as 'lo-fi', 'mockup' alone, or a file extension like '.svg' are missing, so it falls short of comprehensive level 5.	4 / 5
Distinctiveness Conflict Risk	'Low-fidelity black-and-white wireframes' carves a clear niche with distinct triggers and minimal conflict risk against hi-fi, branded, or production-UI design skills.	5 / 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: paperclipai/paperclip
Path: packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md
Commit: 1c07b59

Reviewed: 1 day 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.