App interface checklist

Every rule in the app interface playbook, by chapter, required rules first. Each links to its own page with how we built it and how to check it.

Styles and components

• Required Take every style value from design tokens
• Required Build each control once
• Recommended Name tokens by purpose
• Recommended Change components through variants
• Recommended Show every component state in a catalogue

Data views

• Required Give every data view all its states
• Required Tell an empty start from an empty search
• Required Show errors where the data should be
• Recommended Show loading without flicker
• Recommended Show what loaded when one part fails
• Recommended Say why a control is unavailable

Dates and numbers

• Required Show times in the user's time zone
• Required Keep calendar dates as dates
• Recommended Read numbers the way people type them
• Optional Show relative times with the exact time beside them

Forms

• Required Check every field on the server too
• Required Put server errors on their fields
• Required Never lose what people typed
• Required Save each form only once
• Recommended Check fields when people leave them
• Recommended Save drafts on their own
• Recommended Warn before leaving unsaved changes

Client and server state

• Required Keep server data in one cache
• Required Key cached data by every input
• Required Show the answer to the latest request only
• Required Refresh every view a change touches
• Required Keep screen state in the address
• Recommended Undo optimistic updates that fail
• Recommended Compute values instead of storing them

Lists and tables

• Required Never render thousands of rows
• Required Sort and filter on the server
• Required Make sortable columns buttons
• Required Key rows by their ID
• Recommended Load more with a button
• Recommended Use grid keys only for editable grids
• Recommended Say what select all selects

Feedback and dialogs

• Required Use toasts only to confirm finished work
• Required Keep errors that need action on screen
• Required Put focus somewhere sensible after every change
• Required Let people undo or confirm destructive actions
• Recommended Keep dialogs for short tasks
• Recommended Show progress for long actions

Permissions, flags and failures

• Required Enforce permissions on the server
• Required Survive an expired session
• Required Contain each crash to its panel
• Required Give every request a time limit
• Recommended Let the server say what each user may do
• Recommended Read feature flags before the first paint
• Recommended Say when the network is gone
• Recommended Recover when a new release replaces the old files

Tests and budgets

• Required Test every state of every data view
• Required Give each route a size budget
• Recommended Compare screenshots of every component state
• Recommended Load heavy parts when they are needed