CtrlK
BlogDocsLog inGet started
Tessl Logo

wireframe-mobile-flow

A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts. Reads like an app flow pinned to a whiteboard before any pixels are committed. Use when the brief asks for "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", "low fidelity", "线框图", "移动端线框", or "App 流程".

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.

A tight, high-quality instruction skill: it gives exact, unambiguous direction for producing the wireframe board (structure, styling, constraints, output contract) with zero padding, and closes with a self-check that includes corrective actions. Nothing is over-explained and nothing essential is missing.

DimensionReasoningScore

Conciseness

The ~60-line body is lean and imperative throughout — no concept explanations, no padding — and every line carries task-specific guidance ('~240–280px wide' frames, 'Inter / system-ui... IBM Plex Mono', 'One sentence before the artifact, nothing after'). It assumes Claude's competence and every token earns its place.

5 / 5

Actionability

For an instruction-only skill the guidance is fully concrete and executable: exact board structure (header with 'WIREFRAME v0.1 · MOBILE' tag, phone row, connectors, 1–2 annotations), specified fonts, grey-box content inventory per screen type, single-HTML constraints (inline CSS, no external JS/images, data-od-id placement), and a copy-ready artifact output contract with tag format.

5 / 5

Workflow Clarity

A clear 5-step sequence (pick flow steps → lay out board → write single HTML → self-check) with an explicit validation checkpoint step and a corrective feedback loop ('If a screen renders blank as a thumbnail, raise the contrast'). The operation is non-destructive, so no batch/destructive cap applies.

5 / 5

Progressive Disclosure

The skill is self-contained — no references/, scripts/, or assets/ bundle exists and none is needed — and the body is short, single-purpose, and cleanly sectioned (intro, Workflow, Output contract). Per the simple-skill guidance, well-organized sections with no need for external references score 5.

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.

An excellent description: it states concretely what the skill produces (multi-screen lo-fi mobile flow wireframe board with grey-box frames, numbered connector arrows, and annotation callouts) and exactly when to use it, with a rich bilingual trigger list. The only minor weakness is that broad terms like 'low fidelity' slightly increase overlap risk with adjacent design skills.

DimensionReasoningScore

Specificity

The description lists multiple concrete, specific deliverable elements — 'three or four phone frames laid out in a row on a board', 'Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts' — in third-person voice, fully matching the 'multiple specific concrete actions; comprehensive coverage' anchor.

5 / 5

Completeness

Both questions are explicitly answered: the 'what' is a lo-fi multi-screen mobile flow wireframe board with connectors and annotations, and the 'when' is an explicit trigger clause ('Use when the brief asks for...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

The 'Use when' clause gives comprehensive natural-term coverage with synonyms across languages: 'mobile wireframe', 'app flow', 'user flow wireframe', 'lo-fi mobile', 'low fidelity', plus the Chinese equivalents '线框图', '移动端线框', 'App 流程'.

5 / 5

Distinctiveness Conflict Risk

The lo-fi mobile flow wireframe niche is clear with distinctive triggers (numbered flow, grey-box, callouts), but terms like 'low fidelity' and 'app flow' carry minor overlap risk with generic wireframe, flowchart, or screen-design skills — fitting the 'mostly distinct; minor overlap risk' anchor rather than the 'minimal conflict risk' anchor.

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.