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

# Web app interface playbook

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

An interface playbook for interactive web apps, such as dashboards, customer portals, SaaS products and admin tools. It works for any framework, from React, Vue, Svelte and Angular to plain web components and server-rendered pages with htmx. Each rule says what to build, how, and how to prove it in a test.

Apps fail in ways content sites never do. A list loads forever, a form loses an hour of typing, or a button saves twice. A hidden menu still lets the wrong person delete a record. AI app builders produce the happy path well and skip these cases. This playbook covers the cases they skip.

Start with [Data views](https://agentwranglers.se/playbook/app-ui/data-views). Every screen that shows data needs its loading, empty and error states, and most apps miss at least one. Then read [Forms](https://agentwranglers.se/playbook/app-ui/forms) and [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state).

The [website playbook](https://agentwranglers.se/playbook/website) covers what every page needs, such as HTML, speed and accessibility. This playbook links to it instead of repeating it. The [API design playbook](https://agentwranglers.se/playbook/api-design) covers the server side of each screen, and the [testing playbook](https://agentwranglers.se/playbook/testing) covers tests in general.

**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 app interface playbook: https://agentwranglers.se/playbook/app-ui`.

## Chapters

1. [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components): Keep every colour, size and control in one place. Design tokens hold the values, a component library holds the controls, and a catalogue shows every state. (2 required, 3 recommended)
2. [Data views](https://agentwranglers.se/playbook/app-ui/data-views): Every panel, list and chart that shows data has a loading, empty, error, partial and success state. Design each one, test each one, and never show a blank box. (3 required, 3 recommended)
3. [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers): Show times in the user's own time zone, keep calendar dates as dates, and read numbers the way people type them. Most off-by-one-day bugs start here. (2 required, 1 recommended, 1 optional)
4. [Forms](https://agentwranglers.se/playbook/app-ui/forms): Check input at the right moment and put server errors on the right field. Never lose what people typed, and save each form only once. (4 required, 3 recommended)
5. [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state): Keep server data in one cache, keep screen state in the address, and keep the rest local. Update the screen at once only when you can undo it. (5 required, 2 recommended)
6. [Lists and tables](https://agentwranglers.se/playbook/app-ui/lists-and-tables): Long lists stay fast with paging or virtual scrolling. Sort and filter on the server, key rows by ID, and make tables work by keyboard and screen reader. (4 required, 3 recommended)
7. [Feedback and dialogs](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs): Confirm finished work in a status message and keep errors where they need fixing. Place focus with care, and let people undo what they delete. (4 required, 2 recommended)
8. [Permissions, flags and failures](https://agentwranglers.se/playbook/app-ui/permissions-flags-and-failures): The server decides who may do what, and the screen follows. Contain each crash, time out slow requests, and survive expired sessions and lost networks. (4 required, 4 recommended)
9. [Tests and budgets](https://agentwranglers.se/playbook/app-ui/tests-and-budgets): Test every component in every state, catch visual changes with screenshots, and give each route a size budget the build enforces. (2 required, 2 recommended)

See all 54 rules on one page in the [checklist](https://agentwranglers.se/playbook/app-ui/checklist).