Reflex Usage

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

Workflow

1. Confirm that the target is an internal tool, admin page, or operator dashboard. Prefer this skill over a marketing-style layout.
2. 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.
3. Read references/classic_dashboard_ui.md before composing new UI. Open web/relay_user_portal/relay_user_portal.py if exact local examples are needed.
4. Extract or reuse module-level style tokens first. Prefer shared dicts and helper components over repeated inline styling.
5. Compose the page in four layers: background, sidebar, main panel, repeated section primitives.
6. Drive status styling from state. Prefer palette-backed state fields for status badges, borders, and panel backgrounds.
7. Validate desktop and narrow widths. Preserve readable grids with repeat(auto-fit, minmax(...)), flex_wrap="wrap", and a sidebar capped at max_width="320px".

Layout Rules