kiro-rails: Command for Claude Code

Before scanning, read docs/decisions/ ADRs if they exist. Use documented performance budgets and architectural decisions to calibrate findings against intentional trade-offs.

Act as a senior frontend performance engineer specializing in React, browser rendering pipelines, and Core Web Vitals optimization.

Your task is to perform a comprehensive frontend performance audit of this codebase. Identify rendering bottlenecks, memory leaks, unnecessary re-renders, bundle bloat, and Core Web Vitals issues. Produce a prioritized fix plan with concrete code-level recommendations.

---

Phase 1: Static Analysis (no browser needed)

Scan the codebase for known performance anti-patterns:

React Rendering:

1. Components missing React.memo() that receive stable props but re-render due to parent changes. Focus on list item components rendered inside .map() loops.
2. Inline object/array literals in JSX props (style={{...}}, options={[...]}) that create new references every render.
3. Callbacks defined inline in JSX without useCallback - especially in .map() loops where each iteration creates a new function.
4. useEffect dependencies that change on every render (objects, arrays, functions not wrapped in useMemo/useCallback).
5. Expensive computations inside render bodies that should be wrapped in useMemo.
6. Components that subscribe to broad context values but only use a small slice - causing re-renders on unrelated context changes.
7. Missing useTransition for non-urgent state updates - search/filter inputs that trigger expensive re-renders should use startTransition to keep the input responsive.
8. Missing useDeferredValue for derived expensive renders - values driving expensive child renders (search queries, filter criteria) that block input responsiveness.
9. React Compiler awareness - if on React 19+ with compiler enabled, flag redundant manual useMemo/useCallback. If NOT on React 19+, flag missing memoization.

DOM, CSS & Rendering: 10. Animations using height, width, top, left, margin, or padding instead of transform/opacity (triggers layout on every frame instead of compositor). 11. box-shadow, border-radius, or filter transitions that trigger paint on every frame. 12. Large DOM trees - components rendering 100+ elements when most are off-screen (candidates for virtualization or content-visibility: auto). 13. Missing CSS contain: content on independent UI islands (cards, tiles, widgets, drawers) - without containment, a change inside one card triggers layout recalculation across the entire document. 14. Missing content-visibility: auto with contain-intrinsic-size on long scrollable lists and below-fold sections - achieves virtualization-like performance without JavaScript. 15. CSS selectors with high specificity or deep nesting that force expensive style recalculation. 16. will-change applied broadly or permanently instead of only on elements that actually animate.

Resource Loading & LCP: 17. LCP image missing fetchpriority="high" attribute. LCP image with loading="lazy" (contradicts priority). 18. Missing <link rel="preconnect"> to critical origins (CDN, font provider, API) in document head. 19. Missing <link rel="preload"> for critical resources the browser can't discover from HTML parsing (CSS background images, fonts). 20. Large dependencies imported eagerly that should be lazy-loaded or code-split. 21. Barrel file re-exports (index.ts) that pull in entire feature modules when only one component is needed. 22. Duplicate utility code across features that should be in shared/.

Image & Font Optimization: 23. Images served only as JPEG/PNG without modern format alternatives (AVIF/WebP via <picture> element or framework image component). 24. Images missing srcset and sizes for responsive delivery. Images missing explicit width/height attributes (causes CLS). 25. Font files loading full Unicode ranges when only Latin subset is needed. More than 2 font families or 4 font files total. 26. @font-face using font-display: swap without metric override descriptors (size-adjust, ascent-override, descent-override) on fallback fonts - causes CLS on font swap. 27. Non-critical fonts using font-display: swap when font-display: optional (with preload) would eliminate both FOIT and CLS.