skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-wf-screens

Generate multi-screen wireframe prototypes with anchor-based navigation and reviewable atoms.

Updated May 8, 2026
Search Tags:#accessibility#wireframe#multi-screen navigation#clickable prototype#anchor routing#design review comments#spec-to-screens
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-wf-screens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-wf-screens
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-wf-screens
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-wf-screens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about amvcp-wf-screens

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

FAQPage Schema
How do I create a clickable prototype for multi-screen navigation without heavy scripting?▼

You can create a clickable prototype by organizing multiple `.wf-screen` sections under a single `.wf-root` and wiring anchor-based routing using HTML `href` attributes to link unique screen IDs. This approach models hub-spoke, linear, and branching flows without heavy scripting.

What's the best way to translate a spec into a screen inventory for wireframing?▼

Translating a spec into a screen inventory involves mapping requirements to domain-specific screen patterns like mobile, ecommerce, or CMS. You structure these as distinct `wf-screen` blocks within a `wf-root`, applying unique screen IDs to establish a navigable, clickable wireframe prototype.

Can I mimic real app navigation using only CSS for paged prototypes?▼

Yes, you can mimic real app navigation by setting the navigation mode to `paged`, which uses pure CSS `:target` selectors to display one screen at a time. This allows anchor-based routing to handle screen-to-screen transitions without requiring JavaScript.

How do clickable wireframes handle per-element design review comments?▼

Clickable wireframes handle per-element design review comments by stamping meaningful blocks with `data-ve-id` and `data-ve-type` attributes. This selectable review atom mechanism allows reviewers to leave feedback and approve or deny decisions directly on specific elements.

Does this wireframe prototype approach support accessible keyboard navigation?▼

Yes, the wireframe prototype approach supports accessible keyboard navigation by ensuring proper keyboard focus behavior during anchor-based routing. It includes built-in a11y verification guidance to validate interactions across different themes and fidelities.

When should I use scroll versus paged navigation modes for multi-screen wireframes?▼

Use scroll navigation mode to stack multiple screens vertically for continuous review, and use paged mode when you need to mimic real app navigation by showing only one screen at a time. Paged mode relies on CSS `:target` with a no-fragment fallback.

Related Skills

Explore More Design & Creative Skills→
gabelulgabelul
38

stitch-mcp-list-screens

Parse Stitch project screen list responses to extract numeric screen IDs.

Community
Basic
henrique-simoeshenrique-simoes
13

prototype-feedback

Process prototype feedback into thematically organized insights across iterations.

Community
Intermediate
Usmanhacker2641Usmanhacker2641

imagegen-frontend-mobile

Generate app-native mobile screen visuals for product design flows.

Community
Advanced
sachio222sachio222

site-architecture

Plan site hierarchies with L0-L3 levels, URL patterns, and hub-and-spoke linking.

Community
Advanced