Layers Interaction Flow
This is a structured approach to mapping interaction flows before you commit to visuals. It centers on breadboarding, a text notation from Shape Up that forces you to name places, affordances, and destinations explicitly. The discipline is in the edges: you're expected to design failure paths, empty states, and error conditions as required steps, not afterthoughts. It includes a set of techniques for different contexts (task analysis for redesigns, service blueprinting when backstage operations are involved) and clear rules like "every affordance has a named destination" and "no broken objects." If you're tired of flows that fall apart when someone hits the back button or loses connection, this gives you a checklist and notation to catch those gaps early.
- skills.sh installs
- 2K
- GitHub stars
- 314
- last updated
- Aug 21, 2026
Install
$ npx -y skills add jamiemill/layers-skills --skill layers-interaction-flow --agent claude-codeInstalls into .claude/skills of the current project.
Files
/layers-interaction-flow
Assumes /layers-intro has been loaded. This skill is a library of techniques, not a script — see "How to use these skills" there.
The interaction structure and flow layer defines how a person interacts with the product: the places they navigate, the affordances available, the content presented, and the flow between states. It sits above the conceptual model (which defines what exists) and below the surface (which defines how it looks).
A breadboard is always for a particular user in a particular situation doing a particular job. Know which job story before you start.
The decisions this layer makes
- The distinct places this flow moves through
- What the user can do in each place, and where each action leads
- What content each place needs to show
- What happens on failure paths, empty states, and edge cases
- Whether the flow is as simple as it can be while still serving the job
If the conceptual model beneath isn't stable, flows built on it often need redoing — check that first.
Disciplines — what keeps a flow honest
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/jamiemill/layers-skills
- Categories
- Backend & APIs, Design & UI/UX
- First seen
- Jun 3, 2026
More from jamiemill/layers-skills
All 9Recommended
More Backend & APIs
rowank-dense-ai/scientific-agent-skillsRowan is a cloud-native molecular modeling and medicinal-chemistry workflow platform with a Python API. Use for pKa and macropKa prediction, conformer and tauto2Kskills.sh installsomero-integrationk-dense-ai/scientific-agent-skillsSecurely inspect and automate microscopy data workflows against OMERO.server with omero-py, BlitzGateway, OMERO CLI, tables, annotations, ROIs, rendering, and d2Kskills.sh installsopentrons-integrationk-dense-ai/scientific-agent-skillsAuthor, review, migrate, simulate, and troubleshoot official Opentrons Python Protocol API v2 protocols for Flex and OT-2 robots. Use for robot-specific liquid 2Kskills.sh installspylabrobotk-dense-ai/scientific-agent-skillsDevelop and review PyLabRobot lab-automation resources, liquid-handling plans, offline simulations, and supported-device integrations. Use for PyLabRobot protoc2Kskills.sh installs
ts-libraryonmax/nuxt-skillsUse when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type 2Kskills.sh installs
physical-ai-defect-image-generationnvidia/skillsUse when the user wants to orchestrate defect image generation with NVIDIA Cosmos AnomalyGen (Cosmos-Predict2-derived) on OSMO for PCBA, metal surface, and glas2Kskills.sh installs