--- title: stacking-chains summary: 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. tags: [meta, routing, workflow] --- # Stacking chains — ordered routes for multi-step jobs 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 - HKTITAN — orderings distilled from repeated multi-cluster sessions; companions: [[routing-table]], [[disambiguation]].