Agents SchoolCourses
Agent FoundationsLiveDesign EngineeringLiveDemos, Films and SoundLiveIcons, SVG and DiagramsLiveLaunch Films with AgentsLiveProduct WritingSoonAccessibility in DepthSoonData and ChartsSoonSecurity for AgentsSoonShipping with AgentsSoonsay the word, get the thing
Design vocabulary is the set of exact names for what you see on a screen: easing, tracking, a focus ring, a tray. Your agent can’t see what you mean, only what you type. “Make it smoother” could mean anything. “Use a 200ms ease-out” means one thing, so you get one result.
Every word below has a plain meaning and, where it helps, a sentence you can paste straight into your agent. Words for things you can see or feel come with a small live example: drag the slider or flip the switch and watch the word happen.
313 terms in 10 groups
The words for the AI side: skills, harnesses, prompts and the tools an agent uses.
A language model plus a harness: the model decides what to do, the harness gives it tools to read files, write code, run it and check the result.
The AI itself, like Claude or GPT. On its own it only reads text and writes text; it cannot open files or run anything.
The hidden layer of ordinary code around a model: it lists the tools, notices when the model asks for one, runs it and sends the result back. Model + harness = agent.
The screen you see and type into: the claude screen in a terminal, Cursor's window, a desktop app. Not the same as the harness behind it.
One thing a harness can do for the model, like read_file, edit_file, run a command or search. Most run on your computer; an MCP server's tools run somewhere else.
A folder of written instructions an agent loads when a task matches, so it does the work the way you want instead of its default way.
One note inside a skill: one idea with exact values and links to related notes, like "never scale from zero".
A group of related notes in the design-engineering skill, one per part of the craft: motion, typography, layout and so on. There are 13.
A command you type into an agent starting with /, like /design-engineering. It runs a skill or a built-in action instead of being read as a normal message.
The first word after /design-engineering, like review, polish or motion. It picks which procedure the skill follows.
“/design-engineering review src/PricingCard.tsx”
An installer that copies a skill into the place your agents look for it (Claude Code, Cursor, Codex and others), with one npx command.
“npx skills add AgentsORG/design-engineering”
A package that adds skills, commands or helpers to a harness in one install. design-engineering ships as a Claude Code plugin and as a plain skill.
A published list of plugins you add to Claude Code once, so you can install plugins from it by name.
“/plugin marketplace add AgentsORG/design-engineering”
What you type to an agent to ask for something. Better words in the prompt get better work back.
“Build a settings page with a sidebar and three sections”
Model Context Protocol: a standard way for an agent to use tools that live somewhere else, by sending a request to a server, like this course's exam server.
A window where you type commands to your computer instead of clicking. Many agents live in one.
A free program that lets your computer run JavaScript tools. Installing it also gives you npm, which installs agents like Claude Code and Codex.
The tool that comes with Node.js for installing JavaScript packages. npx runs a package once without installing it for good.
“npm install -g @anthropic-ai/claude-code”
A project folder tracked by Git, usually hosted on GitHub. The design-engineering skill lives in one.
Benji Taylor's open-source kit and skill for building faux product UI in React: real-looking windows, phones and a scripted cursor, plus examples and a filming script to check the result.
“Use Stageshow and start from its closest gold example”
Benji Taylor's development toolbar: click any element in your running app, write a short note, and it hands an agent the element's selector, file and your words.
“Read my Agentation annotations and fix them one at a time.”
The address of an element on a page, like button.export-btn. It tells code (or an agent) exactly which element you mean.
“The selector is button.export-btn; change only that element.”
Which of four jobs a request is: Build (make it), Judge (assess it, no edits), Decide (make a call first) or Name (give the word). It fixes the shape of the answer.
“This is a judge request: give me a table and don't edit anything.”
The skill's map from a job to the one note to open first, so the agent doesn't read four clusters to answer one question.
What /design-engineering does first for a plain request: find the design contract, work out the phase and the material, then hand the job to one or two owners.
“/design-engineering which: who owns this job?”
Another installed skill that owns one job better, like HyperFrames for launch films or Stageshow for faux product UI. The router hands the job to it when it's installed.
Requests that sound alike but belong to different notes, like 'how should this move?' versus 'is this diff's motion good?'. Each pair has a tiebreaker, usually scope.
The file where you override the skill's taste with your own. Where it disagrees with the canon it wins; where it's silent, the canon holds.
“/design-engineering pov fork”
One dated line in gotchas.md recording something the agent got wrong in practice, and the fix. The file only grows, and negative examples teach the agent the most.
“/design-engineering pov gotcha "what went wrong"”
How to write a skill that changes behaviour: encode a process, write the why, be strict, make every line earn its place, keep one skill per job, and test by running.
The table at the top of the skill that maps each verb (and its aliases) to the file with its procedure. The skill reads your first word and looks it up there.
The written procedure behind one verb: its posture, what to read in order, the steps, what to return and where to hand off. Each one works on its own.
Another name the same verb answers to, like critique for review or launch for ship, so whichever word comes to you first works.
“/design-engineering critique src/Card.tsx”
How the work gets done: briefs, reviews, prototypes and shipping.
The craft between design and code: building the details (motion, states, type, color, copy) that make a working interface feel right.
Asking an agent for something, accepting whatever runs and hoping it is good. Fine for throwaways; it ships the agent's average guess.
The exact names for how interfaces look and move, like tracking, easing or hierarchy. The right word gets you the right result from an agent.
The table a design-engineering review comes back in: the exact line, its replacement, and one sentence of reason. One problem per row.
“/design-engineering review this file”
A trained instinct for what works, built by looking closely at a lot of good work. Not a gift you are born with.
“Match the qualities these three references share, not the average”
The small, mostly invisible details (press feedback, aligned numbers, soft shadows, real copy) that make a working product feel considered.
“Do a polish pass on the unseen details of this screen”
Pages people see once or twice, like a landing page. Their job is to explain and impress, so they can take bigger visual risks.
Screens people use hundreds of times inside an app. Their job is to get out of the way: calm, consistent and fast.
“This is product UI: design for the hundredth session, not the first”
The screen when everything goes right: data loaded, user signed in, content present. The easy state, and the one everyone designs first.
The exact address of an element on a web page, like .plan-card > button.primary. Handing one to an agent tells it precisely which thing you mean.
“In .plan-card__price (PlanCard.tsx:21), use tabular-nums”
Code someone else wrote that your project pulls in, usually with npm install. Convenient once, then a cost every visitor pays.
“Before installing anything, check if a native API can do it”
The JavaScript files a browser has to download before your page works. Every dependency makes it bigger.
A feature already built into the browser, like fetch, Intl or crypto.randomUUID, so it costs nothing to download.
“Use Intl.DateTimeFormat instead of a date library”
The small words in an interface: button labels, error messages, empty states, tooltips, status lines. Small, read constantly, and a big part of how a product feels.
“Rewrite the microcopy: verb-first buttons, errors that say what to do next.”
A standard format for writing one translatable sentence with placeholders and plural rules inside it, like {count, plural, one {# file} other {# files}}, instead of gluing strings together in code.
“Write this as one ICU message with plural cases, not string concatenation.”
The browser's built-in formatter for numbers, money, dates, relative times and lists in any language. It knows that Germans write 1.234,50 € and Americans $1,234.50.
“Format every number, date and list through Intl with the user's locale.”
A default choice that signals nobody made a choice: a purple gradient hero, three emoji feature cards, 'Unleash your potential'. One is harmless; several together make a screen look generated.
“Audit this screen for AI-default tells and give me a deletion list.”
Scrambled Latin used as placeholder text while a layout is designed. Shipped in a real product, it means the copy (and the design) wasn't finished.
“Replace every placeholder with real copy, or remove the section.”
A habit of generated writing: words like delve and leverage, 'not just X, but Y', lists of three, em dashes, puffery, 'I hope this helps!'. Each is fine alone; together they are a watermark.
“Strip the copy tells from this text and keep a human voice.”
The habit of listing exactly three things ('fast, simple and secure') because three sounds complete, whether or not there are three real items.
“Break the rule of three: list the real number of items.”
Big promotional words that claim a lot and can't be checked: 'seamless', 'robust', 'a testament to', 'revolutionary'. Replace them with what actually happens.
“Replace the puffery with one concrete, checkable claim.”
Lines the model wrote to the person prompting it that got pasted into the product: 'I hope this helps!', 'Great question!', 'Certainly! Here is…'.
“Delete any chatbot residue from the copy.”
A habit of generated code: comments that narrate each line, try-catch around code that can't fail, fallbacks to empty arrays, 'as any', names like fetchDataV2. It runs, but it hides intent and real failures.
“Do a code-tells pass on this diff; the default fix is deletion.”
Code that quietly substitutes a default when something fails, like catching a failed request and returning an empty list. The page shows 'No invoices' when the server is actually down.
“Remove silent fallbacks; fail loudly or show a real error state.”
A page made for development, like /lab, /test or /playground. In production it gets indexed by search engines, often skips login, and shows unfinished work.
“Make scaffolding routes return not-found in production builds.”
A configuration value whose name starts with a prefix like NEXT_PUBLIC_ or VITE_, which gets bundled into the code every visitor downloads. A secret key there is readable by anyone.
“Check public env var names for anything secret; report names, never values.”
Reviewing a page from screenshots of what it actually renders (at desktop, tablet and phone widths) instead of reading its code, one focused pass at a time, in at most three rounds.
“Screenshot this at 1440, 768 and 390 and critique the render before the code.”
The procedure for de-generating a screen: squint, delete what isn't needed, sweep color, type, layout, decoration, icons, copy and motion, then put one real point of view back.
“Run an unslop pass: subtract first, then sweep, then add one signature.”
Running an animated demo at real speed, filming it, and reading every frame, because the bugs live in the frames between the start and the end.
“Rehearse it: film the whole loop and step through every press”
A second reviewer (a person or a new agent) who gets only the filmed frames and the checklist, never the builder's plan or reasons, so they see what a viewer sees.
“Give a fresh-eye reviewer the frames only, not my notes”
A free tool that shrinks SVG files by removing editor junk and rounding numbers. It needs a few settings turned off so it keeps the viewBox, titles and the ids you animate.
“Run SVGO with --multipass, but keep viewBox, <title> and the ids we animate.”
A list written before any audio is made: one row per visual event, with its time, kind of sound, size and position, so the sound can be placed exactly.
“Write a cue sheet from the locked timeline before rendering sound.”
A licence that gives a work to the public with no conditions: you may use, edit and sell it without credit. The safest licence for sounds.
“Use only CC0 or properly credited CC BY recordings.”
YouTube's system that scans uploads for registered music and files automatic claims, sometimes even when your use is properly licensed.
“Credit the track in the description and keep the licence ready to dispute a Content ID claim.”
Where a picture lives: a finished figure, an editable canvas, a Mermaid block in the docs, or FigJam. You pick it by who touches the picture next.
“Choose the diagram's surface by who edits it next”
The most one figure should hold: about 9 boxes, 12 arrows and 2 accent colors. Past that, split it into an overview and a detail.
“Keep the figure under 9 nodes and 12 connectors, or split it”
An automatic check that flags problems on a board, like text spilling out of a card or an arrow that isn't attached. Fix every one your edit caused.
“Run getLints and fix every lint your edit introduced”
A comment pinned to a specific shape, so it points at what it means instead of describing it. On a board, each one is an instruction with an address.
The few sentences you send an agent before it starts: what to build, for whom, and the exact values that matter. A good brief names things instead of describing how they feel.
“Here's the brief: one pass only, press state at scale(0.97), 120ms ease-out, nothing else.”
Thirty-nine common UI mistakes, each with a quick way to spot it and a fix, scanned before anyone argues about taste. A floor, not a ceiling.
“Scan this component against the review checklist before you write the table.”
A review of what one change (a branch or pull request) did, not of the whole codebase. Each finding is marked Introduced, Regression or Pre-existing by what caused it.
“Do a change-scoped review of this branch; Introduced and Regression only, then at most three Pre-existing.”
Every screen a changed file shows up in. Change a shared token or component, and every place that uses it is part of the review.
“Review the blast radius of this token change, not just the file.”
Three to five genuinely different, working versions of one piece on a throwaway page, switched with a small dark pill. You pick; the decision gets written down; the page gets deleted.
“Build three directions behind a prototype picker, each on a named axis, then stop for my pick.”
When prompting for something keeps landing 'close but not quite', build the small tool that makes it instead, with every taste decision on a knob you adjust by eye.
“Stop re-prompting; pitch me a tool for this in four lines: gap, tool, controls, export.”
A small program that makes a picture from its settings plus a random seed, so one click gives a new variation and saving the settings lets you make the keeper again forever.
“Build a seeded generator: pure render(config), click for a new seed, save writes the JSON.”
A file in your project (.design or DESIGN.md) that tells an agent how things look: colours, type, spacing, radii, which component to use when. It outranks the skill's defaults.
“Find our design contract first and use its tokens, never raw values.”
One realistic but hostile input for a component: the longest real name, zero items, a 320px box. You render them side by side to see what breaks before users do.
“Render MemberRow under every stress scenario it can actually receive, side by side.”
The global floor every app a phone will open needs: one viewport tag, a few root CSS rules, hover and reduced-motion gates, and dev tools kept out of the real build.
“Merge the production baseline into our root layout and global CSS; don't create a second viewport tag.”
The last pass before launch: the whole app swept across nine lanes, each finding ranked by a severity tree, mechanical fixes applied, and what needs a real phone listed.
“Run a ship check: fix the blockers, then tell me what needs a device.”
An ordered route through the skill for a multi-step job, like the screen loop: decide, foundations, one material pass, refine, review, ship. Skip steps; never reorder them.
“Follow the screen loop: foundations first, then one material pass, then polish.”
Judging two outputs side by side, without knowing which is which, and picking the better one. Honest where 'is this good?' isn't; the win rate tells you if a change helped.
A numbered list of things to remove or replace, highest impact first, each with where it is and why. What the tells verb returns instead of a redesign.
“/design-engineering tells app/page.tsx”
A saved set of test data shaped like the real thing, such as a worst-case list of members. Kept in the project so the next person can see the same breaks.
“Keep the worst-case fixture next to the demo data.”
One of the nine areas a ship check sweeps: accessibility, performance, mobile, forms, states, motion, theme, content and leftovers, and marketing.
“/design-engineering ship audit mobile”
Type: sizes, spacing between letters and lines, and the small details that make text read well.
A short, fixed list of text sizes a product is allowed to use, often each one a set ratio bigger than the last. Every piece of text picks a step instead of a one-off size.
“Use a closed type scale named by role; no one-off font sizes.”
The vertical space from one line of text to the next. Body text wants about 1.5 times the font size; big headings about 1.1.
“Unitless line-height: 1.5 for body, about 1.1 for headings.”
A CSS unit relative to the root font size (usually 16px). Sizes in rem grow when a reader sets a bigger default text size; px sizes ignore them.
When a page asks for a bold or italic the font didn't load, the browser fakes one by smearing or slanting letters. font-synthesis: none turns that off so the problem is visible.
The compressed font file format every modern browser reads. It is the only format a website needs to ship.
How tall a font's lowercase letters are. Two fonts at the same font-size can look very different sizes because of it.
How many characters fit on one line of a paragraph. 45 to 75 reads comfortably, about 65 is the sweet spot.
“Cap reading columns at max-width: 65ch.”
A CSS unit equal to the width of the digit 0 in the current font. max-width: 65ch makes a column roughly 65 characters wide.
Extra space added evenly between all letters. Big headings want it slightly tighter (negative), tiny uppercase labels slightly looser.
“Tighten display tracking to about -0.02em; open tiny caps to +0.06em.”
The font's own spacing adjustments between specific letter pairs, like AV or To. Unlike tracking, it is built into the font and should stay on.
CSS that controls where lines break. balance evens out the lines of a heading; pretty stops a paragraph ending on one stranded word.
“text-wrap: balance on headings, pretty on short blurbs.”
A single short word left alone on the last line of a paragraph or heading. It looks like a mistake; text-wrap: pretty fixes most of them.
Cutting text off with an ellipsis (…) when it doesn't fit. Only allowed when there is a way to see the full text, such as a tooltip or detail view.
“Truncate in the middle for file names, and keep a way to see the full string.”
CSS that cuts text after a set number of lines, adding an ellipsis. Used to keep card previews the same height.
CSS that lets a very long word, like a URL or a code, break onto the next line instead of punching out of its box.
“Add overflow-wrap: anywhere wherever user text or URLs can appear.”
Digits that all take the same width, so numbers line up in columns and a ticking counter doesn't wiggle. Turned on with font-variant-numeric: tabular-nums.
“Use tabular-nums on prices, timers and anything that updates.”
Optional extras hidden inside a font file: tabular digits, a slashed zero, real fractions, small caps, alternate letters. CSS switches them on.
One font file that holds a whole range of a style, usually weight, so any value like font-weight: 473 is real instead of only 400 and 700.
Capital letters drawn at about lowercase height, designed to match the weight of the text. Shrinking normal capitals instead makes them look thin.
Versions of a typeface tuned for a size: sturdier and looser for small text, finer and tighter for big headlines. Some fonts adjust it automatically.
Choosing two typefaces to use together, usually one for headings and one for text. Pair across categories (a serif with a sans), never two lookalikes.
Text filled with a color gradient instead of one solid color (in CSS, background-clip: text). On a headline it is one of the most common generated-page devices.
“Replace the gradient text with solid ink.”
Color systems, contrast, shadows and the surfaces things sit on.
A way of writing a color as three numbers: L (how light it looks to a person), C (how vivid) and H (which hue, as an angle). Because the numbers follow what eyes see, you can do math with them.
“Author every new color in oklch().”
The familiar #3b82f6 style of writing a color: amounts of red, green and blue in base 16. Easy for screens, meaningless to read: you can't tell how light #3b82f6 looks.
An older color notation (hue, saturation, lightness). Its lightness is a guess: yellow and blue at the same HSL lightness look nothing alike, so ramps built in HSL come out uneven.
How bright a color looks to a person, from 0 (black) to 1 (white). In OKLCH it is measured, so two colors with the same L really look equally light.
How vivid a color is. 0 is gray; around 0.3 is as saturated as most screens go. The highest chroma you can use depends on the hue and the lightness.
Which color it is, as an angle on a wheel: about 25 is red, 90 yellow, 145 green, 260 blue, 330 pink.
The set of colors a screen can actually show. OKLCH can name colors outside it; those get clamped to the nearest one the screen can display.
“Clamp chroma to the sRGB gamut, holding L and H.”
A wider gamut than standard sRGB, found on most recent phones and Macs. Extra-vivid colors can be layered on for these screens with a media query.
“Add the vivid version behind @media (color-gamut: p3).”
One hue in a row of steps from nearly white to nearly black, usually numbered 50 to 950. A palette is a few ramps, not a pile of colors.
“Build an 11-step ramp in OKLCH with even lightness steps.”
The one saturated brand color, kept for what you can act on: the main button, links, the selected item. It works because almost nothing else is colorful.
The gray ramp that carries most of an interface: backgrounds, borders and text. It can be pure gray or tinted very slightly warm or cool.
A named value, like --color-text-secondary, used instead of typing the raw color everywhere. Change the token and every place that uses it changes.
“Use the semantic tokens, never raw colors, in components.”
A token that names a raw value by what it is, like --blue-600. Primitives never get used directly inside a component.
A token that names a job, like --color-bg-page, and points at a primitive. Components use only these, so a dark theme just repoints them.
“Components reference semantic tokens only; dark mode repoints them.”
A CSS property that tells the browser whether to draw its own parts (scrollbars, form controls) light or dark. Declare only the themes you actually designed.
“Set color-scheme: light on :root for a light-only site.”
A meta tag that colors the phone browser's address bar and status bar so they blend with the top of your page.
The color space a gradient mixes its stops in. The same two colors make a muddy, an even, or a vivid gradient depending on it (sRGB, OKLab or OKLCH).
“Use linear-gradient(in oklab, …) so the middle doesn't go muddy.”
Visible stripes in a gradient that should be smooth, common on large, low-contrast gradients. A faint noise layer hides it.
How far a surface seems to float above the page: a card a little, a menu more, a dialog most. Shown with shadows in light mode and lighter surfaces in dark mode.
Several faint shadows stacked in one box-shadow: a tight one, a wide soft one, sometimes a 1px ring. It reads as real depth where one blurry shadow reads as a template.
“Use a layered shadow at 4–6% opacity, not one 0 2px 8px blur.”
How rounded a box's corners are, in pixels. A system uses a few deliberate sizes, not the same radius on everything.
The rule for a rounded box inside another: inner radius = outer radius − the gap between them, so both corners curve in parallel.
“Derive the inner radius: outer minus padding.”
Nudging things until they look aligned to the eye, even when the measurements say they were already aligned. A play triangle moves a little right; a circle grows a little.
The thinnest possible line: 1px, or 0.5px on high-density screens. Used for dividers and the outline around images.
A second theme with light text on dark surfaces. Done well it is designed from the same color scale, not made by inverting the light theme.
“Remap the scale for dark: near-black surfaces that get lighter as they rise.”
A see-through, blurred surface (CSS backdrop-filter) such as a toolbar that content scrolls under. Its job is to keep you oriented, not to decorate.
A dark see-through layer laid over the page behind a dialog, which pushes the page back so the dialog has your full attention.
A CSS keyword meaning "whatever the text color is here". An icon filled with currentColor changes color with the text around it, including in dark mode.
“Use fill="currentColor" so the icon follows the text color.”
A named job for a color (main, deep, tint, gold, ink) instead of a fixed hex value, so a whole illustration can be recolored to a new brand without losing what each part means.
“Fill the sticker by role (main, deep, tint) and map the roles to our brand tokens.”
The one bright color reserved for the one or two things a reader must see first. Everything else stays in quiet grays.
“Put the accent on the one path that matters, nothing else”
The colors and font families a diagram borrows from your brand. The brand changes the skin; it does not change the diagram's spacing or line rules.
“Take the skin from our .design file; keep diagram-design's geometry”
Where things go: spacing, grids, grouping and pages that work on every screen.
The CSS number that decides which overlapping thing is drawn on top. It only competes with siblings inside the same stacking context.
“Replace the magic z-index numbers with one file of layer constants.”
A sealed group of layers. Things inside it are sorted among themselves and the whole group is drawn as one layer, so a z-index of 9999 inside can't beat something outside.
Showing which things belong together just by putting them closer to each other than to anything else. The gap between groups is at least twice the gap inside one.
“Group with space first: between-group gaps at least 2× the gaps inside a group.”
The tendency to read things that sit close together as one group. It is the cheapest structure in design: no lines or boxes needed.
A short list of allowed gaps (for example 4, 8, 12, 16, 24, 32px) that every margin and padding picks from, so spacing stays consistent.
An invisible vertical line that several elements start from. Fewer edges make a page look calm; text starting on many different lines looks ragged.
A background or image that runs right to the edge of the screen, past the margins. Content can bleed; text and controls stay inside the margins.
The overall shape of a page that readers judge before any detail: its margins, how the width is used, the gaps between sections, and whether the first screen says what this is.
A stretch of a page with nothing in it and nothing closing it off, like a giant gap between sections. Different from a deliberate rest, which something frames.
Making a layout work on every screen size. Done well, each size gets its own composition, not a squeezed copy of the desktop one.
The width at which a layout changes, for example from one column to two. Good breakpoints come from where the content stops fitting, not from a device list.
CSS that lets a component change its layout based on the width of the box it sits in, rather than the whole window. A card can then work in a sidebar and in a wide grid.
“Make the card adapt with a container query, not a viewport media query.”
A page divided into 12 equal columns. 12 splits into halves, thirds, quarters and sixths, so it fits most layouts.
Replacing interface text with longer, accented fake text (like [Ŝéţţîñĝš ~~~]) to see what breaks when real translations arrive.
When a grid column or flex item refuses to shrink smaller than its longest word or widest table, pushing the layout off the side of the screen. minmax(0, 1fr) and min-width: 0 fix it.
“Use minmax(0, 1fr) and min-width: 0 so long content can't blow out the column.”
CSS written as start and end instead of left and right (margin-inline-start, text-align: start), so the layout mirrors by itself for right-to-left languages.
“Use logical properties: margin-inline-start, not margin-left.”
Languages like Arabic and Hebrew that read from right to left. The whole layout should mirror for them, except things like logos, clocks and play buttons.
An HTML tag that isolates a piece of text whose direction may differ from its sentence, such as an English name inside Arabic, so punctuation lands on the right side.
The part of a phone screen not covered by the notch or Dynamic Island, the rounded corners or the home indicator. env(safe-area-inset-*) tells CSS how big those edges are.
“Pad the header and tab bar with env(safe-area-inset-top/bottom).”
The <meta name="viewport"> line that tells a phone how to size the page. viewport-fit=cover lets the page paint under the notch so safe-area insets work.
Viewport height units that understand phone browser bars. 100dvh changes as the address bar shows and hides; 100svh is the smaller, steady height. Plain 100vh assumes the bar is hidden.
“Use 100dvh for app shells and min-height: 100svh for heroes, never 100vh.”
CSS that controls what happens when you scroll past the end: the bounce, pull-to-refresh, or the page behind scrolling instead. contain keeps it inside a panel.
Keeping what the user is looking at (tab, filters, sort, open panel) in the web address, so a link, a bookmark or the back button brings back exactly the same view.
“Put the tab, filters and sort in the URL query, read with useSearchParams.”
The part of a URL after the ?, like ?tab=closed&sort=created. It is where page state such as filters lives.
A link that opens a specific view inside an app, such as one open modal or one filtered list, instead of the home page.
How a product's screens and features are grouped, named and connected, so people can find things. It is decided before any pixel is styled.
Showing what most people need first and revealing advanced options only when asked or when they become relevant.
Keeping the row you are reading in the same spot on screen when content above it loads or changes size, instead of letting the page jump.
A top bar that stays pinned while the page scrolls under it (position: sticky). Useful, overused, and often given a blur that has become a tell.
When a page intercepts your scroll and does something else: snapping between sections, playing an animation, or slowing down. It makes the scroll feel broken.
Meta tags (og:title, og:description, og:image) that chat apps and social sites read to build the preview card when someone pastes your link.
“Add per-route titles, descriptions and a 1200×630 OG image, with metadataBase set.”
Instructions that tell search engines not to list a page or site. Left over from a staging site, they quietly hide your launch from search.
When something on the page jumps because content above or around it changed size, like a list collapsing to a spinner and then expanding when the data lands.
“Make sure nothing shifts when this content loads; reserve its size.”
Letting a window run off the edge of its frame on purpose, so it reads as a crop of a bigger product rather than a small picture floating in space.
“Bleed the window 25% off the right and bottom”
The one distance between the main window and the frame's edge. Every other edge in the picture either sits that same distance in, or runs well past the edge.
“One 24px gutter, measured in the final crop”
A tinted rectangle behind a window that makes it look like it is floating on a mat. On a white or dark page it is almost always a mistake: the page is the ground.
“No plate behind the window; the page is the ground”
A second composition of a demo for a phone column (about 358px wide): cropped closer, satellite dropped or stacked, text still at real size. Not the desktop picture shrunk.
“Ship a compact design at 358 wide, not a scaled-down copy”
A section of feature tiles of different sizes, like a bento box. It works when planned as one picture with different kinds of tile, not four cropped windows in a row.
“Plan the bento grid as a table first: one hero, mixed tile kinds”
A bento tile with one real number at display size (48 to 72px), a short lead and a one-line label. Number and unit stay on one line.
“Make it a stat tile: one real number, unit on the same line”
The part of a video frame that the app's own buttons, captions and headers will not cover, where text and key action must stay.
“keep text inside the 9:16 feed safe zones”
Animation: timing, easing, springs, and when something should move at all.
A small flourish that makes a product feel alive, like a tick on save or confetti at the end of onboarding. It wears out the more often you see it.
“Keep delight for rare moments; frequent actions get subtle feedback only”
How speed changes during an animation: start fast and slow down, start slow and speed up, or both. It decides whether motion feels snappy or sluggish.
“Use a strong ease-out curve on the dropdown”
An easing that moves fast at the start and slows into the end. The right default for anything entering or leaving, because it reacts the moment you act.
“Use ease-out, cubic-bezier(0.23, 1, 0.32, 1), for the menu”
An easing that starts slowly and speeds up toward the end. It makes UI feel sluggish because nothing happens right when you're watching, so avoid it in interfaces.
“Replace every ease-in on UI with ease-out”
A way to write your own easing curve as four numbers, like cubic-bezier(0.23, 1, 0.32, 1). Custom curves feel more deliberate than the built-in ones.
“Define the easing as custom cubic-bezier tokens”
A CSS rule that animates a property from its current value to a new one when it changes. Because it starts from wherever it is, it can reverse smoothly if interrupted.
“Use a transition, not a keyframe animation, so it can reverse mid-way”
A CSS animation written as a list of steps (0%, 50%, 100%) that plays from the start each time. Good for planned sequences like a shake; bad for things people interrupt.
“Use keyframes for the error shake only”
How long an animation lasts. Almost all interface motion belongs under 300 milliseconds; button presses take 100 to 160.
“Keep the dropdown at 200ms and the exit at 150ms”
The CSS property that moves, scales and rotates an element without disturbing anything around it. It's one of the two properties that are cheap to animate.
“Animate transform instead of top and width”
How see-through something is, from 0 (invisible) to 1 (solid). Fading opacity is cheap to animate and does most of the work of making things appear.
“Fade opacity 0 to 1 alongside a scale from 0.95”
The pivot point for scaling or rotating an element. Setting it to where a menu's button is makes the menu look like it grows out of that button.
“Set transform-origin on the popover to the trigger's position”
Motion driven by physics instead of a fixed duration: a pull toward the target plus friction. It keeps its speed when interrupted, which makes drags and flicks feel natural.
“Use a spring with stiffness 380 and damping 30 for the drawer”
How hard a spring pulls toward its target. Higher stiffness makes the motion snappier and quicker.
“Raise the spring's stiffness so it feels less floaty”
The friction on a spring. Low damping lets it overshoot and wobble; high damping makes it settle calmly with no bounce.
“Increase damping so the sheet doesn't oscillate”
An animation that can change direction partway through without jumping, carrying on from where it is. Transitions and springs are interruptible; keyframes are not.
“Make the toast exit interruptible”
Writing animation so the same gesture ends in the same place on a 30, 60 or 120 frames-per-second screen, by stepping on a fixed clock instead of once per frame.
“Step the spring on a fixed 4ms clock, not once per frame”
Short for linear interpolation: moving a value a fixed fraction of the remaining way toward its target each frame, like 8%. Used to make live data glide instead of jump.
“Lerp the badge, line and axis at the same 8% rate”
Playing the same entrance on several items one after another, a few tens of milliseconds apart, so a list arrives as a quick wave.
“Stagger the rows 40ms apart, capped under 300ms total”
A technique for animating an element to a new position: measure First and Last positions, Invert the difference with a transform, then Play it back to zero.
“Animate the list reorder with FLIP instead of jumping”
A CSS property that cuts away part of an element, like a mask. It animates cheaply and smoothly, which makes it great for reveals, wipes and sliding highlights.
“Reveal it with clip-path inset() instead of animating height”
Changing one shape smoothly into another in front of the viewer, so it reads as the same object changing rather than two objects swapping.
“Morph the menu icon into the close icon”
Fading one thing out while another fades in on top of it. Fine for unrelated content; halfway through it shows two ghost images, which blur can hide.
“Pair the crossfade with a 2px blur”
When the browser hands a finished picture to the graphics chip and only moves or fades it, without redrawing or re-measuring. Animating transform and opacity stays here.
“Keep the animation on composite-only properties”
A CSS hint that an element is about to animate, so the browser prepares it. Useful on one element with a visible first-frame hitch; harmful sprinkled everywhere.
“Remove will-change from every card; add it only where the first frame stutters”
The result an animated demo builds to: the panel that opens, the state that changes. It arrives whole, stays visible at the shown size and holds for about 2 seconds.
“Hold the payoff for 2 seconds before the loop resets”
How an animated demo gets back to its start. A good reset has a visible cause (undo, close, clear) or happens out of sight; data never rewinds in view.
“Reset the loop with a visible cause, never by rewinding”
The SVG setting that turns a line into dashes. Make one dash as long as the whole line, slide it with stroke-dashoffset, and the line looks like it is being drawn.
“Draw the path on with pathLength="1", stroke-dasharray: 1 and stroke-dashoffset from 1 to 0.”
A CSS setting that decides what a transform measures from. In SVG the default is the corner of the whole drawing, so set transform-box: fill-box to rotate or scale a part around its own center.
“Add transform-box: fill-box and transform-origin: center so it spins in place.”
Animation written as tags inside the SVG file itself (<animate>, <animateMotion>). It keeps playing even when the SVG is loaded as a plain image, where page CSS and JavaScript cannot reach.
“This SVG ships as an <img>, so put the animation inside the file: CSS keyframes, or SMIL for the motion path.”
One SVG shape smoothly turning into another by sliding every number in its path to a new value. It only works when both paths have the same commands in the same order.
“Author both shapes with the same command list (M, four C, Z) so the morph interpolates.”
A small JavaScript library that resamples two unrelated shapes so they can morph into each other. Worth it when the morph is the product, not for an icon toggle.
“These paths don't match; use flubber's interpolate() only if the morph is the hero.”
Changing one icon for another (copy to check, play to pause) by fading, scaling and blurring the old one out while the new one comes in, instead of morphing between them.
“Swap the icons: outgoing scales to 0.3, fades and blurs 3px, incoming does the reverse.”
The frame of an animation where the moving thing visibly lands or arrives. Sounds that confirm a motion belong on this frame, not where the motion starts.
“Fire the landing sound on the contact frame, about 85% through the ease-out.”
How fast an exponential settle comes to rest. A smaller tau settles faster; about 0.1 to 0.15 seconds for an object in a film.
“settle objects with tau 0.13 s”
What happens when you press, drag, hover or type.
A button visibly reacting while you press it, usually by shrinking to 97% of its size. It tells you the press registered.
“Add :active scale(0.97) with a 120ms ease-out to buttons”
How fast and in which direction something is moving, often in pixels per millisecond. Measured when a finger lifts, it tells a flick from a slow release.
“Dismiss the sheet if release velocity is above 0.11 px/ms”
The resistance you feel when dragging past an edge on iOS: the content follows less and less the further you pull, then springs back when you let go.
“Add a rubber band past the sheet's open position”
Telling the browser to keep sending a finger's or mouse's movements to one element until it lifts, so fast drags don't lose track when the pointer slips off.
“Call setPointerCapture on pointerdown for the drag”
Working out which element a press landed on. For things still animating, test against where they are heading, so quick repeated presses land where people expect.
“Hit-test presses against each toast's destination”
How a control looks while a mouse pointer is over it. Good ones are subtle (one step of background, a 1px lift) and only appear on devices that can hover.
“Keep hover to one step of background, gated behind @media (hover: hover).”
The moment focus leaves a form field, by tabbing or clicking elsewhere. It is the right time to check the field, because the person has signalled they are done with it.
“Show field errors on blur, not on every keystroke.”
Changing the screen right away as if an action succeeded, sending the request in the background, and rolling back only if it fails. It makes likes and toggles feel instant.
“Make this toggle optimistic, with a rollback and an error toast on failure.”
The invisible region that responds to a click or tap. It can be bigger than the icon you see, so a 24px icon can still have a 44px target for a thumb.
“Grow the hit area to 44px with a pseudo-element; keep the icon 24px.”
How a shared product shows who else is there and how much attention they are paying: arriving, here, half here, leaving. More than a green dot.
“Show presence in three states (here, half here, away), one color per person.”
The shape of the pointer: arrow, I-beam over text, hand on a link, open hand over something draggable. In a demo it switches as the pointer crosses an element's edge.
“Switch the cursor kind as it crosses the text field”
Where the hand took hold of something it drags. It stays the same through the whole drag and the drop, so the object does not jump to center itself under the pointer.
“Keep the grab offset through the drag”
Imagine a sound the first time you hear it, then the hundredth. If the hundredth makes you want to mute it, cut the sound or make it smaller.
“Run the 100th-use test on every sound and cut any that fail.”
An arrow on a canvas that is truly attached to the shapes at its ends, so it follows them when someone drags. An arrow that only looks attached gets left behind.
“Bind every meaningful arrow with createArrowBetweenShapes”
The building blocks: buttons, menus, sheets, inputs and their states.
The one thing you most want people to do on a screen, usually the one filled, strongest button. A screen should have one.
“Make Start free trial the only primary button; the rest are quiet”
One of the situations a screen can be in, like loading, empty, error, offline or no permission. Each needs its own design and words.
“Design the loading, empty, error and offline states with real copy”
A sheet that rises from the bottom over the current screen for one short task; the next step stacks over it. Each tray has a title, a dismiss and its own height.
“Make each step a tray with a different height”
A gray placeholder in the exact shape of the content that is loading: circles where avatars go, bars as wide as the words. When the real content arrives, nothing moves.
“Show a skeleton with the loaded rows' exact height and widths, not a spinner.”
What a list or page shows when there is no data yet. A good one says what belongs there and offers the action that fills it, instead of just "No data".
“Design the empty state: title, one line of why, and the primary action.”
Checking each form field where it is, as the person moves through the form, instead of listing every error at the top after they press Submit.
“Validate inline: on blur, then on every change once an error shows.”
A small message that slides in at the edge of the screen to confirm something ("Changes saved") and leaves on its own. One with an Undo button has to stay longer and pause while you look at it.
“Show a toast with Undo that stays 6 seconds and pauses on hover and focus.”
A small label that appears on hover or focus to explain an element. It can't hold anything you click, because the pointer can't move into it without closing it.
“Use a tooltip only for a short label; anything with a link is a popover.”
A floating panel that opens when you click something and stays open until dismissed. Unlike a tooltip, it can hold links, buttons or a small form.
“Make this a click-opened popover, not a tooltip, since it has a link.”
A component split into parts that share state behind the scenes, like <Dialog>, <Dialog.Trigger> and <Dialog.Content>, so you arrange the pieces instead of passing a big config object.
“Build this as a compound component with context, not a config prop.”
Frosted, see-through panels with a blur behind them. Fine over a photo or a busy canvas; over a plain background there is nothing to frost, so it is pure decoration.
“Remove the glass effect where there is nothing behind it.”
Making interfaces work for everyone: keyboards, screen readers, reduced motion.
A device setting people turn on when movement makes them unwell or distracted. Interfaces should drop slides, zooms and parallax, but keep short fades.
“Add a prefers-reduced-motion block that keeps the fade and drops the slide”
How different the text color is from its background, as a number like 4.5:1. Body text needs at least 4.5:1 to be readable for most people; large text 3:1.
“Make body text pass 4.5:1 against its background.”
The Web Content Accessibility Guidelines, the standard most laws point to. Its contrast rule is the familiar 4.5:1 for body text and 3:1 for large text.
A newer contrast formula that models how people actually perceive text, scored as Lc: about 75 for body text, 60 for labels, 45 for headlines.
“Check the pair with APCA as well: Lc 75 or more for body text.”
A CSS selector that matches when the browser decides focus should be shown, after Tab but not after a mouse click. Use it to show a focus ring only to keyboard users.
“Replace outline: none with a :focus-visible ring.”
An attribute that gives an element its spoken name for screen readers. Every button that shows only an icon needs one that names the action, like "Close dialog".
“Give every icon-only button an aria-label that names the action.”
An attribute that controls whether something can take keyboard focus. Only two values are legal: 0 (joins the Tab order) and -1 (focusable from code only). A positive number breaks the page's order.
“Use tabindex 0 or -1 only; never a positive tabindex.”
A way to give a group of controls (a menu, tabs, a toolbar) a single Tab stop: the active item has tabindex 0, the rest -1, and the arrow keys move focus between them.
“Use a roving tabindex so the whole menu is one Tab stop with arrow keys inside.”
Software that reads the interface aloud (or to a braille display) for people who can't see the screen, like VoiceOver on Apple devices and NVDA on Windows.
“Check what a screen reader announces when this changes.”
A part of the page that screen readers watch and read aloud when its text changes. role="status" waits politely; role="alert" interrupts.
“Announce this with a role="status" live region that starts empty.”
A <title> as the first child of an SVG gives it a name a screen reader can read aloud. Pair it with role="img"; decorative SVGs get aria-hidden="true" instead.
“Give the meaningful SVG role="img" and a <title>; hide the decorative ones with aria-hidden.”
Two tags inside an SVG that name the picture and describe it in one sentence, so a screen reader can say what it shows.
“Add role="img" with aria-labelledby pointing at a prefixed <title> and <desc>”
Icons, SVG, sound, diagrams, product demos and launch films.
Decoration in a chart that carries no information: extra gridlines, needless legends, 3D effects, a rainbow of default colors. Edward Tufte's word.
“Remove the chartjunk: keep one axis, no legend, two colors”
A drawn picture of a product's interface, made for a landing page, feature card or docs page. It looks like the real app but is simplified to tell one moment.
“Build a faux UI of the inbox for the hero”
An illustration of one moment in a product, framed like a photo: cropped to where the story happens, not a whole screenshot pasted into a box.
“Frame it as a product shot, not a screenshot”
The handful of real words (usually 3 to 7) a product illustration is allowed. Everything else becomes a placeholder bar, so the eye goes straight to what matters.
“Keep the word budget to 6 real strings”
A short gray line that stands in for text nobody needs to read in a product illustration. Its width varies row to row and it sits at the height of the text it replaces.
“Replace the filler text with placeholder bars of varying width”
How much real content an illustration shows: minimal is all bars, standard has words only where the story is, realistic has plausible words everywhere.
“Standard fidelity: words only on the selected row and the result”
A smaller second object in a product shot (a receipt, a phone, a detail card) that carries the point. It usually straddles the main window's edge, about half outside.
“Add one satellite card straddling the window's left edge”
Scalable Vector Graphics: an image written as text (shapes, lines and curves), so it stays sharp at any size and you can style and animate its parts with CSS.
“Make this icon an inline SVG so CSS can color and animate it.”
The attribute that sets an SVG's own coordinate grid, like "0 0 24 24". With it, the drawing scales to whatever size CSS gives it; without it, the icon is stuck at one size.
“Give the SVG viewBox="0 0 24 24" and remove the fixed width and height.”
The SVG element that draws any shape from a list of commands in its d attribute: M moves the pen, L draws a line, C draws a curve, Z closes the shape.
“Draw it as one <path> so it can be animated or morphed later.”
A format that plays After Effects animations in apps and on the web through a JavaScript player. Handy for rich exports, but usually several times larger than the same motion as plain SVG.
“Rebuild this Lottie as a native SVG with CSS keyframes if it is simple enough.”
A way of drawing 3D objects without perspective: faces lean at fixed angles, so a box shows its top and two sides and parallel lines stay parallel.
“Draw it as an isometric sticker: leaned faces, the side falling down-left.”
A flat shape given thickness, like a cookie cut from dough. Isometric stickers build every part as a slab so it reads as a made object, not a flat drawing.
“Make each part its own slab with its own thickness, not detail painted on one shape.”
Trace a pixel image into vector shapes. Tools like vtracer turn each flat color region of a frame into a path.
“Quantize the frames to six colors, then vectorize each with vtracer.”
One SVG file holding every frame of an animation as its own group, shown one at a time by a stepped animation, like flipping the pages of a sketchbook.
“Assemble the traced frames into one vector flipbook at 12 fps with colors as CSS variables.”
A short interface sound whose meaning you learn from its shape, like a rising tone for joining a call. It does not imitate a real-world noise.
“Design the earcons so rising means success and falling means error.”
The small, matched set of four to six sounds a product uses, all made from one material, like one typeface in several weights.
“Build a sound palette of at most six sounds from one material.”
Decibels below the loudest a digital file can go. 0 dBFS is the ceiling where sound distorts, so UI sounds peak at about −3 dBFS.
“Peak every UI sound at −3 dBFS.”
Sound on one channel instead of separate left and right. UI sounds are mono because phone and laptop speakers fold stereo into one anyway.
“Export UI sounds as mono, 44.1 kHz.”
The sharp, loud first instant of a sound, like the crack at the start of a clap. It is the part you line up with the picture.
“Put the sound's transient on the contact frame.”
The browser's little audio engine that a page creates to play sound. It starts paused until the person clicks or presses a key.
“Create and resume the AudioContext inside the first click, never at page load.”
Sound built by code from oscillators and envelopes instead of loaded from a file. Weighs nothing and its pitch and length can follow the UI.
“Synthesize the ticks procedurally with Web Audio; no audio files.”
The overall kind of soundtrack a film uses, such as a dry reveal, a low drone with clicks, a beat track, a voice, or soft foley.
“Pick the sound register from the picture and state its loudness.”
Music or a drone that runs quietly underneath a whole film or section. A bed laid flat from the first second with nothing placed on the reveal is the default mistake.
“Shape the bed: take it away just before the reveal and bring it back on the name.”
Everyday sounds added to match on-screen actions, like keys clicking or a button pressing. In a product film they get louder the more an action matters.
“Add foley whose level follows consequence: typing quiet, Send loudest.”
The moment in a music track where the beat and bass come in hard. In a launch film it should land on the reveal of the name.
“Trim the track's start so its drop lands on the reveal frame.”
The short video, usually 30 to 90 seconds, a company posts when it ships a product or feature.
“plan a 60-second launch film”
The kind of launch film you are making, such as UI motion graphics, product camera or kinetic type. It sets the cut rate, stillness and loudness.
“name the launch-film register first”
How many times a minute the picture jumps to a new shot. About 4 in UI motion films, 14 in product-camera films, 31 in beat-cut sizzles.
“keep the cut rate inside the register's row”
The fraction of a film's frames where nothing visible changes. A blinking caret or a moving cursor counts as motion.
“compare still share only within one register”
A cut from a settled frame to a new scene that just waits. Neither side is moving, so the film stalls. It fails in every register.
“no dead cuts: one side of every cut must be moving”
A stretch of a film with one job: the hook, the problem, the name, the product, the proof, the endcard.
“storyboard the beats with timestamps”
The first two or three seconds of a film, which decide whether anyone keeps watching. A readable word should be on screen by 0.2 to 0.7 seconds.
“a readable word by 0.7 s in the hook”
The frame shown before a video plays, as its thumbnail. Some films bake 1 to 4 frames of the finished title at the very start so the thumbnail names the product.
“bake a poster frame of the title at t = 0”
The closing frame of a film with the mark, the name and maybe a URL. In measured films it runs 4.4 to 6.3 seconds and its last 2 seconds hold still.
“an endcard of about 5 s with a 2 s final hold”
The gap between one word appearing and the next when a line builds word by word. About 0.2 seconds in a music film.
“build the line per word at a 0.2 s stagger”
How long a line stays on screen after its last word lands, so it can be read. About 1.15 to 1.5 seconds in launch films.
“hold each line 1.15 s after its last word”
One word that arrives huge, a quarter of the frame or more, holds a moment, then drops into its sentence. Used once in a film, if at all.
“one slam word, dropped into its sentence”
Framing a single control, like one button or field, so it fills the frame, instead of showing the whole app.
“macro-crop on the control that matters”
A pointer drawn far bigger than on a real screen, about 7 % of the frame's width, so it reads in a video.
“an oversized cursor, about 7 % of frame width”
An instant jump from one shot to the next, with no fade or transition between them. Most launch films use them.
“hard-cut on the click”
The flash you get when two scenes fade at the same time: at the midpoint, whatever is underneath (often white) shows through.
“no crossfade between two opaque scenes unless they share a ground”
Any change from one scene to the next, whether a cut, a fill or a morph. A good seam reads as one continuous move.
“write a seam ledger before animating”
The thing that crosses a scene change and carries the eye with it: a button filling the frame, a dot, a line that becomes a chart.
“carry the seam on one shared element”
A seam where the outgoing scene pushes in and blurs, the scene swaps, and the new one arrives from slightly smaller, as if the camera flew through.
“zoom-through: out 1 to 1.2, in from 0.75”
The frame rate a video was made at, like 24, 30 or 60 frames a second. Review at that rate; converting adds fake duplicate frames.
“review the render at its native frame rate”
A grid of still frames taken at small steps through a video, so you can see exactly what happens around a cut.
“make a contact sheet every 2 frames around each seam”
Loudness Units relative to Full Scale: how loud a whole piece of audio sounds to a person. Closer to zero is louder; −14 is loud, −30 is quiet.
“state the integrated loudness in LUFS”
The highest point the audio wave really reaches, including between samples. Keep it at or below −1 dBTP so it never clips on playback.
“limit to −1 dBTP true peak”
HeyGen's open tool for making videos from HTML: you write the film as a web page and it renders it frame by frame.
“build the film in HyperFrames”
Real motion blur made by sampling several moments inside each frame and averaging them, like a camera's shutter staying open.
“180° shutter, 4 samples a frame, never across a cut”
The music's beats as a timeline you place everything on, measured from the actual track so cuts and hits land on the beat.
“fit the beat grid to the track the film uses”
A short looping video for a landing page that runs as a seamless cycle, with no visible start or end.
“make it a seamless feature loop, frame 0 names the product”
A 3 to 8 second clip that assembles the logo and holds it, played at the start or end of other videos.
“a 5 s logo sting assembled from its pieces”
A finished diagram made for people to read, in a doc, post, README or deck. It is polished once and not edited by hand afterwards.
“Draw this as a finished editorial figure: one HTML file with inline SVG”
An endless editable whiteboard, like tldraw or FigJam, where a team keeps moving boxes and arrows around after the first draft.
“Put this on an editable tldraw board, not a finished figure”
A way to write a diagram as short text (A --> B) that a docs site turns into a picture. Good for structure kept next to code; its automatic layout looks generated in a finished figure.
“Write this flow as a Mermaid block next to the README section”
One box (or shape) in a diagram, standing for one distinct thing: a service, a step, a person, a store of data.
A line or arrow between two boxes that says they are related: one calls, feeds, or leads to the other.
“Use orthogonal connectors with their own attach points”
Running only across and up or down, turning at right angles, never on a slant. Diagrams with right-angle lines look drawn on purpose.
“Route every connector orthogonally, elbows rounded at 8px”
A small patch of background color behind a label on a line, so the line stops short of the words instead of running through them.
“Give every arrow label an opaque paper mask, clear of its stroke”
A table of every proposed moment with the sound it gets (often none), its material, length, trigger and the reason. What the sound verb returns.