SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Design · Frontend · Documentation / AGENT SKILL
wireframe-spec
0
Specify wireframe structure with content priorities, component placement, and annotations.
Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).
Understand the trade-offs.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# 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