skills.rest
rjs
rjsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/rjs/shaping-skills --skill breadboarding
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ReadyStateChangeReadyStateChange

breadboarding

Translate workflow descriptions into breadboard tables and Mermaid wiring diagrams.

Official
Advanced
ianclearyiancleary
1

breadboarding

Transform workflow descriptions into UI and code affordance tables.

Community
Advanced
codesour-designcodesour-design

layers-interaction-flow

Map user flows with breadboard notation for places, affordances, and edge cases.

Community
Advanced
KILWA73KILWA73

diagram-generator

Render UML diagrams as inline SVG from user descriptions.

Community
Advanced