Las pantallas de carga tipo skeleton llevan años siendo una solución casi obligatoria para mejorar la percepción de velocidad en interfaces web. El problema es que, en la mayoría de proyectos, siguen implicando trabajo manual: medir bloques, ajustar rectángulos, rehacer placeholders cuando cambia el diseño y mantener dos versiones visuales de la misma pantalla. Boneyard quiere eliminar precisamente ese esfuerzo con una idea muy concreta: generar skeletons automáticamente a partir del DOM real de la interfaz.
El proyecto, publicado como open source por 0xGF, se define como un framework de skeleton loading “pixel-perfect” que extrae la estructura visual de los componentes reales y la convierte en huesos de carga reutilizables. En GitHub supera ya las 1.200 estrellas, está licenciado bajo MIT y su documentación pública lo presenta en v1.0.0 como una herramienta pensada para integrarse de forma sencilla en flujos frontend modernos.
La propuesta es fácil de entender. El desarrollador envuelve un componente con <Skeleton>, le asigna un nombre y ejecuta después npx boneyard-js build. Ese comando detecta el servidor local, visita la interfaz en varios anchos de pantalla y genera automáticamente un registro de “bones” con posiciones, tamaños y radios de borde que imitan el layout real. Después basta con importar el registro una sola vez para que cada skeleton se resuelva de forma automática cuando el componente entra en estado de carga.
Cómo funciona Boneyard
La documentación oficial explica que Boneyard lee getBoundingClientRect() en cada elemento visible del componente y guarda los resultados como una lista plana de objetos con coordenadas y medidas del tipo { x, y, w, h, r }. A partir de ahí, renderiza rectángulos grises alineados con el diseño real de la página, de modo que el skeleton no es una aproximación hecha a mano, sino una especie de “calco” simplificado de la interfaz.
Ese enfoque tiene dos ventajas claras. La primera es la consistencia visual: si el componente real cambia, el skeleton puede regenerarse sin rehacerlo desde cero. La segunda es la reducción de trabajo repetitivo en equipos de frontend y producto, donde mantener placeholders manuales suele ser una tarea poco agradecida que además envejece mal.
Boneyard también intenta resolver uno de los puntos más delicados en este tipo de soluciones: el comportamiento responsive. Su documentación indica que captura por defecto en 375 px, 768 px y 1.280 px, y genera un JSON responsive en src/bones/ para que el skeleton se adapte a distintos breakpoints. El CLI también permite personalizar esos anchos y elegir otra carpeta de salida.
Qué aporta frente a los skeletons clásicos
Lo interesante de Boneyard no es solo que automatice el proceso, sino que cambia la lógica habitual de diseño. En lugar de pensar primero en el placeholder y luego en la UI, aquí el skeleton nace de la UI ya renderizada. Eso reduce la diferencia entre estado de carga y estado final, algo especialmente útil en dashboards, listados, tarjetas y vistas complejas donde los skeletons genéricos suelen sentirse poco naturales.
Según el repositorio oficial, el componente acepta propiedades como name, loading, color, animate y snapshotConfig. Eso permite ajustar color, animación y control de inclusión de elementos sin perder el automatismo del sistema. También incorpora una animación tipo pulse que aclara ligeramente el tono del color elegido para el esqueleto.
No deja de ser una herramienta muy orientada a proyectos React y a equipos que ya trabajan con una cierta cultura de automatización frontend. No parece pensada para sustituir cualquier técnica de carga visual en cualquier stack, pero sí para aliviar un dolor muy concreto en productos donde los skeletons forman parte del día a día.
Un enfoque que encaja con la obsesión actual por la experiencia percibida
La velocidad percibida sigue siendo una de las batallas más importantes del frontend moderno. En muchos casos, el usuario tolera mejor una espera si la interfaz transmite continuidad visual y evita saltos bruscos. La propia web del proyecto vende Boneyard como una forma de conseguir skeleton screens automáticos, “pixel-perfect” y con zero layout shift, precisamente porque se basan en la estructura real del componente que luego se mostrará.
Ahí está probablemente su mayor atractivo: no tanto la novedad técnica aislada, sino su utilidad práctica. En un ecosistema donde cada vez se automatizan más tareas visuales y de desarrollo, convertir los skeletons en un subproducto del DOM real suena a una de esas ideas que parecen obvias una vez alguien las ejecuta bien.
Quedará por ver hasta qué punto Boneyard se adopta más allá del entusiasmo inicial de GitHub, pero el enfoque tiene lógica: menos trabajo manual, más consistencia visual y una integración razonablemente simple para quien ya trabaja con React y build tooling moderno. Para muchos equipos de interfaz, eso puede ser suficiente para darle una oportunidad.
Preguntas frecuentes
¿Qué es Boneyard exactamente?
Es un framework open source que genera skeleton screens automáticamente a partir del DOM real de los componentes, en lugar de obligar a diseñarlos a mano.
¿Cómo se usa en un proyecto React?
La documentación oficial indica que basta con envolver el componente con <Skeleton>, ejecutar npx boneyard-js build y añadir una vez el registro generado, por ejemplo con import './bones/registry'.
¿Es compatible con diseño responsive?
Sí. Boneyard captura por defecto en tres breakpoints —375 px, 768 px y 1.280 px— y genera salida responsive en JSON.
¿Qué licencia tiene?
El repositorio oficial está publicado bajo licencia MIT.
