amvcp-wf-screens

What problem does it solve?

It helps you turn a set of screen designs into a single multi-screen wireframe where reviewers can click through flows, leave per-screen and per-block feedback, and validate accessibility.

Core Features & Use Cases

• Multi-screen wireframe structure: organizes N wf-screen blocks under one wf-root with consistent screen IDs.
• Two navigation modes: supports scroll (stacked screens) and paged (pure CSS :target) so you can mimic real app navigation.
• Clickable prototypes for flows: uses anchor-based routing to model hub-spoke, linear, branching, and modal-over patterns without heavy scripting.
• Reviewable, selectable atoms: stamps each meaningful block with data-ve-id / data-ve-type so selection, comments, and approve/deny decisions work per element.
• Domain screen libraries: quickly fills each screen with common patterns for mobile, ecommerce, auth/onboarding, email/messaging, and CMS content.
• Built-in a11y and verification guidance: ensures keyboard focus behavior and includes a workflow to screenshot-test across themes and fidelities.

Quick Start

Use the multi-screen flow by creating an .wf-root containing multiple .wf-screen sections (each with a unique id="screen-...") and linking them with <a href="#screen-..."> anchors, choosing data-wf-nav="paged" when you want one screen visible at a time.