---
title: "Interface · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface
updated: 2026-10-20
licence: "All rights reserved"
---

# Interface

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Native HTML and CSS for menus, layout, text, colour and motion. Use what the browser already does instead of JavaScript widgets and fixed layouts.

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface`.

## Recommended

- [Build menus with popover](https://agentwranglers.se/playbook/website/interface/popover-api): Build menus, tooltips and simple overlays with the built-in `popover` attribute, instead of JavaScript modal code.
- [Build modal dialogs with dialog](https://agentwranglers.se/playbook/website/interface/dialog-element): Build modal dialogs with the `<dialog>` element and `showModal()`, never with a styled `div` and your own focus code.
- [Pin menus to their button with CSS](https://agentwranglers.se/playbook/website/interface/anchor-positioning): Attach popovers and menus to the element they belong to with CSS anchor positioning. Keep a plain fallback where browsers lack it.
- [Let parts fit the space they get](https://agentwranglers.se/playbook/website/interface/container-queries): Let components adapt to the space they are given with container queries, not only to the width of the screen.
- [Let the browser balance line breaks](https://agentwranglers.se/playbook/website/interface/text-wrap): Use `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs, instead of manual line breaks.
- [Keep room for the scrollbar](https://agentwranglers.se/playbook/website/interface/scrollbar-gutter): Keep space for the scrollbar with `scrollbar-gutter: stable`, so the page doesn't shift when scrolling is locked or unlocked.
- [Size full-height panels for phones](https://agentwranglers.se/playbook/website/interface/dynamic-viewport-units): Size full-height phone layouts with `dvh`, `svh` or `lvh` instead of `vh`, so they fit when the address bar moves.

## Optional

- [Wire buttons without click handlers](https://agentwranglers.se/playbook/website/interface/invoker-commands): Connect buttons to popovers and dialogs in HTML with `commandfor` and `command`. Keep a fallback for older browsers.
- [Define every colour once](https://agentwranglers.se/playbook/website/interface/colour-as-tokens): Define every colour once as a `light-dark()` custom property, and switch themes with `color-scheme`, never with duplicate rules.
- [Animate on scroll with CSS](https://agentwranglers.se/playbook/website/interface/scroll-driven-animations): Drive scroll effects with CSS `animation-timeline` instead of scroll event listeners in JavaScript.
- [Skip page fades unless they help](https://agentwranglers.se/playbook/website/interface/view-transitions): Use View Transitions only where the animation helps people follow a change, and check that it doesn't slow down clicks.

- Previous: [Site architecture](https://agentwranglers.se/playbook/website/site-architecture)
- Next: [Performance](https://agentwranglers.se/playbook/website/performance)
- [All chapters](https://agentwranglers.se/playbook/website)