skills.rest
nsuberi
nsuberiCOMMUNITY
Explore all skills by this author →
GitHub

breadboarding

Convert markdown feature sketches into structured breadboards with affordances and wiring.

Updated Jul 5, 2025
Search Tags:#implementation-plan#breadboarding#affordances#markdown-parsing#technical-shaping#wiring-diagrams
One-click install
npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill breadboarding-nsuberi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: breadboarding
Source: https://github.com/nsuberi/proto-portal-showcase-hub/tree/main/.claude/skills/breadboarding
Command: npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill breadboarding-nsuberi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Breadboarding reduces uncertainty between product ideas and engineering by translating rough sketches and conversations into a structured technical breadboard that lists places, UI affordances, code affordances, wiring, and an implementation-ready plan.

Core Features & Use Cases

  • Markdown import and parsing: Convert headers and lists from rough markdown sketches into PLACE and TRIGGER entries and raw affordances.
  • Affordance classification & ID assignment: Classify items into UI (U#) and Code (N#) affordances, assign sequential IDs, and detect nesting-based wiring relationships.
  • Wiring inference & impact analysis: Infer data flow from nesting and naming, produce wiring diagrams and wiring tables, and generate impact tables showing affected affordances.
  • Reference-aware updates: Cross-reference existing affordances files to avoid ID collisions and continue ID sequences.
  • Claude Code-ready implementation plans: Translate breadboards into file manifests, data models, function signatures, component specs, wiring pseudocode, and acceptance criteria for code execution.
  • Use cases: early-stage shaping sessions, product/design-to-engineering handoffs, prototype planning, and generating implementation tickets from discovery notes.

Quick Start

Use the breadboarding skill to convert a markdown sketch of a feature into a breadboard with places, U/N affordances, inferred wiring, and an implementation plan.

Frequently Asked Questions about breadboarding

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

FAQPage Schema
How do I convert rough markdown sketches into structured technical implementation plans?▼

To convert markdown sketches into implementation plans, the breadboarding process parses markdown headers and lists to identify UI and code affordances, infer data flow wiring, and generate machine-parseable tables. This structured output directly bridges product ideas and engineering execution.

What is technical breadboarding in product shaping?▼

Technical breadboarding is a product shaping technique that translates rough feature sketches and conversations into a structured list of places, UI affordances, code affordances, and inferred wiring. This reduces uncertainty between product ideas and engineering by providing a clear technical blueprint.

How do I generate wiring diagrams and impact analysis from feature discovery notes?▼

You can generate wiring diagrams and impact analysis from discovery notes by parsing markdown nesting and naming conventions. The system infers data flow relationships between classified UI and code affordances, producing tables that show exactly which components are affected.

Can I update existing affordances files without causing ID conflicts?▼

Yes, you can update existing affordances files without ID conflicts by cross-referencing existing entries during parsing. The system detects current sequential UI (U#) and Code (N#) IDs and continues the sequence safely for any new affordances added.

What is the best way to prepare Claude Code-ready implementation plans from design discussions?▼

The best way to prepare Claude Code-ready implementation plans from design discussions is to translate the technical breadboard into file manifests, data models, function signatures, component specs, and acceptance criteria. This provides a structured, executable blueprint for code generation.

Related Skills

Explore More Product & Management Skills→
TIAN0517TIAN0517

frontend-design

Transform UI design requirements into TypeScript frontend code with CSS variable tokens.

Community
Advanced
nklischnklisch
7

design

Generate design documents specifying interfaces, file paths, and acceptance criteria.

Community
Advanced
rjsrjs
1.4k

breadboarding

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

Community
Basic
koolamusickoolamusic
9

breadboarding

Map software workflows into structured affordance tables with wiring relationships.

Community
Advanced