Boneyard

実UIからスケルトンローディング画面を自動生成するフレームワーク。React、Svelte 5、React Nativeに対応する。

仕組み

npx boneyard-js build を実行すると、CLIがヘッドレスブラウザを起動し、<Skeleton> コンポーネントを検出してレイアウトをスナップショットする。複数ブレークポイントに対応し、レスポンシブなスケルトンを生成できる。React Nativeではdev mode時にReact fiber treeと UIManager の計測値を使って自動スキャンする。本番環境へのオーバーヘッドはゼロ。

生成結果は .bones.json としてクロスプラットフォーム互換のフォーマットで出力される。registerBones() による自動レジストリで、手動インポートなしに利用可能。

スケルトン表示

<Skeleton> コンポーネントに loading、name、color/darkColor、animate（pulse / shimmer / solid）などのpropsを渡して制御する。boneyard.config.json でブレークポイントや出力先、アニメーションスタイルをプロジェクト全体で設定できる。

GitHub stars 3.5k超。MITライセンス。

スケルトンUIを手作業で組む手間を省きたいときに。React / Svelte / React Nativeのプロジェクトで、ローディング体験を素早く整えたいフロントエンド開発者向け。実UIからピクセル単位で自動抽出する仕組みにより、デザインとのズレが起きにくい点が他のスケルトンライブラリとの違い。