SKELETON: Loading placeholder bars
VARIANTS: Bar (default) | Circle | Pill

Gray shimmer blocks that stand in for content while it loads. The caller shapes each bar with width/height/rounding utilities; the component owns only the fill and shimmer animation (disabled under prefers-reduced-motion).

Bars

Bars: Size every bar with tw:h-* / tw:w-* utilities. Match the shape of the content being replaced.

<span class="skeleton tw:h-4.5 tw:w-3/5"></span>

Circle & Pill

Shapes: .skeleton-circle for avatar stand-ins, .skeleton-pill for chip stand-ins.

<span class="skeleton skeleton-circle tw:w-10 tw:h-10"></span>

Result-card Skeleton

Composition: Mirror the real result card's layout — photo block, title bar, meta bars, chip row. Used by the Template Library loading state.

<div class="card"><div class="card-body"><span class="skeleton …"></span>…</div></div>