Two lines, done
npm install @theengineeringmind/auto-skeletonimport { AutoSkeleton } from '@theengineeringmind/auto-skeleton/react';
<AutoSkeleton loading={isLoading}>
<ProfileCard user={user} />
</AutoSkeleton>;That is the whole integration. Text lines, avatars, images, buttons, badges and chips are detected from the rendered DOM and turned into shimmer blocks in exactly the right place.
What it does differently
Zero skeleton components to write
Every other skeleton library makes you compose grey boxes by hand. auto-skeleton measures the real component and generates the skeleton from it.
Never drifts from your design
Change a font size, padding or layout and the skeleton follows — because it is measured, not drawn.
SSR and React Server Components ready
Ship precomputed layouts and the server renders real blocks with zero layout shift. The React entry is a 'use client' boundary.
No measurable runtime cost
One measurement per component per width, cached across mounts. The shimmer is a compositor-only transform. Core is 3 kB brotlied, React entry 4 kB.
Framework agnostic
A plain DOM core with a React wrapper today. Use the core from Vue, Svelte, Angular, Web Components or plain JavaScript.
Accessible by default
role="status", aria-busy, a screen-reader label, and prefers-reduced-motion support — with enterprise details like CSP nonces and error fallbacks handled.
Everything else
Full documentation — providers, theming, Suspense, precomputed SSR layouts, the vanilla core API and framework recipes — lives in the README on GitHub. Issues and pull requests welcome.