cloudthinker-ai Frontend Code Review Skill
Review frontend PR #{{ pr_number }} in {{ repository }} ({{ framework }}).
Workflow
Phase 1 — Accessibility
ACCESSIBILITY (a11y) CHECK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Semantic HTML:
[ ] Proper heading hierarchy (h1 > h2 > h3)
[ ] Landmark elements used (nav, main, aside)
[ ] Lists use ul/ol, not styled divs
[ ] Interactive elements:
[ ] Buttons use <button>, links use <a>
[ ] Form inputs have associated labels
[ ] ARIA attributes used correctly
[ ] Focus management for modals/dialogs
[ ] Keyboard navigation works (Tab, Enter, Escape)
[ ] Visual:
[ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 large)
[ ] Color is not the sole information conveyor
[ ] Focus indicators visible
[ ] Animations respect prefers-reduced-motion
Phase 2 — Performance
PERFORMANCE CHECK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Bundle size:
[ ] No unnecessary large dependencies added
[ ] Tree shaking effective (named imports used)
[ ] Code splitting for route-level chunks
[ ] Dynamic imports for heavy components
[ ] Rendering:
[ ] No unnecessary re-renders (memoization used)
[ ] Virtual scrolling for long lists
[ ] Images lazy-loaded and properly sized
[ ] Web fonts optimized (subset, display: swap)
[ ] Network:
[ ] API calls debounced/throttled where appropriate
[ ] Data fetching uses caching (SWR, React Query)
[ ] No waterfall request patterns
[ ] Assets use CDN and proper cache headers
Phase 3 — UX Consistency
UX REVIEW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Design system:
[ ] Uses design system components (not custom)
[ ] Spacing/typography tokens used (not hardcoded)
[ ] Colors from theme (not hardcoded hex values)
[ ] Responsive design:
[ ] Works on mobile viewport (320px)
[ ] Works on tablet viewport (768px)
[ ] Works on desktop viewport (1024px+)
[ ] Touch targets minimum 44x44px on mobile
[ ] User experience:
[ ] Loading states shown
[ ] Error states handled gracefully
[ ] Empty states designed
[ ] Form validation provides clear feedback
[ ] Confirmation for destructive actions
Phase 4 — Code Quality
FRONTEND CODE QUALITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Component architecture:
[ ] Components are focused (single responsibility)
[ ] Props interface well-defined (TypeScript types)
[ ] State management appropriate (local vs global)
[ ] Side effects isolated (useEffect cleanup)
[ ] Testing:
[ ] Unit tests for logic/utilities
[ ] Component tests for interactions
[ ] Snapshot tests for regressions (if used)
[ ] E2E tests for critical user flows
[ ] Security:
[ ] No dangerouslySetInnerHTML / v-html with user data
[ ] User input sanitized before rendering
[ ] No sensitive data in client-side storage
[ ] CSRF protection in place
Counter-Rationalizations
| Shortcut | Counter | Why |
|---|---|---|
| "We can skip some steps for this case" | Adapt the workflow steps, don't skip them | Skipped steps are where incidents and oversights originate |
| "The user seems to already know what to do" | Complete all workflow phases with the user | The workflow catches blind spots that experience alone misses |
| "This is a minor case, full process is overkill" | Scale the process down, don't turn it off | Minor cases become major when unstructured; the process scales, not disappears |
| "I'll fill in the details later" | Complete each section before moving on | Deferred details are forgotten; real-time capture is more accurate |
| "The template output isn't necessary" | Always produce the structured output format | Structured output enables comparison, audit trails, and handoff to other teams |
Output Format
Produce a frontend review report with:
- Accessibility compliance (WCAG level achieved)
- Performance impact (bundle size delta, render performance)
- UX consistency (design system compliance score)
- Code quality findings (by category and severity)
- Cross-browser concerns if any