1. Habit
  2. Skills
  3. Layers Interaction Flow skill
jamiemill · 2K installs

Layers Interaction Flow skill
Runs by itself, new job story to map.

Flows mapped with every edge case.

Install the Layers Interaction Flow skill and make it a habit: follow https://gethabit.dev/skills/jamiemill/layers-interaction-flow.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

2K installs311 starsMIT licenceSource on GitHub ↗

Layers Interaction Flow

by jamiemill · 2K installs

The skill

The layers interaction flow skill helps product designers map places, affordances, edge cases and failure paths with breadboards before any visual design.

Only when you ask.

The habit

Flows mapped with every edge case.

↻ Runs by itselfnew job story to map

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

new job story to map. Runs in Claude Code routine.

  • ↻ new job story to map
  • run when a flow for a job story needs design

02

It checks its work

every affordance has destination. If a check fails, it tries again.

  • ✓every affordance in the breadboard names a destination place
  • ✓failure, empty, loading and cancel paths are breadboarded
  • ✓one job story uses 6 places or fewer, or a reason is noted

03

It remembers

breadboards and open decisions. The next run reads it first: earlier breadboards and unresolved edge cases.

loops/flow-breadboard-loop/breadboards.md

One run, step by step.
Then it stops.

Stop ruleStops after one job story per run.

  1. 01

    Load the framework

    Load /layers-intro first.

  2. 02

    Settle the job

    Agree with you on the job story, starting point and success.

  3. 03

    Check the model

    Confirm the /layers-conceptual-model objects beneath are stable.

  4. 04

    Breadboard

    Name places and map each affordance to a destination in breadboard notation.

  5. 05

    Walk the edges

    Walk the happy path, then validation, server error, timeout and concurrent edit paths.

  6. 06

    Capture

    Save the breadboard, an optional graph LR diagram and open decisions.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Layers Interaction Flow skill helps.

Use it when

  • ✓ You map a user flow before wireframes
  • ✓ You find missing edge cases
  • ✓ You redesign an existing flow

Skip it when

  • – The conceptual model is still unstable
  • – You only need visual polish

Questions

Layers Interaction Flow skill, answered.

Is a breadboard a wireframe?

No. It sets interaction logic without committing to visual form.

When is a flow too big?

More than 5 to 6 places for one job story is a signal to collapse.

How do I install the Layers Interaction Flow skill?

Copy the prompt at the top into your agent. It installs the skill from jamiemill/layers-skills and sets up the habit. Or run npx skills add jamiemill/layers-skills --skill layers-interaction-flow.

Is the Layers Interaction Flow skill free?

Yes. It is published under MIT. Habit is free too.

Layers Interaction Flow. Now as a habit.

Install the Layers Interaction Flow skill and make it a habit: follow https://gethabit.dev/skills/jamiemill/layers-interaction-flow.md

  • Free
  • No account
  • Undo in one line

All jamiemill skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by jamiemill, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.