Modernize UI

Reworks the interface of an existing project so it is faster, better looking, usable to WCAG 2.2 AA and the same in every browser and viewport, without breaking the browsers it works in today.

The project is edited only after the user approves a catalogue: one page that lists every intended change beside renders of each page before and after. When the user says to skip the catalogue, only the plan and its approval (steps 2 to 5 below) are skipped. The untouched site is still captured before the first edit, and the finished work is still captured and built with build_catalogue.py --fail-on-regression, which is the regression check as well as the page and runs without --plan. Both captures are the full default run.

Dials

Take each dial from the request. A request that names a mode, asks for an audit or says to use the defaults is enough to start: the dials it leaves out take their defaults, and the first reply says which defaults were used. Any other request gets one message before anything is captured or edited, with the host's question tool if it has one, asking for all four dials, showing each default and saying in a line what each mode lets change.

• Audit first (default: no). Capture the site, build the catalogue from that run alone, report what is wrong with the measurements behind it, change nothing, then ask for the mode.
• Mode (default: refresh). The mode sets what may visibly change.
  • preserve: a visitor should not notice a redesign. Fix what is broken, slow or irritating: sideways scroll, layout shift, render-blocking scripts, oversized images, dead CSS and JavaScript, keyboard traps, missing names and focus styles, motion nobody can pause. The after renders differ from the before renders only where a defect was fixed, and each visible difference is its own change in the plan, including a brand colour darkened to pass contrast.
  • refresh: the same brand, palette, typefaces, content and page structure, brought up to date. Spacing, type scale, component styling, states, motion and responsive behaviour may change, and dated patterns (float grids, auto-rotating carousels, div buttons, plugin-driven widgets) are replaced with what the platform now does itself. This is the mode for a site built around 2020.
  • reimagine: a new visual direction for layout, type, colour, motion and every component. Content, features, URLs and brand marks stay unless the user releases them.
• Pages (default: all of them). Every route, one page per template when a template repeats, plus the states a visitor meets: open menu, dialog, form error, empty list, signed-in view.
• Browser floor (default: what the project supports today). See Older browsers.

No mode touches copy, prices, legal text, routes, form submission, analytics, SEO metadata or the backend unless the user asks. List them under out_of_scope in the plan so the user sees the boundary. Copy is every word a visitor already reads, down to option text, placeholders and button labels. A fix that has to add wording, such as a label, alt text or an error message, quotes the new words in its plan entry.