Frontend/UI Pull Request Template
A PR template for frontend development with browser testing matrix, responsive design checklist, accessibility checks, and visual regression notes.
Detailed Explanation
Frontend/UI PR Template
Frontend PRs have unique review requirements. Beyond code correctness, reviewers need to verify visual consistency, cross-browser compatibility, responsive behavior, and accessibility compliance. This template captures all those dimensions.
Template Structure
## Description
<!-- What UI changes does this PR introduce? -->
## Type of Change
- [ ] New UI component
- [ ] UI bug fix
- [ ] Style/CSS changes
- [ ] Layout changes
- [ ] Animation/transition changes
- [ ] Accessibility improvement
## Screenshots / Recordings
| Viewport | Before | After |
|----------|--------|-------|
| Desktop | | |
| Tablet | | |
| Mobile | | |
## Browser Testing
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)
- [ ] Mobile Safari (iOS)
- [ ] Chrome (Android)
## Checklist
- [ ] Responsive design verified at common breakpoints
- [ ] Dark mode / light mode tested
- [ ] Keyboard navigation works
- [ ] Screen reader tested (VoiceOver / NVDA)
- [ ] Color contrast meets WCAG AA (4.5:1)
- [ ] No layout shifts (CLS)
- [ ] Images have alt text
- [ ] Storybook stories updated (if applicable)
## Accessibility
<!-- Describe any accessibility considerations. -->
## Performance
<!-- Any impact on bundle size, load time, or rendering performance? -->
## Related Issues
<!-- Closes #(issue number) -->
Multi-Viewport Screenshots
The three-row screenshot table (Desktop, Tablet, Mobile) encourages contributors to verify responsive behavior at multiple breakpoints. This is especially important for layout changes and new components.
Browser Testing Matrix
The browser checklist ensures cross-browser compatibility. Most teams don't test every browser for every PR, but the checklist serves as a reminder for changes that might behave differently across engines (CSS Grid, Flexbox, animations).
Accessibility Checklist
The detailed accessibility checklist covers WCAG compliance, keyboard navigation, screen reader testing, and color contrast. These are the most commonly missed aspects of frontend PRs.
Performance Section
Frontend changes can significantly impact Web Vitals. The Performance section prompts contributors to consider bundle size impact, layout shifts, and rendering performance.
Use Case
Frontend and full-stack teams building web applications where UI quality, cross-browser compatibility, and accessibility are critical. Particularly valuable for teams with dedicated QA or accessibility reviewers.