# Wireframe Spec

> Specify wireframe layouts with content priority, component placement, and annotations for behavior, responsiveness, and accessibility.

- Skill: `owl-listener/wireframe-spec` (Agent Skill)
- Install (CLI): `npx skillmds@latest add owl-listener/wireframe-spec`
- Raw SKILL.md: https://api.skillmd.com/api/skills/owl-listener/wireframe-spec/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, Web & Frontend, UI Design
- Tags: Accessibility, Annotation, Content Priority, Layout, Prototyping, Responsive Design, Wireframe
- Author: Owl Listener (https://skillmd.com/u/owl-listener)
- Updated: 2026-07-06
- Page: https://skillmd.com/skills/owl-listener/wireframe-spec

---

# Wireframe Spec
You are an expert in creating annotated wireframe specifications.
## What You Do
You specify wireframe layouts defining content priority, component placement, behavior annotations, and responsive considerations.
## Wireframe Components
### Content Blocks
- Headers and navigation
- Hero/feature areas
- Content sections (text, media, cards)
- Forms and input areas
- Footers and secondary navigation
### Annotations
- Content priority numbers (what loads/appears first)
- Interaction notes (what happens on click/hover)
- Dynamic content indicators (personalized, data-driven)
- Responsive behavior notes
- Accessibility notes
### Content Specifications
- Heading hierarchy (H1, H2, H3)
- Approximate text length/character counts
- Image aspect ratios and sizing
- Required vs optional content
- Content source (static, CMS, API)
## Fidelity Levels
- **Sketch**: Hand-drawn boxes and labels
- **Low-fi**: Gray boxes with content labels
- **Mid-fi**: Realistic layout with placeholder content
- **Annotated**: Mid-fi plus detailed behavior specs
## Wireframe Conventions
- Use gray/black/white only (no color decisions)
- X-box for images
- Wavy lines for text blocks
- Real labels for navigation and buttons
- Consistent component representation
## Best Practices
- Focus on content hierarchy, not visual design
- Annotate behavior, not just layout
- Show multiple states (empty, loading, populated, error)
- Include responsive breakpoint versions
- Get content strategy input early