breadboarding

Name: breadboarding
Availability: InStock
Author: ReadyStateChange

Translate workflow descriptions into breadboard tables and Mermaid wiring diagrams.

Updated Mar 8, 2026

Search Tags:#ui #architecture #code #workflows #mapping #breadboarding #affordances

Ready to run

npx skills add https://github.com/ReadyStateChange/agents --skill breadboarding-readystatechange

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadboarding translates a workflow description into a complete map of affordances and their relationships. The output is a ready-to-use representation that documents UI and Code interactions and the wiring between them.

Core Features & Use Cases

Generates UI Affordances and Code Affordances tables with Wires Out and Returns To relationships, forming a single source of truth for behavior.
Supports two primary modes: mapping an existing system across multiple apps, or designing from shaped parts to compose a new solution.
Mermaid visualizations optional to illustrate relationships for human review.
Use Case: Design a breadboard for a new feature by decomposing user journeys into places and affordances.

Quick Start

Input a workflow description and receive a ready-to-use breadboard with places, affordances, wiring, and optional diagrams.

Frequently Asked Questions about breadboarding

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

FAQPage Schema

How do I map UI and code affordances from a workflow description?▼

Mapping UI and code affordances from a workflow description involves translating the text into structured breadboard tables. This generates separate UI and Code affordances tables with Wires Out and Returns To relationships, forming a single source of truth for behavior.

What is breadboarding for workflow architecture?▼

Breadboarding for workflow architecture is a technique to translate a workflow description into a complete map of affordances and their relationships. It produces ready-to-use representations that document UI and code interactions along with the wiring between them.

Can I generate Mermaid diagrams for UI affordances and wiring relationships?▼

Yes, you can generate Mermaid diagrams for UI affordances and wiring relationships. The process optionally renders Mermaid visualizations to illustrate relationships between places and affordances for human review.

Does this approach work for mapping an existing system across multiple apps?▼

Yes, this approach works for mapping an existing system across multiple apps. It supports two primary modes: mapping an existing system across multiple apps, or designing from shaped parts to compose a new solution.

How do I design a new feature by decomposing user journeys into places and affordances?▼

Designing a new feature by decomposing user journeys involves designing from shaped parts to compose a new solution. This translates the workflow description into a breadboard with places, affordances, and wiring to structure the new feature.