About wireframe-spec
wireframe-spec is a design skill for writing annotated wireframe specifications, for teams that need to define content priority, component placement, behavior, and responsive considerations. It also covers content requirements, fidelity levels, and interface states.
Key features
- 01Define content blocks and component placement
- 02Annotate priority, interactions, and dynamic content
- 03Record responsive and accessibility requirements
- 04Specify headings, text lengths, and image ratios
- 05Support fidelity from sketches to annotated layouts
Use cases
- 01Write handoff specifications for page layouts
- 02Describe click, hover, and other interaction behavior
- 03Plan empty, loading, populated, and error states
- 04Document layouts for different breakpoints
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/wireframe-specin Claude Code to confirm it loaded.
Details
From the project READMEWireframe 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
Comments
Markdown supported