breadboarding

Define software change components and connections with Mermaid wiring diagrams.

5|Updated Oct 22, 2025

Search Tags:#architecture #software design #diagramming #breadboarding #affordances #shapup

Ready to run

npx skills add https://github.com/marchatton/agent-skills --skill breadboarding-marchatton

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: breadboarding
Source: https://github.com/marchatton/agent-skills/tree/main/.agents/skills/02-shape/breadboarding
Command: npx skills add https://github.com/marchatton/agent-skills --skill breadboarding-marchatton

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you define the precise components and connections needed for a software change, ensuring clarity and buildability without getting lost in low-level details.

Core Features & Use Cases

Visualize System Flow: Map user interactions, code logic, and navigation paths.
Define Components: Identify and list UI and code affordances.
Generate Diagrams: Create wiring diagrams using Mermaid for clear communication.
Produce Parts Lists: Detail the buildable chunks of a feature.
Fit Check: Ensure requirements align with the proposed solution.
Use Case: Before building a new feature, use this Skill to create a breadboard that outlines all the screens, buttons, API calls, and data flows involved, providing a clear blueprint for developers and designers.

Quick Start

Use the breadboarding skill to shape the user flow for a new feature, starting with the entry point and outlining key affordances and navigation.

Frequently Asked Questions about breadboarding

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

FAQPage Schema

What is software breadboarding and how does it help with feature design?▼

Software breadboarding is a technique that defines places, affordances, and connections to create concrete blueprints for software changes. It ensures buildability and clarity by mapping UI components and code logic before development begins.

How do I create a wiring diagram for my software architecture?▼

You can generate wiring diagrams for your software architecture by mapping system flow and connections using Mermaid syntax. This produces clear visual communication of user interactions, navigation paths, and data flows.

How do I generate an affordance inventory for UI and code components?▼

Generate an affordance inventory by identifying and listing all UI and code affordances within a software feature. This process details the buildable chunks of the solution and produces a comprehensive parts list.

Can I use Shape Up principles to map user flows before building a feature?▼

Yes, you can use Shape Up principles to shape user flows before building a feature. This approach outlines key affordances and navigation from the entry point, providing a clear blueprint for designers and developers.

How do I perform a fit check against software requirements?▼

Perform a fit check by comparing your proposed software breadboard solution against initial project requirements. This validates that the defined places, affordances, and connections align with project needs before implementation.

Does Mermaid work well for generating software design diagrams?▼

Mermaid works well for generating software design diagrams by rendering wiring diagrams from defined component connections. It supports clear communication of architecture and system flow directly within documentation.