Pattern Library · Technical report
UI Patterns: A Catalogue of Forty Interface Patterns Built for Coding Agents
Lifted from apps shipped in Boulder, Colorado
Revised 28 September 2026
Abstract
A UI pattern library built for coding agents. 40 patterns, each shipping a copy-paste prompt that rebuilds it inside your own codebase — plus a live preview and the source behind it. Section 1 defines the three forms every pattern takes; Section 2 is the searchable catalogue.
1Every pattern, three ways
Definition 1 (Preview). The pattern running live in an isolated frame, in whichever theme you are reading in.
Definition 2 (Source). Its markup, styles and behaviour, plus a single runnable file carrying its own palette.
Definition 3 (Prompt). A written spec that rebuilds the pattern from scratch — including why each decision is the way it is. Paste it into Claude Code, Cursor, or any coding agent.
Remark. The prompts are the point. Each one is written to survive being handed to an agent with no other context: it names the surfaces the pattern belongs on, spells out the constraint that makes it work, and calls out the failure it exists to prevent. Nothing here is a dependency you install.
2The catalogue
No patterns match that search.
Try a shorter term, or clear the filters to see all 40.
| No. | Pattern | Category | Added |
|---|---|---|---|
| 1 | Windowed schedule grid · Data displayRows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration.schedule · timeline · grid · flexbox · time | Data display | 11 Aug. 2026 |
| 2 | Benchmark progress bar · Data displayPlaces a raw figure on a scale of external benchmarks instead of printing it plain.progress · benchmarks · css-only · data-viz · empty-state | Data display | 11 Aug. 2026 |
| 3 | Cross-highlight matrix · Data displayA two-axis lookup table with both headers sticky, hover lighting the full row and column at once, and a durable click-to-pin selection for touch.table · matrix · sticky · accessibility · hover | Data display | 11 Aug. 2026 |
| 4 | Left-truncating paths · Data displayShortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.truncation · paths · text-overflow · breadcrumbs · file-systems | Data display | 11 Aug. 2026 |
| 5 | Shape-mark sequence (updated) · Data displayA sequence compressed into a row of small marks whose shape carries the state.stepper · sparkline · series · truncation · css-only · no-assets | Data display | 21 Aug. 2026 |
| 6 | Linked month bars · Data displayA month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it.timeline · drill-down · css-only · data-viz · no-assets | Data display | 21 Aug. 2026 |
| 7 | Glass vial meter · Data displayA vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images.meter · skeuomorphic · css-only · reduced-motion · no-assets | Data display | 21 Aug. 2026 |
| 8 | Partitioned stage bar · Data displayProgress for work with several possible endings, drawn as a census rather than a fraction.progress · stacked-bar · batch · legend · status · aria-label | Data display | 12 Sep. 2026 |
| 9 | Term-by-term derivation · Data displayA computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt.explainability · calculator · disclosure · formula · tabular-nums · details | Data display | 12 Sep. 2026 |
| 10 | Plan preview tree (updated) · Data displayA dry run shown as a before-and-after tree with counts now, after, and the difference.dry-run · diff · tree · preview · bulk-operation · confirmation | Data display | 12 Sep. 2026 |
| 11 | Uniform slot shell · Data displayOne card shell many independent sources render through, where the shell does the capping.dashboard · widgets · cards · empty-state · error-state · grid | Data display | 12 Sep. 2026 |
| 12 | Object-shaped cards (updated) · LayoutWhere a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.cards · css-only · gradients · variations · no-assets · skeuomorphic | Layout | 11 Aug. 2026 |
| 13 | Adaptive tile mosaic · LayoutA container with no artwork draws one from up to four member tiles, grid tracks following tile count.css-grid · css-only · no-assets · cards · layout | Layout | 11 Aug. 2026 |
| 14 | Ground-scrimmed artwork (updated) · LayoutText printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.layout · css-only · gradients · contrast · no-assets · hero · cards | Layout | 11 Aug. 2026 |
| 15 | Hairline stat strip (updated) · LayoutStat tiles joined by hairlines that are grid gap, not borders.stats · css-grid · css-only · hairline · no-assets | Layout | 21 Aug. 2026 |
| 16 | Annotated transcript · LayoutConversation bubbles with a speaker-colored spine and a fixed metadata gutter.conversation · gutter · status-roles · contrast · css-only | Layout | 21 Aug. 2026 |
| 17 | Cork notice board · LayoutPinned paper notes on a cork board where every texture is layered CSS gradients.skeuomorphic · gradients · no-assets · cards · css-only | Layout | 21 Aug. 2026 |
| 18 | Hotspot marker layer (updated) · LayoutMarkers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.hotspots · pointer-events · aspect-ratio · container-query · overlay · responsive | Layout | 12 Sep. 2026 |
| 19 | Line-art empty states · LayoutInline drawings for empty surfaces stroked in the inherited text colour.empty-state · svg · currentcolor · illustration · aria-hidden · no-assets | Layout | 12 Sep. 2026 |
| 20 | Column-flow wall · LayoutCards flowing down columns instead of across rows, with the reading-order cost stated plainly.masonry · columns · break-inside · reading-order · cards · responsive | Layout | 12 Sep. 2026 |
| 21 | Scroll edge shadows · InteractionAn inset shadow shown only on the edge that has more content behind it.scrolling · affordance · lists · overflow · progressive-disclosure | Interaction | 11 Aug. 2026 |
| 22 | Frozen-batch deck · InteractionA one-card-at-a-time review queue whose batch is snapshotted at mount.queue · review-flow · animation · keyboard · reduced-motion | Interaction | 11 Aug. 2026 |
| 23 | Controls beside the anchor (updated) · InteractionPer-card controls over a fully-linked card without nesting interactive elements in the anchor.cards · accessibility · keyboard · focus-within · grid | Interaction | 11 Aug. 2026 |
| 24 | Pluggable canvas visualizer (updated) · InteractionOne canvas, a registry of draw modes, each mode owning its entire frame.canvas · visualization · registry · animation · reduced-motion | Interaction | 11 Aug. 2026 |
| 25 | Roving-grid board (updated) · InteractionA dense grid of state cells that is one tab stop with arrow-key navigation.keyboard · roving-tabindex · accessibility · states · dense-data | Interaction | 21 Aug. 2026 |
| 26 | Section rail · InteractionSticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.navigation · toc · responsive · aria-current · intersection-observer · container-queries · sticky | Interaction | 21 Aug. 2026 |
| 27 | Ledge-press buttons · InteractionButtons on a solid ledge shadow that travel down onto it when pressed.buttons · skeuomorphic · press · tokens · css-only | Interaction | 21 Aug. 2026 |
| 28 | Guarded control (updated) · InteractionA blocked control stays focusable, carries the reason as text, and refuses in its handler.aria-disabled · disabled · preconditions · keyboard · aria-describedby · forms | Interaction | 12 Sep. 2026 |
| 29 | Polled job card (updated) · InteractionOne card for every state a background job passes through.progress · polling · background-job · indeterminate · aria-busy · reduced-motion | Interaction | 12 Sep. 2026 |
| 30 | Entry-transform motion · InteractionFLIP-style motion between two rendered states when the old DOM is already gone.animation · transitions · reflow · reduced-motion · navigation · layout-effect | Interaction | 12 Sep. 2026 |
| 31 | Slot-first picker (updated) · InteractionAssignment that starts at the destination slot, then narrows the catalogue.assignment · picker · aria-pressed · filtering · forms · data-driven | Interaction | 12 Sep. 2026 |
| 32 | Undo toast · FormsA destructive action with no confirm dialog, held behind a toast and committed when it expires.undo · toast · destructive · aria-live · reduced-motion | Forms | 28 Aug. 2026 |
| 33 | Blast-radius confirm (new) · FormsA confirm dialog that names everything a delete cascades and blocks dismissal while it runs.confirm-dialog · destructive · cascade · dialog-element · forms | Forms | 28 Sep. 2026 |
| 34 | Batch action bar (updated) · FormsA bar that exists only while something is selected, states the count in words, caps at five actions.selection · bulk-actions · toolbar · checkbox · indeterminate · bulk-edit · mixed-values | Forms | 28 Aug. 2026 |
| 35 | Filtered to zero · FormsThe three empty states a list actually has, written as three different screens.empty-state · filter · search · zero-results · aria-live · copywriting | Forms | 12 Sep. 2026 |
| 36 | Parsed query chips · FormsA search box that echoes back how it read the text as removable chips.search · query-syntax · chips · facets · parsing · aria-live | Forms | 12 Sep. 2026 |
| 37 | Compound-value picker · FormsOne grouped select whose value carries both the kind and the id.select · optgroup · polymorphic · forms · dependent-fields · keyboard | Forms | 12 Sep. 2026 |
| 38 | Ground-referenced color (updated) · ColorColors solved against the page's own ground token so they invert correctly between themes.color · contrast · color-mix · accessibility · wcag · theming · year-map | Color | 11 Aug. 2026 |
| 39 | Single-property color variants (updated) · ColorOne custom property carries the hue; border, fill, spine and dot derive from it.color · color-mix · custom-properties · theming · data-attributes · badges | Color | 21 Aug. 2026 |
| 40 | Controls on an unknown fill (updated) · ColorOpaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.contrast · brand-color · focus-ring · opacity · wcag · theming | Color | 12 Sep. 2026 |