skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

wireframe-spec

Specify annotated wireframe layouts with content priority and placement.

3|Updated Mar 28, 2026
Search Tags:#accessibility#layout#spec#responsive#design-system#annotations#wireframe
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill wireframe-spec-hulusi-tunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-spec
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/prototyping-testing--wireframe-spec
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill wireframe-spec-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a concise, repeatable method to express wireframe layouts with clear content priority, component placement, and detailed annotations for design handoffs.

Core Features & Use Cases

  • Content priority annotations guiding loading order and emphasis across breakpoints
  • Component placement rules for headers, navigation, hero areas, content sections, forms, and footers
  • Fidelity guidance (Sketch, Low-fi, Mid-fi, Annotated) and responsive considerations for multiple devices

Quick Start

Describe a wireframe spec for a two-column desktop layout with a header, hero, content sections, and footer.

Frequently Asked Questions about wireframe-spec

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an annotated wireframe spec for a responsive web layout?▼

To create an annotated wireframe spec, define content blocks, component placement, and fidelity levels. This process ensures responsive layouts have clear content priority and detailed annotations for design handoffs.

What is the best way to document content priority and component placement for UI prototyping?▼

Documenting content priority and component placement requires specifying loading order and emphasis across breakpoints. This method provides concise, repeatable rules for headers, hero areas, and content sections during UI prototyping.

Can I use wireframe annotations to guide design handoffs for both web and mobile projects?▼

Yes, wireframe annotations can guide design handoffs for both web and mobile projects. The spec enforces sections for responsive considerations, fidelity guidance, and accessibility notes to ensure clear developer handoffs.

How do I specify fidelity levels like low-fi or mid-fi in a wireframe layout spec?▼

Specify fidelity levels like low-fi or mid-fi by defining the design planning stage within the spec. This guides the visual detail required for headers, navigation, and forms before high-fidelity prototyping begins.

When do I need to include accessibility notes in my design system wireframes?▼

Include accessibility notes in design system wireframes when planning content-first layouts. The spec enforces sections for accessibility considerations to ensure responsive components meet compliance during the design phase.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

intake-skill

Transform natural language project descriptions into structured engagement briefs.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

agent-designer

Translate BA user stories and SA architecture into UI design documentation.

Community
Intermediate
asalhamedasalhamed

ui-designer

Translate UX research into UI specifications with design tokens and accessibility guidance.

Community
Advanced
binan-makerbinan-maker

mockup-extract

Extract UI components into a mockup sandbox with dependency stubbing and import rewriting.

Community
Intermediate