Show the Shape of What Is Coming.

Create a skeleton loading state for a feed of article cards, five placeholder cards in a vertical stack with a 16px gap. Each placeholder mirrors the real card: a 48px rounded-full avatar block, then a column with a 70%-width 16px-tall title bar, a 45%-width subtitle bar, and two full-width 12px-tall body lines, all bg-zinc-200 rounded-lg. Animate a shimmer sweep with a CSS keyframe — a linear-gradient white overlay translating across each block over 1.4s infinite — on a pseudo-element, with prefers-reduced-motion swapping to a static 60% opacity fill. Set aria-busy="true" on the container with a visually hidden "Loading feed" label, mark each block aria-hidden, and render the real cards into this same container on load so the page never reflows.

Create a skeleton state for a 3-column product grid with nine placeholder tiles. Each tile is a rounded-xl card: an image placeholder locked with aspect-ratio 4/5 and bg-zinc-200, then a 14px title bar at 80% width, a 12px price bar at 40% width, and a small pill-shaped button placeholder. Apply the shimmer gradient animation to every block, staggered per column by 150ms so the sweep reads as a wave across the grid rather than a synchronized blink. Keep the grid definition identical between the skeleton and the loaded state so tiles never shift, use container queries or fixed column widths so a late-loading real image cannot resize its tile, and put aria-busy="true" on the grid wrapper.

Create a skeleton loading state for a data table with six columns and ten rows. Render the real header row immediately — column labels are known before the data is. Below it, ten placeholder rows each containing six bars of bg-zinc-200 h-4 rounded, with widths matching each column's typical content: 24px for the checkbox column, 60% for the name column, fixed 90px for dates, and so on, all aligned by the same grid template the real rows use. Shimmer on a CSS keyframe with a 0.05s per-row stagger, wrap the table region in aria-busy="true", and on load replace the placeholder rows in the same tbody so column alignment is never recomputed.

Create a skeleton state for a product or profile detail page. Render the app shell — navigation, breadcrumbs, page background — immediately with no placeholder. In the content region, show a 16/9 rounded-2xl hero image block with aspect-ratio, a 60%-width 28px-tall heading bar, a meta row of three 12px bars at 20% width with 24px gaps, and four paragraph lines of full width ending in a 65%-width last line. Shimmer all blocks with the CSS gradient sweep, reduced-motion static fallback included. Set aria-busy on the content region only, not the page, so screen readers keep the shell navigable, and swap the loaded record into the same region container so the scroll position does not move.