Built as working context, not shelfware.
This resource is meant to be useful inside the tools where product work now happens: your codebase, your notes, and your AI-assisted workflow.
01
Paste the markdown into Claude, ChatGPT, Cursor, Codex, Gemini, or another AI agent as reusable project context.
02
Use it before a planning, implementation, review, or audit session so the agent has constraints, criteria, and working structure up front.
03
Adapt the sections to your product, team, or repo before asking the agent to execute against it.
Markdown previewui-pr-risk-review-checklist.md
# UI PR Risk Review Checklist Use this before merging a UI pull request that touches product behavior, data, accessibility, or AI-assisted output. ## 1. Product Intent - [ ] The PR description names the user job, not only the component or route. - [ ] The reviewer can explain what changed in one sentence. - [ ] The primary action matches the user problem. - [ ] New controls are real product affordances, not placeholder ideas. - [ ] Copy matches the consequence of the action. - [ ] The implementation does not invent product behavior outside scope. ## 2. State Coverage - [ ] Loading state exists and preserves layout shape. - [ ] Empty state explains why there is no data. - [ ] Error state gives a recovery path. - [ ] Permission-limited state is visible and plain. - [ ] Long content, missing images, zero values, and repeated names fit. - [ ] Mobile keyboard and narrow viewport states were checked. - [ ] Slow network behavior does not create duplicate actions. ## 3. Interaction Quality - [ ] Buttons are buttons and links are links. - [ ] Inputs have programmatic labels. - [ ] Focus order follows the visual flow. - [ ] Modals, drawers, menus, and popovers manage focus. - [ ] Escape, Enter, arrows, and Tab behave as expected where relevant. - [ ] Disabled controls explain what is missing nearby. - [ ] Destructive actions show scope and consequence before commit. ## 4. Visual Durability - [ ] Text fits in mobile and desktop containers. - [ ] Components do not resize unpredictably on hover or loading. - [ ] Data density is realistic, not demo-clean. - [ ] Color is not the only state signal. - [ ] Spacing and type scale match the existing system. - [ ] New visuals clarify a decision, state, or relationship. ## 5. Code Risk - [ ] The change follows local component and data-fetching patterns. - [ ] Generated code was simplified before merge. - [ ] State is owned at the smallest useful level. - [ ] Error handling is local enough for the user to recover. - [ ] No secret, service role key, or sensitive data reaches the client. - [ ] Tests or manual QA cover the riskiest behavior. ## 6. Merge Note Paste this into the PR after review: ```md UI risk pass complete: - Product job: - States checked: - Accessibility path: - Real data stress case: - Remaining risk: ```