owl-listener/wireframe-spec
prototyping-testing/skills/wireframe-spec/SKILL.md
Specify wireframe layouts with content priority, component placement, and annotation.
$ install --global
skillsauthnpx skillsauth add owl-listener/designer-skills wireframe-specInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 15, 2026, 8:30 AM280.7s1 file scanned
SKILL.md
- name:
- wireframe-spec
- description:
- Specify wireframe layouts with content priority, component placement, and annotation.
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
Related Skills
owl-listener/critique-visual-hierarchy
tools
VerifiedTrustedCommunity
Critique a screen's visual hierarchy — entry point, eye flow, weight distribution, and emphasis.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-typography
tools
VerifiedTrustedCommunity
Critique a screen's typography — scale usage, readability, consistency, and token compliance.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-composition
testing
VerifiedTrustedCommunity
Critique a screen's composition — balance, whitespace, rhythm, and gestalt principles.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-brand-consistency
data-ai
VerifiedTrustedCommunity
Critique a screen's brand consistency against mood.md, voice.md, and tokens.md.
1,265SKILL.mdUpdated May 15, 2026