skills.rest
porcupine-md
porcupine-mdOFFICIAL
Explore all skills by this author →
GitHub

breadboarding-workflow

Map UI and code affordances to reveal feature connections and data flows.

11|2|Updated Apr 7, 2026
Search Tags:#ui-design#feature-design#workflow-mapping#breadboarding#affordances#code-wiring
One-click install
npx skills add https://github.com/porcupine-md/jonggrang --skill breadboarding-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: breadboarding-workflow
Source: https://github.com/porcupine-md/jonggrang/tree/main/skills/core/breadboarding-workflow
Command: npx skills add https://github.com/porcupine-md/jonggrang --skill breadboarding-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadboarding Workflow helps teams map the relationships between user interface elements and the underlying code, making it easier to reason about how features wire together and where data flows occur.

Core Features & Use Cases

  • Identify Places (UI contexts), Affordances (actions and readable data), and Connection Lines (transitions between steps).
  • Draft a breadboard representation linking UI and code, enabling clearer collaboration between design and engineering.
  • Save the artifact as breadboarding.md within the active feature directory and reuse across tasks.

Quick Start

Create a breadboard mapping for the active feature and save it as breadboard.md in the feature directory.

Frequently Asked Questions about breadboarding-workflow

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

FAQPage Schema
How do I map UI affordances to code connections during feature design?▼

Map UI affordances to code connections by defining Places, Affordances, and Connection Lines to reveal user actions and data flows. This visualizes how features wire together for design and engineering collaboration.

What is a breadboard workflow for UI and feature design?▼

A breadboard workflow maps UI and code affordances to reveal how features connect to user actions and data flows. It helps teams reason about feature wiring during discovery, design reviews, and handoffs.

How do I create a breadboard mapping for dashboards, forms, and workflows?▼

Create a breadboard mapping by drafting a breadboard.md artifact containing Places, Affordances, and Connection Lines. Save it in the active feature directory for traceability and reuse across tasks.

Can I use breadboarding for design reviews and engineering handoffs?▼

Breadboarding supports design reviews and engineering handoffs by linking UI and code representations. It enables clearer collaboration between design and engineering teams across feature workflows.

Do I need a specific file format to save breadboard mappings?▼

You need to save breadboard mappings as a breadboard.md file within the active feature directory. This markdown artifact contains Places, Affordances, and Connection Lines for traceability.

What are the limitations of using breadboarding for UI design workflows?▼

Breadboarding requires a clearly defined artifact containing Places, Affordances, and Connection Lines to function properly. It applies to feature design across dashboards, forms, and workflows but needs a defined active feature directory.

Related Skills

Explore More Design & Creative Skills→
rjsrjs
1.4k

breadboarding

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

Community
Basic
DKSangDKSang
2

des-create-epic

Generate an implementation-level Epic Catalog from DES planning artifacts.

Community
Advanced
dembrandtdembrandt
33

gestalt-ui-organisation

Organize UI layouts and component groups using visual grouping principles.

Official
Basic
truongnattruongnat

ux-design-pro

Support UX design with user research, information architecture, wireframing, and WCAG accessibility standards.

Community
Advanced