What problem does it solve? Skeleton loading states that don't match the real component's dimensions cause visible layout shifts when content loads, degrading perceived performance and user experience. Manually comparing every skeleton against its loaded counterpart across a branch diff is tedious and easy to miss. ## Core Features & Use Cases - Skeleton/Component Pair Detection: Identifies pairs of loading states (loading.tsx, <Suspense fallback>, shadcn <Skeleton />) and the real components they stand in for within the branch diff against the actual default branch. - Layout Parity Checks: Verifies shared layout shells, per-element height/width/padding parity, line-height matching, and aspect-ratio usage on media, flagging magic numbers like h-4 where content-driven sizes belong. - In-Place Fixes and Reporting: Applies narrow fixes (shared shells, matched leaf dimensions, aspect-ratio) when mutation is in scope, and reports per-pair findings ending with a summary line. - Use Case: After adding a new Suspense fallback to a Next.js dashboard page, run the audit to confirm the skeleton's wrapper, spacing, and block heights match the loaded component so nothing jumps when data arrives. ## Quick Start Ask the assistant to use skeleton-auditor to review the current branch diff for skeleton-to-loaded layout shifts and fix any mismatches it finds.
