ux-consistency

# UX and visual consistency UX and visual consistency is OpenPost's highest product priority. Apply these criteria to any frontend, UI, component, design-token, or user-facing copy change. `DESIGN.md` and `PRODUCT.md` describe the system itself; this skill is the acceptance bar. ## Direct over blocking - Prefer direct, seamless flows over blocking modals and confirmation dialogs. - Accept pastes and uploads immediately wherever they can land, with an undo path instead of a preflight dialog. - Give substantial or recurring flows a dedicated page. Reserve dialogs for short, consequential, or destructive steps. - When a blocking confirmation is unavoidable, make the consequence, the exact action, and the undo path explicit. ## Verify visually - Exercise the change in the browser and capture before/after screenshots. - Check desktop and phone widths (including 390 px and 320 px), controls, overflow, and the settled state after interaction. - Confirm light and dark themes, keyboard access, visible focus, readable contrast, reduced motion, and 44px coarse-pointer touch targets. - Watch for console errors during the flow. ## Consistency - Reuse shared primitives (page chrome, form controls, loading/empty/notice/toast/error/destructive states) before creating route-specific chrome. - Match spacing, layout, and typography to surrounding routes; use the design tokens in `DESIGN.md` rather than ad-hoc values. - Prove hierarchy with tone, border, and spacing; follow `DESIGN.md`'s Do's and Don'ts for shadows, cards, and shared chrome. ## Copy - Avoid stock metaphors, similes, idioms, and other figures of speech. Prefer short, familiar words when they keep the exact meaning. Cut every word or section that adds no meaning. - Prefer active voice when it makes the actor and action clearer. Replace jargon and needless academic terms with everyday English. - Apply these rules in context, not as blind replacements. Break them when accuracy, natural phrasing, tone, legal meaning, accessibility, or readability requires it. - Keep code, commands, API fields, proper nouns, citations, quotes, legal wording, and exact technical terms intact. - Finish every copy change with a line-by-line prose review for meaning, facts, voice, consistency, and useful detail. ## Done A UI or copy change is done when it renders correctly in both themes at desktop and phone widths, uses shared primitives, and you can attach before/after screenshots showing the settled state.