Download · Jun 2026

UI PR Risk Review Checklist

A merge-readiness checklist for product intent, states, accessibility, visual durability, and UI implementation risk.

Best for
UI review · QA
Format
Markdown context file
Use with
AI agent context
Updated
Jun 2026
How to use it

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:
```
Let's build something

Got something you want shipped well?
Let's talk.

Open to work across senior product, UI/UX, full-stack, and AI-forward opportunities where design taste and shipping speed both matter.

Where
Bogotá, Colombia · remote worldwide
Response time
Usually within 24 hours
Find me
@jpcasabianca · everywhere