breadboarding

Convert workflow narratives into breadboard maps of UI and code affordances.

1.4k|90|Updated Jan 29, 2026

Search Tags:#architecture #UI #code #mapping #system-design #breadboarding #affordances

Ready to run

npx skills add https://github.com/rjs/shaping-skills --skill breadboarding

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadboarding converts a workflow description into a concrete map of interactions, enabling teams to reason about UI and code affordances and their wiring before implementation.

Core Features & Use Cases

Affordance mapping: derive actionable UI and code interaction points from a shaped workflow.
Two-flow visualization: represent navigation between Places and data flow between affordances.
Use Case: design a new feature by turning a rough shape into a breadboard that reveals missing connections and dependencies.

Quick Start

Use breadboarding to translate an existing workflow description into a breadboard diagram and its associated tables for a new capability.

Frequently Asked Questions about breadboarding

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

FAQPage Schema

How do I map workflow narratives into UI and code affordances?▼

To map workflow narratives into UI and code affordances, you translate the workflow description into a breadboard diagram. This process reveals interaction boundaries, navigation paths, and data flows suitable for engineering reviews.

What is breadboarding in system design and architecture?▼

Breadboarding in system design is a technique that converts a workflow description into a concrete map of interactions. It enables teams to reason about UI and code affordances and their wiring before actual implementation begins.

How do I visualize navigation paths and data flows for a new feature?▼

You visualize navigation paths and data flows by creating a breadboard map from your shaped workflow. This two-flow visualization represents navigation between Places and data flow between affordances to reveal dependencies.

Can I use breadboarding to find missing connections in an existing system?▼

Yes, you can use breadboarding to find missing connections in an existing system. It applies to design-to-implementation tasks for both new shapes and existing systems by outputting structured artifacts like Places and wiring relationships.

What structured artifacts does a breadboard map output for engineering reviews?▼

A breadboard map outputs structured artifacts such as Places, UI affordances, and code affordances. These artifacts include wiring relationships that explicitly define interaction boundaries for engineering reviews.

Does breadboarding require any dependencies to map workflows?▼

No, breadboarding requires no dependencies to map workflows. You simply provide an existing workflow description or a rough shape to translate it into a breadboard diagram and its associated tables.