Skip to content
ExamsLibraryFor agentsConnect your agent
metaMeta: working with agents·21/26

Stacking chains — ordered routes for multi-step jobs

Ordered node chains for multi-step jobs — a new screen, a feel-better pass, a design system, a marketing site — so sequencing decisions aren't re-derived per session.

Raw markdown On GitHub

Single questions route to single nodes (routing-table). Real jobs — "build this screen", "make the app feel better" — chain several clusters, and the order matters: deciding motion before layout wastes work; polishing before the states exist polishes the wrong thing. These chains encode the orderings that survived use.

The chains

Screen loop (the order for one screen)

decide, if you can't describe it yet (options, prototype-picker) → foundations: hierarchy, spacing and alignment, deleting what adds nothing (feeling-right) → one material pass for what the screen is made of: forms (forms-behavior), surfaces (depth-and-nesting), type (type-scale-and-rhythm), a reusable component's API (component-api-design) or a landing page (marketing-surface-rules) → refine: polish, then motion, mobile or a11y only if that is the problem → review → once every screen is done, ship on the whole app (ship-check).

Look at the screen between passes (directing-agents). Product UI aims at correctness over novelty, so a screen that looks conventional after foundations is working as intended.

New feature screen, start to ship

feeling-right → typography-humanity + color-monochromatic + shadows-whisper → forms-validation (if inputs) → animation-decision-framework → accessibility-baseline → review-checklist → review-format

Structure first, surfaces second, behavior third, motion only after the static version works, floor checks before the gate.

"Make this app feel better"

motion-auditor (audit what exists) → delight-impact-curve (where motion is missing — propose few) → review-checklist (the finishing pass)

Fix what's wrong before adding what's absent.

Design system from scratch

color-monochromatic → typography-humanity → shadows-whisper + border-radius → using-design-md (capture the tokens so agents consume, not reinvent)

Marketing surface

marketing-vs-product-ui → typography-humanity → product shots (product-shot-framing → faux-ui-restraint → demo-story-and-loops → demo-rehearsal; a feature grid via bento-grids) → ai-default-tells (delete pass) → review-format

Marketing tolerates more expression and less default — the deletion pass is not optional here.

Accessibility pass

accessibility-baseline → contrast-and-color-scheme → prefers-reduced-motion

Slow or janky app

transform-opacity-only → debugging-animations → duration-table

Property discipline first — most jank is animating the wrong property, not animating too much.

Add sound to a product

sound-decision-framework (reject most) → sound-palette (one material, write the manifest) → sound-generation-elevenlabs or sound-generation-open-source → sound-spec → sound-playback-web → sound-motion-sync → review-checklist

Decide before designing, design before generating, spec before wiring. Or spawn sound-designer for the whole chain.

Launch video or logo reveal

launch-video-registers (name the register) → launch-video-structure (beats) → launch-video-type + launch-video-ui-demo + launch-video-motion (words, product, in-shot motion) → launch-video-seams + launch-video-cuts (lock picture) → launch-video-sound (pick the sound register) → sound-from-motion or launch-video-music → sound-motion-sync (transients and cuts on onsets) → launch-video-review (≤ −1 dBTP, loudness stated)

Picture locks first; sound is placed on frames and cannot be placed on frames that move. Under a voice-over the voice locks before picture: re-time scenes to its word onsets, then lock picture (launch-video-music).

Don't know what it should look like yet

prototype-picker — three genuinely different versions behind a live picker, each diverging on a named axis (layout, density, personality, motion, interaction model), numbers on controls, the decision written down, the harness deleted. Converge on one, then enter the "new feature screen" chain at the surfaces step. Only a vibe and no target → vibe-to-generator; a target the prompt keeps missing → build-a-tool. See taste-is-trained: comparison is how taste gets exercised.

Mascot or vector asset, from clip to product

icon-systems (the brief: flat, few colors, one stroke language) → svg-creation → video-to-vector-pipeline (if the source is a clip) → svg-animation → sound-motion-sync (if it has a reveal) → review-checklist

"Looks AI-generated"

unslop-pass (subtract, then sweep) → copy-tells → color-scales-oklch + typography-humanity (put a point of view back) → review-format

Documenting the system for agents

design-system-docs (inventory, template, verify by prompting) → using-design-file or using-design-md (where the machine-readable half lives) → skill-writing-rules (the language)

Rules

  1. Chains are orderings, not checklists. Skip links that don't apply; never reorder them.
  2. Each link is a read, not a rewrite. Enter a link, apply its values to the work in hand, move on.
  3. Every shipping chain ends at review-format. If the chain ends and no review happened, it isn't done.
  4. gotchas and pov apply at every link, not as a final step — an installer override can prune a whole link.

Gotcha

Don't run a full chain on a one-line change. Chains are for jobs that touch three or more clusters; a hover tweak routes through routing-table to one node and stops.

Sources

metaroutingworkflow