skills.rest
bm629
bm629COMMUNITY
Explore all skills by this author →
GitHub

authoring-wireframes

Author structural low-to-mid-fidelity wireframes documents from upstream user-flows.

1|1|Updated May 24, 2026
Search Tags:#accessibility#design system#user flows#wcag#ux design#wireframes#screen states
One-click install
npx skills add https://github.com/bm629/agent-skills --skill authoring-wireframes-bm629
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: authoring-wireframes
Source: https://github.com/bm629/agent-skills/tree/main/skills/authoring-wireframes
Command: npx skills add https://github.com/bm629/agent-skills --skill authoring-wireframes-bm629

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing a wireframes document that an engineer can actually build from is hard: screens get missed, empty/loading/error states are skipped, invented components drift from the design system, and layout decisions lack an objective quality bar. This Skill provides the method for producing a complete, structural wireframes document keyed to the upstream user-flows. ## Core Features & Use Cases - Flow-driven coverage: Derives the screen list from the upstream user-flows so every flow-named screen and state-transition gets a wireframe, tracked in an auditable screen-inventory table. - Per-screen method: Guides layout regions on a grid, a shared app-shell, ASCII box sketches with per-element annotations, data-display patterns, content/microcopy intent, per-screen states, responsive notes, and screen-composition accessibility (WCAG 2.2). - Scoped amend mode: Treats edits as versioned diffs with ripple analysis, semver versioning, and changelog entries instead of regenerating untouched screens. - Use Case: Given a project idea plus a user-flows document and a design-system, produce a buildable wireframes document covering every screen and state, referencing only real design-system components. ## Quick Start Use authoring-wireframes to lay out every screen named in my user-flows document as annotated structural wireframes with all empty, loading, and error states.

Frequently Asked Questions about authoring-wireframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a wireframes document from user flows?▼

Walk every user flow and create one wireframe per flow-named screen and state-transition, tracked in a screen-inventory table. For each screen, define layout regions on a grid, an ASCII box sketch, per-element component annotations, all applicable states, and accessibility notes.

What states should a wireframe document for each screen?▼

Each screen should document empty, loading, populated/default, and error states, plus success/confirmation where a state change occurs and partial states where the flow visits them. Happy-path-only documentation is the most common wireframing gap.

What is the difference between wireframes and hi-fi design?▼

Wireframes are low-to-mid fidelity and structural: layout regions, content hierarchy, components, affordances, and states. Final colors, typography, and exact pixels belong to the downstream hi-fi pass, and the design system owns the visual tokens.

Can I invent new components when wireframing with a design system?▼

No. Reference only the design system's real components and tokens so the handoff stays consistent. If a needed component does not exist, record it as an explicit gap or open question for the design-system owner instead of inventing one.

Who owns accessibility between the wireframe and the design system?▼

The wireframe owns screen-composition accessibility: landmarks, one h1, reading and focus order, accessible names, keyboard operability, target-size reservation, and non-color-only intent. The design system owns the per-component contract such as pixel contrast and focus appearance.

When should I not use this wireframes authoring skill?▼

Do not use it to review a finished wireframes document, produce high-fidelity visual design, decide which screens and transitions exist, or author the design system's token and component catalog. Those belong to the reviewing, hi-fi, user-flows, and design-system skills respectively.

Related Skills

Explore More Design & Creative Skills→
Lia-CreativeLia-Creative
1

hifi-design

Produces high-fidelity screens on the design system as handoff-ready .dc.html artefacts.

Official
Intermediate
lucaspedrozaemlucaspedrozaem
1

wireframes

Create annotated lo-fi and hi-fi wireframes for SaaS page layouts.

Community
Intermediate
sagittarassagittaras

write-ux-spec

Writes or updates a UX specification document for one screen or flow through guided interview and independent review.

Official
Advanced
DeiblerDeibler
8

iteration-prototype-fidelity

Selects the appropriate prototype fidelity for each iteration and research question.

Community
Intermediate