Loading states and content placeholders litter every data-driven interface with ad-hoc divs, custom animations, and shadow-DOM hacks that confuse users about what's genuine content versus a ghost. Without a consistent primitive, each page implements pulse differently, breaks in dark mode, and forces agents to guess which elements are loading proxies versus real UI.

Skeleton is a lightweight, ref-forwarded placeholder component that pulses in light and dark modes. It ships three shape variants—"rect", "circle", and "text"—and accepts width, height, and className for custom sizing. The stable data-react-fancy-skeleton handle and aria-hidden="true" make it instantly recognizable to agents and assistive tech alike.

Import from @particle-academy/react-fancy and use <Skeleton shape="rect" width={200} height={40} /> for block placeholders, shape="text" for line-by-line shimmer, or shape="circle" for avatars. Agents can query [data-react-fancy-skeleton] to skip placeholder evaluation and wait for real content to load.