skills.rest
Wcof
WcofCOMMUNITY
Explore all skills by this author →
GitHub

pm-wireframe

Generate traceable wireframes from PMContext definitions with Mermaid navigation flows.

1|Updated Apr 30, 2026
Search Tags:#mermaid#product design#page layout#wireframe#ui states#navigation flow#pmcontext
One-click install
npx skills add https://github.com/Wcof/PMSkill --skill pm-wireframe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pm-wireframe
Source: https://github.com/Wcof/PMSkill/tree/main/skills/visualization/pm-wireframe
Command: npx skills add https://github.com/Wcof/PMSkill --skill pm-wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps product teams convert structured PMContext page definitions into wireframes that are traceable, auditable, and ready for review. It prevents made-up pages, undocumented components, and vague layout drafts by forcing every page and component to map back to an explicit source in PMContext.

Core Features & Use Cases

  • Traceable wireframe generation: Builds Mermaid navigation flows plus per-page Markdown layout tables directly from PMContext page and feature definitions.
  • Full state coverage: Requires each page to account for loading, empty, error, and permission states, highlighting missing states as suggested follow-ups instead of silently skipping them.
  • Audit-first output: Adds a pre-flight verification checklist and an audit triplet showing input evidence, reasoning logic, and output validation so stakeholders can inspect how the wireframe was derived.
  • Use case: When a PM has already produced PMContext and needs reviewable page structure for designers, engineers, or AI prototyping workflows, this Skill turns that source into a navigation map and page-by-page component layout without breaking traceability.

Quick Start

Ask the agent to use pm-wireframe to generate a wireframe from the current PMContext for your product flow, including page navigation, component layout, data sources, and the four required UI states per page.

Frequently Asked Questions about pm-wireframe

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

FAQPage Schema
How do I generate traceable wireframes from product context definitions?▼

Generating traceable wireframes requires mapping structured PMContext page definitions into Mermaid navigation flows and per-page Markdown component layout tables, ensuring every element links directly to source evidence for auditability.

What is the best way to ensure my page wireframes cover all UI states?▼

Ensuring complete UI state coverage requires enforcing loading, empty, error, and permission states for each page, automatically flagging missing states as suggested follow-ups instead of silently skipping them during wireframe generation.

How does wireframe generation handle components missing from the PMContext?▼

Wireframe generation handles unsupported components by flagging missing elements as assumptions, applying fallback handling for missing structure, and producing audit validation triplets that show input evidence, reasoning logic, and output validation.

Can I use Mermaid navigation flows for multi-page user journey mapping?▼

Yes, Mermaid navigation flows support multi-page user journey mapping. This Skill generates navigation maps and page-by-page component layouts directly from PMContext for feature pages, dashboards, account flows, and multi-page user journeys.

Do I need PMContext to plan page structure and component layout?▼

Yes, PMContext is required to plan page structure and component layout. This Skill requires every page and component to map to explicit PMContext evidence, using it as the source to build Mermaid navigation flows and Markdown layout tables.

What format are the wireframe outputs produced in for design handoff?▼

Wireframe outputs for design handoff are produced as Mermaid navigation flows and per-page Markdown component layout tables, accompanied by a pre-flight verification checklist and audit triplets showing input evidence, reasoning logic, and output validation.

Related Skills

Explore More Product & Management Skills→
launchapp-devlaunchapp-dev
38

wireframe-spec

Define wireframe layouts as annotated specifications encoding content priority and component placement.

Official
Intermediate
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced
AutoByteusAutoByteus
34

product-ui-prototyping

Generate visual UI state prototypes for web, iOS, and Android flows.

Official
Intermediate
WcofWcof
1

pm-ia

Generate a Mermaid information architecture diagram from PMContext entities and relationships.

Community
Advanced