wireframe-spec
Specify wireframe layouts with content priority, component placement, and annotation.
npx skills add Owl-Listener/designer-skills --skill wireframe-spec --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 fo
- What You Do
- Wireframe Components
- Content Blocks
- Annotations
- Content Specifications
- Fidelity Levels
- Wireframe Conventions
- Best Practices
What does the wireframe-spec skill do?
Specify wireframe layouts with content priority, component placement, and annotation.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill wireframe-spec --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.