pf-code-review_skill

Overview

This skill performs code reviews for the PF frontend monorepo against PF DEV team conventions and React 19 best practices. It focuses on TypeScript safety, modern React patterns, state management, styling, performance, accessibility, and security. Use it by requesting "code review", "review this", or "is this code OK?" with file or diff input.

How this skill works

The skill inspects provided files or diffs and evaluates them against a checklist: React 19 patterns (hooks, forwardRef, Suspense), TypeScript strictness, Zustand usage, service-layer API calls, component structure, styling conventions, performance, accessibility, and security. It produces a structured review with positives, issues grouped by category, concrete remediation suggestions, and a summary status table for quick triage.

When to use it

• When opening a PR that touches components, hooks, or shared utilities
• When migrating or adopting React 19 features and hooks
• Before merging changes that affect global state (Zustand) or API surface
• When adding or refactoring large components (>500 lines)
• When optimizing bundle size, rendering performance, or accessibility

Best practices

• Prefer explicit prop types and strict TypeScript settings; avoid any and leverage inference
• Avoid forwardRef and unnecessary memo/useMemo/useCallback in React 19 unless proven by profiling
• Use selectors with Zustand to limit subscriptions and separate state/actions interfaces
• Abstract API calls into a service layer with typed responses and consistent error handling
• Use cn() + CVA for complex Tailwind variants and keep class order consistent
• Favor semantic HTML, keyboard handlers, ARIA as needed, and validate color contrast

Example use cases

• Review a PR converting legacy refs and memoization to React 19 patterns
• Audit a component that directly calls apiClient from render logic and recommend service-layer refactor
• Check Zustand usage to replace full-store subscriptions with selectors
• Evaluate a large component for single responsibility, prop drilling, and conditional rendering simplification
• Verify styling consistency for a new design system component using Tailwind + CVA