skills.rest
dialpad
dialpadOFFICIAL
Explore all skills by this author →
WebsiteGitHub

breadboarding

Map workflow descriptions into tabled UI and Code affordances with wiring relationships.

15|7|Updated Oct 24, 2023
Search Tags:#design-systems#mermaid-diagrams#breadboarding#token-build#dialtone#ui-affordances#code-affordances
One-click install
npx skills add https://github.com/dialpad/dialtone --skill breadboarding-dialpad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: breadboarding
Source: https://github.com/dialpad/dialtone/tree/main/.claude/skills/breadboarding
Command: npx skills add https://github.com/dialpad/dialtone --skill breadboarding-dialpad

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadboarding transforms a workflow description into a complete map of affordances and their relationships. The output is always a set of tables showing numbered UI and Code affordances with their Wires Out and Returns To relationships. The tables are the truth. Mermaid diagrams are optional visualizations for humans.

Core Features & Use Cases

  • Map an existing Dialtone system to UI and Code affordances (UI table, Code table, optional Mermaid diagram).
  • Design from shaped parts by detailing mechanisms and their interactions as a system.
  • Create vertical slices of a breadboard to demo incremental capabilities across tokens, CSS, Vue, and docs.

Quick Start

Describe the workflow to map and I will output the 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 for a design system workflow?▼

Mapping UI and code affordances involves transforming a workflow description into a table of numbered UI and code components, tracing their Wires Out and Returns To relationships. The output provides a complete, tabled representation of system interactions.

What is a breadboard in design systems and when do I need it?▼

A breadboard is a tabled representation of UI and code affordances with traceable wiring relationships. You need it when analyzing existing Dialtone systems or shaping new features from parts across documentation, component, CSS, and token layers.

How do I generate a Mermaid diagram from a workflow description?▼

To generate a Mermaid diagram, provide a workflow description to map. The system outputs UI and code affordance tables as the source of truth, with an optional Mermaid diagram visualization for human readability.

Can I create vertical slices of a design system across tokens, CSS, and Vue?▼

Yes, you can create vertical slices of a breadboard to demo incremental capabilities. This maps interactions across tokens, CSS, Vue, and documentation layers while maintaining build-like provenance from tokens to docs.

Does breadboarding require a predefined set of Places and Affordances?▼

Yes, breadboarding requires a defined Places and Affordances set. It also demands traceable Wires Out and Returns To, ensuring adherence to build-like provenance from tokens to documentation before mapping begins.

What is the best way to detail mechanisms and interactions when designing from shaped parts?▼

The best way to detail mechanisms is by shaping new features from parts as a system. This produces tabled UI and code affordances with explicit wiring relationships, serving as the truth for the designed interactions.

Related Skills

Explore More Design & Creative Skills→
ianclearyiancleary
1

breadboarding

Transform workflow descriptions into UI and code affordance tables.

Community
Advanced
sandalsoftsandalsoft

visual-explainer

Generate self-contained HTML diagrams with Mermaid and CSS styling.

Community
Intermediate
ProfPowellProfPowell
1

css-author

Organize CSS with layers, nesting, and design tokens.

Community
Intermediate
koolamusickoolamusic
9

breadboarding

Map software workflows into structured affordance tables with wiring relationships.

Community
Advanced