# Boneyard By **0xgf** · Software & Tools 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. - Source: https://boneyard.vercel.app/ - Repository: https://github.com/0xGF/boneyard - Install: `npx boneyard` - Tags: open-source, ui, react, vue, svelte, loading, cli, vite - Pricing: free - Upvotes: 0 ## Features - Skeletons pixel-perfect capturados automáticamente desde tu interfaz real - Compatible con React, Preact, Vue, Svelte 5, Angular y React Native - CLI o plugin de Vite captura diseños en múltiples breakpoints - Formato de salida `.bones.json` multiplataforma - Integración con React Suspense mediante `BoneSuspense` - Animaciones pulse, shimmer o solid con colores claro y oscuro - Captura en dispositivo para React Native con cero sobrecarga en producción --- 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 ``, 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. ## FAQ ### ¿Qué es Boneyard? 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. ### ¿Cómo funciona la captura? 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. ### ¿Qué frameworks son compatibles? React, Preact, Vue, Svelte 5, Angular y React Native, todos produciendo el mismo formato bones multiplataforma. --- [View on Analog](https://analoghq.ai/es/0xgf/software-tools/boneyard)