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

pm-sketch

Generate traceable wireframes and HTML prototypes from PMContext files.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps product teams turn a structured PMContext into clear visual deliverables without inventing requirements along the way. It solves the gap between written product context and usable artifacts like wireframes, information architecture diagrams, flowcharts, state diagrams, and interactive HTML prototypes.

Core Features & Use Cases

  • Traceable visual generation: Produces wireframes, IA diagrams, state machines, and flow diagrams where each visual element must map back to PMContext facts, pages, entities, states, or process steps.
  • Interactive prototype output: Generates HTML prototypes in either a lightweight single-file mode or a React + TypeScript + Vite + Tailwind scaffold mode based on project complexity.
  • Design-aware prototyping: Optionally reads DESIGN.md as a visual source of truth, derives design tokens, and flags conflicts instead of hiding them.
  • Operational safeguards: Checks for missing PMContext, supports auto-fallback to upstream PM workflow generation, and requires acceptance validation before claiming completion.
  • Use cases: Ideal when a PM wants to convert a requirements context into review-ready visuals, compare coverage against user stories, prototype a new workflow, or give engineers and stakeholders a tangible artifact for discussion.

Quick Start

Ask the agent to run pm-sketch on your existing PMContext to generate all Mermaid sketches, or add the prototype option to produce an interactive HTML prototype.

Frequently Asked Questions about pm-sketch

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

FAQPage Schema
How do I generate wireframes and interactive prototypes from product requirements?▼

Generate wireframes and interactive prototypes by processing structured PMContext files to produce traceable visual deliverables like information architecture diagrams, flowcharts, and HTML prototypes. The output ensures each visual element maps directly back to PMContext facts, pages, and states.

Can I create state machine diagrams and flowcharts from PMContext?▼

Create state machine diagrams and flowcharts from PMContext by running the sketch generation process. It translates structured product context into Mermaid diagrams where every state and process step is traceable to the original requirements.

How do I build an HTML prototype from product context for stakeholder review?▼

Build an HTML prototype from product context by selecting either a lightweight single-file mode or a React, TypeScript, Vite, and Tailwind scaffold mode. The system automatically selects the appropriate complexity based on your PMContext.

Do I need a PMContext file to generate information architecture diagrams?▼

A PMContext file is required to generate information architecture diagrams. If the context is missing, the system checks for it and can auto-fallback to upstream PM workflow generation to create the necessary input.

How do I apply design tokens to a prototype and handle visual conflicts?▼

Apply design tokens to a prototype by optionally reading a DESIGN.md file as the visual source of truth. The system derives tokens from this file and explicitly flags any visual conflicts instead of hiding them.

What happens if prototype generation fails acceptance validation?▼

If prototype generation fails acceptance validation, the system reports the failure honestly. It requires explicit acceptance validation before claiming completion to ensure the generated wireframes and prototypes meet the original PMContext requirements.

Related Skills

Explore More Product & Management Skills→
erclxerclx
2

claude-design-propose

Generate a structured DESIGN.md file with design tokens and previews.

Community
Advanced
northseadlnorthseadl
6

pm-toolkit

Convert natural language requirements into Mermaid diagrams and local prototypes.

Community
Intermediate
WcofWcof
1

pm-prd

Generate dual-format PRDs from PMContext with strict traceability.

Community
Advanced
WcofWcof
1

pm-ia

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

Community
Advanced