Frontend PR Review
Review UI pull requests against one fixed frontend checklist: state, effects, a11y, UI states, perf, client security, and tests.
Before & after
Same prompt, same agent — the only difference is the skill.
Sure, I can take a look at that for you. The component looks generally fine, though there are a few things you might want to consider. One thing could be about performance, depending on how often it re-renders. You might also want to think about accessibility in case that's relevant to your use case. Have you considered using any particular libraries for state management, or are you handling that differently? Let me know if there's anything specific you'd like me to focus on, and I'd be happy to discuss further.
PERFORMANCE BOTTLENECKS • Direct children re-render on every parent state change; wrap in React.memo or useCallback for 1000+ item lists • useState for form validation triggers full component re-render; move to useReducer or separate context • Missing dependency array in useEffect for API calls—will run on every render, not just mount BEST PRACTICES VIOLATIONS • Event handlers defined inline in JSX; hoist outside render to prevent closure issues with stale props • No error boundary; unhandled exceptions in lifecycle crash the entire component tree • Hardcoded theme colors instead of CSS variables; breaks dark mode support and brand updates ACCESSIBILITY GAPS • Tab order not managed; keyboard navigation skips focusable elements • Missing ARIA labels on 4 interactive regions; screen readers miss intent IMPLEMENTATION PRIORITY 1st: Fix useEffect dependencies (quickest win, prevents memory leaks) 2nd: Hoist event handlers (eliminates stale closure bugs) 3rd: Memoize children (needed only if profiler shows re-render slowdown)
About this skill
Every frontend PR gets reviewed against the same eight-section checklist, so feedback is consistent no matter who reviews. Each finding points to a line and comes with a specific fix.
What it does
- Checks rendering and state: list keys, derived state, mutation, and controlled inputs
- Checks effects and async: dependency arrays, cleanup, race conditions, and fetch patterns
- Covers accessibility (semantic elements, labels, focus management, contrast) and loading/empty/error states
- Covers performance (bundle impact, lazy loading, CLS, virtualization) and client-side security (innerHTML sinks, leaked env vars)
- Checks that tests query by role and cover error and empty states
What you get
A review with a verdict, findings graded as blockers, should-fix, or nits (each with file:line and a fix), checklist coverage by section, and what was done well.
Best for
Frontend teams on React, Next.js, Vue, Svelte, or Angular who want consistent PR reviews.
SKILL.md preview
---
name: frontend-pr-review
description: Review a frontend pull request (React, Vue, Svelte, Angular, or plain TS/JS + CSS) against one fixed checklist covering rendering correctness, state and effects, accessibility, UI states, performance, security, and tests, and return findings graded by severity with file:line references. Use when the user asks to review a frontend PR, a component diff, a UI change, or wants consistent frontend review comments across the team, including casual asks like "can you look over this React component", "is this PR ok to merge", or "anything wrong with this JSX".
---
# Frontend PR Review
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.