skills.rest
ReadyStateChange
ReadyStateChangeOFFICIAL
Explore all skills by this author →
GitHub

breadboarding

Translate workflow descriptions into breadboard tables and Mermaid wiring diagrams.

Updated Mar 8, 2026
Search Tags:#ui#architecture#code#workflows#mapping#breadboarding#affordances
One-click install
npx skills add https://github.com/ReadyStateChange/agents --skill breadboarding-readystatechange
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ianclearyiancleary
1

breadboarding

Transform workflow descriptions into UI and code affordance tables.

Community
Advanced
almeidamarcellalmeidamarcell
6

breadboarding

Convert workflow descriptions into structured UI and code affordance maps.

Community
Advanced
gaogg521gaogg521
33

mermaid

Render Mermaid code to SVG or ASCII diagrams.

Community
Intermediate
koolamusickoolamusic
9

breadboarding

Map software workflows into structured affordance tables with wiring relationships.

Community
Advanced