add-skeleton-loaders

What problem does it solve?

Route pages often show spinners, blank gaps, or mismatched placeholders while async data loads, causing layout shift and a confusing first-second user experience.

Core Features & Use Cases

• Detect async fetch sites in TanStack Start routes: Identifies useSuspenseQuery, useQuery, and route loader-based pending behavior that must be covered.
• Enforce layout-matching skeleton placeholders: Requires shadcn <Skeleton /> blocks with shape, count, and approximate dimensions that mirror the eventual content.
• Fix loading gaps inline with correct boundaries: Ensures each independently fetched region has its own <Suspense> or pending branch so fast sections don’t wait for slow ones.

Quick Start

Use the add-skeleton-loaders skill on your updated route file to audit every async fetch and insert correctly shaped <Skeleton /> placeholders for each loading region.