shaping-writing-ux-breadboards

Generates UX breadboards documenting flows, states, navigation maps and affordances in Markdown text notation.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/musher-dev/bundles --skill shaping-writing-ux-breadboards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shaping-writing-ux-breadboards
Source: https://github.com/musher-dev/bundles/tree/main/project-shaping-orchestration/skills/writing-ux-breadboards
Command: npx skills add https://github.com/musher-dev/bundles --skill shaping-writing-ux-breadboards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams clearly define and document user-facing interaction flows, screen states, error conditions, and navigation before visual design or implementation begins, preventing costly rework.

Core Features & Use Cases

  • Text-based Breadboarding: Create detailed UX breadboards using a simple, text-based notation.
  • Flow Mapping: Document user journeys, including happy paths, error states, and empty states.
  • Navigation Design: Visualize the structure and hierarchy of application screens.
  • Use Case: When shaping a new feature with complex user interactions, use this Skill to create a canonical UX breadboard that all stakeholders can reference, ensuring alignment on user experience before design or development.

Quick Start

Use the writing-ux-breadboards skill to generate a UX breadboard for the user flow of creating a new account.

Frequently Asked Questions about shaping-writing-ux-breadboards

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

FAQPage Schema
What is UX breadboarding and when do I need to document user flows?

UX breadboarding is a text-based notation method used to map user flows, screen states, error conditions, and navigation before visual design begins. You need it when shaping features with complex user interactions to ensure stakeholder alignment and prevent costly rework.

How do I map user flows and empty states using text-based notation?

You map user flows and empty states by generating a UX breadboard document using specific markdown formatting. This notation details happy paths, error states, empty states, and interaction affordances to reason about flow before visual design.

Can I document navigation maps and error states before visual design?

Yes, you can document navigation maps and error states before visual design by creating a canonical UX breadboard. This approach visualizes application screen hierarchy and interaction flows using text-based notation to align stakeholders early.

What is the best way to define interaction affordances during feature shaping?

The best way to define interaction affordances during feature shaping is generating a UX breadboard. This text-based document maps user journeys and screen states, ensuring all stakeholders reference a single canonical user experience model.

Does breadboarding user flows require specific markdown formatting?

Yes, generating UX breadboards requires adherence to specific markdown formatting for flows, states, and navigation. This structured text-based notation ensures interaction design and user flows are documented clearly for stakeholder reference.

Why should I use text-based breadboarding instead of starting with visual design?

You should use text-based breadboarding instead of visual design to reason about user flows and screen states early. This prevents costly rework by clearly defining interaction affordances and navigation maps before implementation begins.