---
title: routing-table
summary: Intent → entry-node router. Name the job first, then open exactly one node — most questions have one canonical entry point into the graph.
tags: [meta, routing, navigation]
---

# Routing table — intent → entry node

Most wasted context comes from opening the wrong cluster. Before reading anything, classify the user's intent into one of four postures, then jump straight to the entry node for that job. One good entry beats scanning three MOCs.

## The four postures

| Posture | The user wants… | Output shape |
|---|---|---|
| **Build** | UI produced or changed | Code, using the cluster's values |
| **Judge** | Existing work assessed | A table or list — never unsolicited edits |
| **Decide** | A call made *before* building | A yes/no or a pick, with the trade named |
| **Name** | The precise word for a thing | The term, one line, stop |

Judge-posture outputs are read-only: return the [[review-format]] table or a deletion list, don't rewrite the code unless asked. Decide-posture nodes (like [[animation-decision-framework]]) must be consulted *before* writing code, not cited after. Name-posture lookups ([[design-vocabulary]]) answer and stop — no implementation.

## The router

| You want to… | Open first |
|---|---|
| Understand why a screen feels flat or assembled | [[feeling-right]] |
| Decide whether something should animate at all | [[animation-decision-framework]] |
| Pick easing / duration for one animation | [[easing-curves]], then [[duration-table]] |
| Build drag / swipe / momentum interactions | [[gesture-momentum]], [[spring-animations]] |
| Rapid presses miss moving items; a dragged card slides under its neighbours on release | [[animated-hit-testing]] |
| An animation lands differently at 30, 60 and 120 fps, or jumps after a stalled tab | [[frame-rate-independence]] |
| The reading position jumps when content above it loads or reflows | [[scroll-anchoring]] |
| A dropdown hides under the header; `z-index: 9999` | [[z-index-strategy]] |
| Fix jank, stutter, or layout thrash | [[transform-opacity-only]], then [[debugging-animations]] |
| Pick or fix a typeface, wrapping, tracking | [[typography-humanity]], [[line-length-tracking]] |
| Build a palette, fix contrast, derive dark mode | [[color-monochromatic]], [[contrast-and-color-scheme]], [[dark-mode]] |
| Add depth — shadows, borders, radii | [[shadows-whisper]], [[border-radius]] |
| Build a form that behaves | [[forms-validation]] |
| Write empty / loading / error states | [[empty-loading-states]], [[states-are-the-work]] |
| Write UI copy or error messages | [[copy-voice]] |
| Review a UI diff before shipping | [[review-format]] + [[review-checklist]] (or spawn [[ui-reviewer]]) |
| Review a diff that is *specifically* motion | [[motion-auditor]] |
| Review a PR, branch or uncommitted change for what it broke | [[change-scoped-review]]; with Jakub Krehel's skills → `/interface-review` ([[interfaces-reconciliation]]) |
| Make a custom widget keyboard-operable — tabs, menu, combobox, dialog | [[keyboard-patterns]] |
| Toasts, "Saved", result counts or errors a screen reader never hears | [[screen-reader-announcements]] |
| Is this an accessibility finding or a preference? Contrast, target size, zoom, reflow numbers | [[wcag-thresholds]] |
| Name colour tokens, split primitives from semantics, theme without touching components | [[color-token-tiers]] |
| Decide which palette steps and ramps exist; audit a palette with too many colours | [[palette-step-roles]] |
| A gradient goes grey in the middle, bands, or carries text | [[gradient-interpolation]] |
| Things don't read as groups; separators everywhere; controls look like text | [[grouping-by-space]] |
| German breaks the button; a grid overflows; container queries; breakpoints | [[growth-and-overflow]] |
| Mirror a layout for Arabic or Hebrew; mixed-direction text | [[logical-properties-rtl]] |
| Plurals, string concatenation, dates and currency per locale; button and link labels | [[strings-and-locale]] |
| Delete, archive, revoke — undo or confirm, and the dialog's words | [[destructive-actions]] |
| Render a component under worst-case content and widths, or every state it has | [[stress-scenarios]] |
| "How did they build that?" — explain another site, effect or screenshot | [[reading-others-interfaces]] |
| Audit "does this look AI-generated?" | [[ai-default-tells]] (or spawn [[anti-pattern-scanner]]) |
| Build a marketing / landing surface | [[marketing-vs-product-ui]] |
| Build a faux product UI — a hero demo, feature card, docs plate or cursor walkthrough | [[product-shot-framing]], then [[faux-ui-restraint]] (or `/design-engineering stage`); with Stageshow → [[stageshow-reconciliation]] |
| Script a looping product demo: beats, poster, reset, cursor | [[demo-story-and-loops]], then [[demo-cursor-and-touch]] |
| Plan or fix a bento grid of feature tiles | [[bento-grids]] |
| Check an animated demo frame by frame before handing it over | [[demo-rehearsal]] |
| Show who is here, half here or gone in a real-time product | [[presence-signals]] |
| Add drawing or markup to a product | [[drawing-toolbar]] |
| Consume a project's DESIGN.md tokens | [[using-design-md]] (or spawn [[design-md-consumer]]) |
| Put the right word to a design idea | [[design-vocabulary]] |
| Decide whether an interaction should make a sound | [[sound-decision-framework]] |
| Design or generate a set of UI sounds | [[sound-palette]], then [[sound-generation-elevenlabs]] or [[sound-generation-open-source]] (or spawn [[sound-designer]]) |
| Sync a sound to an animation, or fix one that feels late | [[sound-motion-sync]] |
| Plan a launch film — register, beats, when the name lands, endcard | [[launch-video-registers]], then [[launch-video-structure]] |
| Time words, typed prompts, a cursor or an agent's wait in a launch film | [[launch-video-type]]; prompts, cursor and agent output → [[launch-video-ui-demo]] |
| Make launch-film motion feel alive — settles, springs, blur, holds, rhythm | [[launch-video-motion]] |
| Cut a multi-scene video — seams, hard cuts, the ledger | [[launch-video-seams]]; hard cuts → [[launch-video-cuts]] |
| Score a launch video or logo reveal | [[launch-video-sound]] (pick the register); a music track or a voice → [[launch-video-music]]; derive the stem → [[sound-from-motion]] |
| Review a launch film, or measure a reference film | [[launch-video-review]] (or spawn [[launch-film-analyst]]); inside HyperFrames → [[hyperframes-reconciliation]]; in Remotion with cinetic → [[cinetic-reconciliation]]; with scenario-kinetic-film → [[scenario-kinetic-reconciliation]] |
| Render a film from code: motion blur, a beat grid from generated music, a 4K master that plays everywhere | [[film-as-function-of-time]] |
| Make a loop, a logo sting, or a 9:16 / 1:1 cut of a film | [[launch-video-formats]] |
| Design a whoosh, riser, impact, sting, ding or pop that sounds designed, not stock | [[designed-sfx-anatomy]] |
| Listen to a sound or a film's soundtrack with a tool; pick or trim a recording | [[earshot-reconciliation]] |
| Check whether a recording or track may go in a launch film; write its credit | [[sound-licensing]] |
| Decide which skill or companion should own a job | [[skill-router]] |
| Build an OKLCH palette or ramp, repair contrast by lightness | [[color-scales-oklch]] |
| Fix pinched corners, harsh borders, dark-mode cards vanishing | [[depth-and-nesting]] |
| Set up a type scale, leading, tracking, font loading | [[type-scale-and-rhythm]] |
| Fix wrapping, truncation, underlines, casing, RTL | [[line-behavior]] |
| Make a form behave (labels, Enter, loading, autofocus) | [[forms-behavior]] |
| Make it work on touch, keyboard, screen readers, iOS | [[touch-and-focus]] |
| "Feels unfinished" with nothing obviously wrong | [[ui-polish-pass]] |
| Design a component's props API | [[component-api-design]] |
| Build a landing page, docs site, blog, changelog | [[marketing-surface-rules]] |
| "It's pushed to one side", "random empty space", "no clear title" — fix a page's frame | [[page-frame]] |
| Critique a rendered page from screenshots, round by round | [[screenshot-critique]] |
| Build or review a dashboard: KPIs, deltas, tables of numbers | [[dashboard-tells]] |
| Fix jank, layout shift, slow lists (measured slowness) | [[performance-discipline]] |
| "Looks AI-generated" — run the pass | [[unslop-pass]]; copy → [[copy-tells]]; code → [[code-tells]] |
| Create or clean up an SVG | [[svg-creation]] (or spawn [[svg-creator]]) |
| Animate an SVG, morph a path, vectorize a clip | [[svg-animation]], [[svg-path-morphing]], [[video-to-vector-pipeline]] (or spawn [[svg-animator]]) |
| Draw or animate a playful isometric sticker for an empty state, onboarding or a feature card | [[isometric-stickers]]; with fun-isometric installed → [[fun-isometric-reconciliation]] |
| Decide whether something should be a diagram, and where it lives (a figure, a canvas, a Mermaid block) | [[diagram-decision]] |
| Draw or review an architecture, flow, sequence or chart figure | [[diagram-craft]]; with diagram-design and a `.design` → [[diagram-design-reconciliation]] |
| Edit a whiteboard, a planning board, or a `.tldraw` / `.tldr` file | [[tldraw-canvas]] |
| Explore several directions before deciding | [[prototype-picker]] |
| Stop re-prompting; build the tool that makes the artifact | [[build-a-tool]]; no target yet → [[vibe-to-generator]] |
| Write design docs an agent can follow | [[design-system-docs]] |
| Write or fix a skill file, or [[pov]] | [[skill-writing-rules]] |
| Measure whether a change made output better | [[design-benchmarks]] |
| Get the app ready to launch: every lane, fixed and verified | [[ship-check]], then [[production-baseline]]; leftovers and secrets → [[leftovers-and-leaks]]; link previews, SEO, the conversion path → [[share-and-crawl-metadata]] |
| Remove or tone down animations without breaking anything | [[animation-removal-hazards]] |
| A flick should land where it would naturally coast; rubber-band past an edge | [[momentum-projection]], [[gesture-momentum]] |
| Glass, translucent sidebars, dimming behind sheets | [[translucent-materials]] |
| The keyboard covers the composer; 100vh, safe areas or landscape break on a phone | [[mobile-platform-layer]], then [[touch-and-focus]] |
| Navigation, settings structure, tabs vs sections, search as a symptom | [[information-architecture]] |
| Small caps, slashed zero, stylistic sets, variable axes, stroked text | [[opentype-features-and-axes]] |
| Colours out of sRGB, P3, migrating hex/HSL to OKLCH | [[oklch-gamut-and-migration]] |
| React Native or Expo motion | [[react-native-motion]] |
| Set up or fix Sonner toasts | [[sonner-usage]] (principles → [[sonner-principles]]) |
| Steer an agent: prompts, how many passes, fixing the system not the screen, papercuts | [[directing-agents]] |

## Rules

1. **Route before reading.** Classify posture, pick the entry node, open it. Only widen to the MOC when the entry node's outbound links don't cover the question.
2. **One entry node per question.** If you find yourself opening four nodes up front, you skipped classification.
3. **Judge posture never writes.** A review request gets a table; a fix request gets code. Don't convert one into the other silently.
4. **Always end with the overrides.** Whatever the route, load [[gotchas]] and [[pov]] before producing output — installer taste wins over canonical defaults.

## Gotcha

The router is for *entry*, not *coverage*. Landing on [[easing-curves]] doesn't exempt you from [[prefers-reduced-motion]] — follow the entry node's own outbound links for the mandatory companions.

## Sources

- HKTITAN — routing patterns distilled from operating this graph across real sessions.
- Related: [[disambiguation]] for the intents that blur together, [[stacking-chains]] for multi-step jobs.