SKELETON: Loading placeholder primitive
VARIANTS: Block (base) | Text line | Circle
Shape stand-ins while content loads. The component sets surface + pulse; dimensions come
from width/height utilities. Wrap a skeleton group in aria-busy="true".
Table and timeline keep their own skeleton classes — new work uses this primitive
(DR-2026-12).
<div class="tw-skeleton tw:w-40 tw:h-24"></div> ·
<div class="tw-skeleton tw-skeleton-text tw:w-48"></div> ·
<div class="tw-skeleton tw-skeleton-circle tw:size-10"></div>
<div class="tw-card-body" aria-busy="true">…skeleton shapes…</div>