Boneyard-js = 全自动骨架屏生成工具 不用手写 CSS、不用算尺寸、不用适配响应式，直接从你真实组件生成骨架，UI 变了骨架自动跟着变。
二、安装（一行搞定）
npm install boneyard-js
# 或
yarn add boneyard-js
pnpm add boneyard-js
三、3步直接用（复制粘贴即可）
1. 包裹组件（最基础用法）
// app/blog/page.tsx
'use client' // Next.js App Router 必须加
import { Skeleton } from 'boneyard-js/react'
function BlogPage() {
const { data, isLoading } = useFetch('/api/post')
return (
// 👇 给 name，控制 loading 状态
<Skeleton name="blog-card" loading={isLoading}>
{data && <BlogCard data={data} />}
</Skeleton>
)
}
重点：
- name 必须填：CLI 靠它识别并生成骨架
- loading：控制骨架屏显示/隐藏
2. 带接口请求的组件（必看 fixture）
如果组件需要后端数据才能渲染，用 fixture 给假数据，生成骨架时用 mock 内容，不影响生产环境。
<Skeleton
name="blog-card"
loading={isLoading}
// 👇 生成骨架用的 mock 内容，只在构建时生效
fixture={
<BlogCard
data={{
title: "Sample Post",
excerpt: "Placeholder text for layout...",
author: "Jane Doe"
}}
/>
}
>
{data && <BlogCard data={data} />}
</Skeleton>
3. 生成骨架文件（最后一步）
先启动你的开发服务器，再执行：
npx boneyard-js build
自动扫描所有带 name 的 Skeleton，生成 .bones.json 骨架配置，运行即生效。
