Reflex Usage

Build admin pages the way this repo already does: stable information hierarchy first, visual polish second.

Workflow

Confirm that the target is an internal tool, admin page, or operator dashboard. Prefer this skill over a marketing-style layout.
If you are creating a new Reflex app or first-pass shell, initialize from a template instead of a blank app. Default to reflex init --template dashboard for sidebar-plus-content dashboards; use reflex init --template customer_data_app for CRUD or admin backoffice flows; use reflex init --template api_admin_panel for internal tools, API consoles, or task-management surfaces.
Read references/classic_dashboard_ui.md before composing new UI.
If the request centers on a reusable admin navigation shell, desktop sidebar, mobile drawer, or a compact top-bar dropdown/select control, also read references/reflex_admin_nav_shell.md.
Open repo-local UI files only when exact examples are needed.
Extract or reuse module-level style tokens first. Prefer shared dicts and helper components over repeated inline styling.
Compose the page in four layers: background, sidebar, main panel, repeated section primitives.
Drive status styling from state. Prefer palette-backed state fields for status badges, borders, and panel backgrounds.
Validate desktop and narrow widths. Preserve readable grids with repeat(auto-fit, minmax(...)), flex_wrap="wrap", and a sidebar capped at max_width="320px".