-
Hardcoded CSS values — any color, spacing, or typography value that should be a CSS variable (var(--)) or utility class? Use DESIGN.md tokens and globals.css classes.
-
Shared component reuse — any reimplementation of Button, Input, LoadingScreen, ErrorScreen, ProgressBar, FilterChip, ToggleSwitch, or ContentBrowser instead of importing from shared/components?
-
Direct apiClient calls — any hook/component calling apiClient.get/post/etc directly instead of through a service layer?
-
Store placement — any store file inside a components/ directory instead of stores/?
-
Barrel files — any index.ts defining types/constants/logic inline instead of re-exporting?
-
CSS import bypass — any // eslint-disable-next-line no-restricted-imports comment to bypass CSS import restrictions?
-
Global CSS bleed — component styles leaking via global button/input/select resets?
-
Loading/error/empty states — do async data-fetching components have timeout, retry, or proper loading/error/empty state transitions instead of "Loading..." indefinitely?
-
React.memo gaps — are frequently re-rendering components (ReviewCard, TonePairDrills, ToneChangeRules) missing React.memo?
-
Responsive layout — do grid layouts use auto-fill/minmax for responsiveness?
-
Accessibility — do interactive elements have role, aria-label, tabIndex, and keyboard handlers?
-
Console.* leftovers — any debug console.log/console.warn/console.error still in production code?
-
Wireframe alignment — does the component structure match the expected card/section layout pattern from the design?
-
Timer edge cases — countdown timers must have an explicit "time's up" state transition, not silently stop
-
Debounce edge cases — auto-submit inputs must account for multi-syllable input (longer debounce or explicit submit button)
