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.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill wireframe-spec --agent claude-code