# Boneyard

By **0xgf** · Software & Tools

Um framework de skeleton loading que gera telas de carregamento pixel-perfect a partir da sua UI real, sem medições manuais ou placeholders ajustados à mão, para React, Preact, Vue, Svelte 5, Angular e 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 automaticamente da sua UI real
- Compatível com React, Preact, Vue, Svelte 5, Angular e React Native
- CLI ou plugin do Vite captura layouts em múltiplos breakpoints
- Formato de saída multiplataforma `.bones.json`
- Integração com React Suspense via `BoneSuspense`
- Animações pulse, shimmer ou solid com suporte a cores claras e escuras
- Captura no dispositivo para React Native com zero overhead em produção

---

Boneyard gera telas de skeleton loading pixel-perfect extraídas da sua UI real, sem medições manuais ou placeholders ajustados à mão. Você envolve o conteúdo em um componente `<Skeleton name="...">`, e uma CLI (ou plugin do Vite) abre um navegador headless, visita seu app, encontra cada skeleton nomeado e captura o layout em múltiplos breakpoints em um arquivo `.bones.json` multiplataforma. Em tempo de execução, o skeleton é renderizado enquanto os dados carregam e então faz uma transição suave para o conteúdo real. Funciona com React, Preact, Vue, Svelte 5, Angular e React Native, e se integra ao React Suspense via boundary `BoneSuspense`.

É altamente configurável: animações pulse, shimmer ou solid, cores de bone para modo claro e escuro, transições de stagger e fade-out, breakpoints personalizados, modo watch que recaptura a cada HMR, e um caminho para React Native que percorre a fiber tree para medir views no dispositivo com zero overhead em produção. O Dynamic Type é tratado automaticamente ajustando as posições dos bones ao tamanho de texto do usuário. Instale `boneyard-js` pelo npm; licença MIT.

## FAQ

### O que é Boneyard?

Um framework que gera telas de skeleton loading pixel-perfect capturando o layout dos seus componentes reais, eliminando a necessidade de medir ou ajustar placeholders manualmente.

### Como funciona a captura?

Uma CLI ou plugin do Vite abre um navegador headless, visita seu app, encontra cada `Skeleton` nomeado e captura o layout em múltiplos breakpoints em um arquivo `.bones.json`; no React Native, as views são medidas no dispositivo em modo de desenvolvimento.

### Quais frameworks são suportados?

React, Preact, Vue, Svelte 5, Angular e React Native, todos produzindo o mesmo formato bones multiplataforma.

---
[View on Analog](https://analoghq.ai/pt-br/0xgf/software-tools/boneyard)