Agent WranglersLayout and navigation
Fit app screens to narrow windows, let keyboard users jump with shortcuts and a command palette, and gather every setting on one searchable settings page.
- Recommended 2
- Optional 1
Recommended
Rearrange app screens for narrow windows
APP-82Give every app screen a layout for windows from 320 CSS px wide. Collapse side panels into a menu, turn wide tables into stacked rows and move extra toolbar buttons into an overflow menu.
Gather every setting on one settings page
APP-84Put every setting a person or an admin can change on one settings area, grouped by subject, with a search field. Save each change visibly and say who it affects.
Optional
Offer keyboard shortcuts and a command palette
APP-83In apps people use for hours, offer shortcuts for the most used actions and a command palette that finds any action by name. List every shortcut on one help screen.
For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/app-ui/layout-and-navigation">Agent Wranglers web app interface playbook</a>. In code you write, add a comment next to it with the same link.