wireframe-spec

Specify annotated wireframe layouts with content priority and behavior annotations.

Updated Mar 16, 2026

Search Tags:#prototyping #responsive #wireframe #annotation #design-spec #content-blocks #layout-priority

Ready to run

npx skills add https://github.com/soeiroo/multifunctional-web --skill wireframe-spec-soeiroo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wireframe-spec
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/wireframe-spec
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill wireframe-spec-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Specify wireframe layouts with content priority, component placement, and annotations to guide design and development.

Core Features & Use Cases

Content Blocks: headers/navigation, hero/feature areas, content sections, forms, footers
Annotations: content priority numbers, interaction notes, dynamic content indicators, responsive behavior notes, accessibility notes
Content Specifications: heading hierarchy, image aspect ratios, content sources (static, CMS, API), required vs optional content
Fidelity Levels: Sketch, Low-fi, Mid-fi, Annotated
Wireframe Conventions: grayscale visuals, explicit component representations, consistent labeling
Best Practices: focus on content hierarchy, annotate behavior, show multiple states, include breakpoints, involve content strategy early

Quick Start

Describe your page goals and priorities, then specify component placement and behavior annotations for a responsive wireframe.

Frequently Asked Questions about wireframe-spec

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

FAQPage Schema

How do I annotate wireframes with content priority and behavior notes?▼

To annotate wireframes with content priority and behavior, you specify layout hierarchies by assigning priority numbers to content blocks and adding interaction, dynamic content, and responsive behavior notes. This structure guides design and development workflows.

What is the best way to define layout hierarchy for responsive web and mobile interfaces?▼

Defining responsive layout hierarchy requires categorizing content blocks like headers, hero areas, and footers, then assigning content priority numbers and breakpoint behavior annotations to guide placement across web and mobile interfaces.

Can I use low-fidelity wireframes to specify content sources and heading hierarchy?▼

Yes, low-fidelity wireframes can specify content sources like static, CMS, or API inputs alongside heading hierarchy and image aspect ratios. Fidelity levels range from sketch and low-fi to mid-fi and fully annotated layouts.

Do I need to include accessibility and responsive behavior notes in a wireframe specification?▼

Including accessibility and responsive behavior notes in a wireframe specification is recommended to show multiple states and breakpoints. This ensures layout conventions meet content strategy and interaction requirements early in the process.

Why does my wireframe layout lack clear component placement and content hierarchy?▼

Wireframe layouts lack clear hierarchy when content blocks are not explicitly categorized or prioritized. Applying grayscale visuals, explicit component representations, and content priority numbers ensures consistent labeling and structured layout priority.

How do I start creating an annotated wireframe specification for product design?▼

Start creating an annotated wireframe specification by describing page goals and priorities, then specifying component placement for content sections and adding behavior annotations for responsive breakpoints and interaction states.