wireframe-spec

Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

2,238
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@wireframe-spec

Skill instructions

Rendered from the published SKILL.md, 41 lines.

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "wireframe-spec"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

hyperframes-registry
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
996,971 installs
baoyu-design
Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say "design". Also use to export a deck built with this skill to PowerPoint (PPT/PPTX) — but only decks authored here (deck-stage / this skill's slide-structured HTML), NOT arbitrary HTML, so confirm the target is such a deck first. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, or component libraries. Harness-agnostic for Claude Code, Cursor, Codex Agent, and similar file-capable agents.
6,289 installs
ui-design
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
1,776 installs
hyperframes-core
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
930,434 installs
ui-ux-designer
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
3,057 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,064 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,554 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,501 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,499 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,461 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.