breadboarding

Convert workflow descriptions into structured UI and code affordance maps.

6|1|Updated Feb 8, 2026

Search Tags:#architecture #mermaid #diagramming #workflow-design #system-design #breadboarding #affordances

Ready to run

npx skills add https://github.com/almeidamarcell/claude-code-skills --skill breadboarding-almeidamarcell

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadboarding turns a plain workflow description into a structured map of user-interface and code-level affordances and their relationships, enabling clear design and communication.

Core Features & Use Cases

Generates UI and Code affordance tables that expose relationships and constraints
Produces optional Mermaid diagrams for visual storytelling
Supports both mapping existing systems and designing new architectures from shaped parts

Quick Start

Provide a workflow description and I will produce a breadboard with UI and code affordances.

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?▼

To map UI and code affordances from a workflow description, provide the text to generate structured tables and optional Mermaid diagrams. This process enforces disciplined wiring, containment, and data flow for traceable system designs.

What is breadboarding in system architecture design?▼

Breadboarding in system architecture design is a technique that converts a plain workflow description into a structured map of user-interface and code-level affordances. It exposes relationships and constraints to enable clear design and team communication.

Can I generate Mermaid diagrams for system design automatically?▼

Yes, you can generate Mermaid diagrams for system design automatically by inputting your workflow description. The skill produces optional Mermaid diagrams for visual storytelling alongside structured UI and code affordance tables to map relationships.

How do I map an existing system's UI affordances and constraints?▼

You can map an existing system's UI affordances and constraints by providing its workflow description to generate structured tables. This approach exposes relationships and enforces wiring discipline to document current system architecture clearly.

Does breadboarding require any specific diagramming dependencies or components?▼

No, breadboarding requires no specific diagramming dependencies or components to function. It inherently processes plain workflow descriptions to output affordance tables and Mermaid diagrams without external package requirements.

What is the best way to design new architecture from shaped parts?▼

The best way to design new architecture from shaped parts is using breadboarding to enforce disciplined wiring, containment, and data flow. It converts workflow descriptions into structured affordance maps, ensuring traceable and shareable system designs.