Un framework de carga skeleton que genera pantallas de carga pixel-perfect a partir de tu interfaz real, sin mediciones manuales ni marcadores de posición ajustados a mano, para React, Preact, Vue, Svelte 5, Angular y React Native.
Qué hace
Boneyard genera automáticamente pantallas de carga skeleton pixel-perfect extrayendo el diseño de tu interfaz real. Una CLI o plugin de Vite abre un navegador sin interfaz gráfica, captura los componentes `Skeleton` nombrados en múltiples breakpoints y genera un archivo `.bones.json`. Compatible con React, Preact, Vue, Svelte 5, Angular y React Native.
Boneyard genera pantallas de carga skeleton pixel-perfect extraídas de tu interfaz real, sin mediciones manuales ni marcadores de posición ajustados a mano. Envuelves el contenido en un componente <Skeleton name="...">, y una CLI (o plugin de Vite) abre un navegador sin interfaz gráfica, visita tu aplicación, encuentra cada skeleton nombrado y captura su diseño en múltiples breakpoints en un archivo .bones.json multiplataforma. En tiempo de ejecución, el skeleton se renderiza mientras se cargan los datos y luego hace una transición suave al contenido real. Funciona con React, Preact, Vue, Svelte 5, Angular y React Native, y se integra con React Suspense mediante un límite BoneSuspense.
Es altamente configurable: animaciones de tipo pulse, shimmer o solid, colores de hueso en modo claro y oscuro, transiciones de escalonado y desvanecimiento, breakpoints personalizados, modo watch que recaptura en HMR, y una ruta para React Native que recorre el árbol de fibras para medir vistas en el dispositivo con cero sobrecarga en producción. Dynamic Type se gestiona automáticamente escalando las posiciones de los huesos al tamaño de texto del usuario. Instala boneyard-js desde npm; con licencia MIT.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto (MIT).
Herramientas usadas
Un framework que genera pantallas de carga skeleton pixel-perfect capturando el diseño de tus componentes reales, para que no tengas que medir ni ajustar marcadores de posición a mano.
Una CLI o plugin de Vite abre un navegador sin interfaz gráfica, visita tu aplicación, encuentra cada `Skeleton` nombrado y captura su diseño en múltiples breakpoints en un archivo `.bones.json`; React Native mide las vistas en el dispositivo en modo desarrollo.
React, Preact, Vue, Svelte 5, Angular y React Native, todos produciendo el mismo formato bones multiplataforma.
Una colección de spinners, loaders y animaciones de carga para aplicaciones web modernas, construida con React, Next.js, shadcn/ui, Tailwind CSS y Framer Motion.
Best for Añadir spinners y animaciones de carga rápidamenteUna colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido.
Best for Añadir microinteracciones pulidas sin una biblioteca de movimientoUna biblioteca de animaciones de carga reutilizables en estilo dotmatrix para React y Next.js, instalable a través del registro de shadcn o copiando el código fuente directamente desde la documentación.
Best for Loaders con el distintivo estilo dotmatrixUna colección de layouts de interfaz de usuario de código abierto, cuidadosamente elaborados con Next.js y shadcn/ui: dashboards, rastreadores y plantillas de aplicaciones con demos en vivo, en variantes tanto de Radix UI como de Base UI.
Best for Comenzar una interfaz de aplicación a partir de un layout completo y realistaOpen-source brand SVG icon library with 6,149+ typed, tree-shakeable icons for developers and designers.
Best for Apps that display third-party brand logos and want a single versioned npm dependencyVisual RAG pipeline that retrieves over screenshot tiles instead of parsed text, preserving tables, charts, and layout for more accurate document search.
Best for Builders doing RAG over documents where tables, charts, or layout carry meaning that HTML parsing silently drops