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 流程".

74

Quality

92%

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

85%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 well-organized, actionable instruction-only skill with a clear sequenced workflow and an explicit self-check validation step. The main room for improvement is trimming decorative prose and optionally providing a concrete HTML scaffold to copy.

Suggestions

Trim mood-setting prose (e.g. 'The point is the flow...', 'Reads like an app flow pinned to a whiteboard') to keep the body purely instructional and improve token efficiency.

Add a minimal copy-paste HTML scaffold (doctype + board container + one phone frame + one dashed connector) so Claude has a concrete starting structure rather than only a structural prescription.

Tighten the self-check into a tighter checklist format (e.g. bullet criteria with pass/fail) so the validation step reads as an explicit gate rather than prose.

DimensionReasoningScore

Conciseness

Mostly efficient and well-structured, but retains some flavor language ('The point is the flow — how a user moves screen to screen — not the polish', 'Reads like an app flow pinned to a whiteboard') that could be trimmed without losing guidance. Not anchor 5 because a few tokens are spent on mood-setting rather than instruction; not anchor 3 because it is not noticeably verbose or padded.

4 / 5

Actionability

Provides concrete, specific guidance — device widths (~240–280px), named content blocks (hero image-placeholder rect + X, title/price bars), fonts (Inter / IBM Plex Mono), data-od-id attributes, and a concrete artifact contract. Falls just short of anchor 5 because no complete copy-paste HTML template is given, only a structural prescription.

4 / 5

Workflow Clarity

Clear numbered sequence (skip DESIGN.md → pick steps → lay out board → write HTML → self-check) with an explicit validation checkpoint (step 5 self-check) and a corrective feedback loop ('If a screen renders blank as a thumbnail, raise the contrast').

5 / 5

Progressive Disclosure

Self-contained with no external bundle files and no nested references; content is well-organized into focused sections (Workflow, Output contract) with nothing that belongs in a separate file. Appropriate for a skill that needs no external references.

5 / 5

Total

18

/

20

Passed

Description

100%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, specific description that clearly states what the skill produces and gives explicit, comprehensive trigger guidance in multiple languages. It is concise, concrete, and uses third-person voice throughout.

DimensionReasoningScore

Specificity

Lists multiple concrete specifics of the output — 'three or four phone frames laid out in a row', 'Grey-box content inside each device', 'dashed connector arrows + numbered step labels', 'annotation callouts' — giving comprehensive coverage of what the skill produces.

5 / 5

Completeness

Explicitly answers both 'what' (a lo-fi multi-screen mobile flow wireframe board with phone frames, greyboxes, connectors, annotations) and 'when' ('Use when the brief asks for...' with concrete trigger phrases).

5 / 5

Trigger Term Quality

Comprehensive natural trigger coverage including synonyms and multilingual variants: 'mobile wireframe', 'app flow', 'user flow wireframe', 'lo-fi mobile', 'low fidelity', '线框图', '移动端线框', 'App 流程'.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear niche — lo-fi mobile flow wireframes — with distinct, specific triggers and minimal overlap risk against other skills.

5 / 5

Total

20

/

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.

Validation15 / 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.