Wireframe Spec
This helps you spec out wireframes with proper annotations instead of just drawing boxes. You define content priority, component placement, interaction notes, and responsive behavior across different fidelity levels from quick sketches to fully annotated mid-fi layouts. The approach focuses on content hierarchy and behavior specs rather than visual design, using standard wireframe conventions like X-boxes for images and wavy lines for text. The multi-state thinking is smart: it pushes you to show empty, loading, populated, and error states upfront rather than discovering edge cases later. Good for getting alignment on structure and behavior before anyone starts pixel pushing.
- installs
- 2.3K
- GitHub stars
- 3.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill wireframe-spec --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Details
- Repository
- github.com/owl-listener/designer-skills
- Categories
- Frontend Development, Productivity & Planning
- First seen
- Jun 3, 2026
