[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74780":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},74780,"boneyard","0xGF\u002Fboneyard","0xGF","Auto generated skeleton loading framework","https:\u002F\u002Fboneyard.vercel.app\u002F",null,"TypeScript",5856,231,7,0,23,59,301,69,113.1,"MIT License",false,"main",true,[],"2026-06-12 04:01:15","\u003Cp align=\"center\">\n  \u003Cimg src=\"boneyard-logo.gif\" alt=\"Boneyard\" width=\"1000\" \u002F>\n\u003C\u002Fp>\n\n# boneyard\n\nPixel-perfect skeleton loading screens, extracted from your real UI. No manual measurement, no hand-tuned placeholders.\n\nWorks with **React**, **Preact**, **Vue**, **Svelte 5**, **Angular**, and **React Native**.\n\n## Quick start\n\n```bash\nnpm install boneyard-js\n```\n\n### React\n\n```tsx\nimport { Skeleton } from 'boneyard-js\u002Freact'\n\nfunction BlogPage() {\n  const { data, isLoading } = useFetch('\u002Fapi\u002Fpost')\n  return (\n    \u003CSkeleton name=\"blog-card\" loading={isLoading}>\n      {data && \u003CBlogCard data={data} \u002F>}\n    \u003C\u002FSkeleton>\n  )\n}\n```\n\n### Vue\n\n```vue\n\u003Cscript setup>\nimport Skeleton from 'boneyard-js\u002Fvue'\nimport '.\u002Fbones\u002Fregistry'\nconst loading = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSkeleton name=\"card\" :loading=\"loading\">\n    \u003CCard \u002F>\n  \u003C\u002FSkeleton>\n\u003C\u002Ftemplate>\n```\n\n### Svelte 5\n\n```svelte\n\u003Cscript>\n  import Skeleton from 'boneyard-js\u002Fsvelte'\n  import '$lib\u002Fbones\u002Fregistry'\n  let loading = true\n\u003C\u002Fscript>\n\n\u003CSkeleton name=\"card\" {loading}>\n  \u003CCard \u002F>\n\u003C\u002FSkeleton>\n```\n\n### Preact\n\n```tsx\nimport { Skeleton } from 'boneyard-js\u002Fpreact'\n\nfunction BlogPage() {\n  const { data, isLoading } = useFetch('\u002Fapi\u002Fpost')\n  return (\n    \u003CSkeleton name=\"blog-card\" loading={isLoading}>\n      {data && \u003CBlogCard data={data} \u002F>}\n    \u003C\u002FSkeleton>\n  )\n}\n```\n\n### Angular\n\n```typescript\nimport { SkeletonComponent } from 'boneyard-js\u002Fangular'\n\n@Component({\n  imports: [SkeletonComponent],\n  template: `\n    \u003Cboneyard-skeleton name=\"card\" [loading]=\"isLoading\">\n      \u003Capp-card \u002F>\n    \u003C\u002Fboneyard-skeleton>\n  `\n})\n```\n\n### React Native\n\n```tsx\nimport { Skeleton } from 'boneyard-js\u002Fnative'\n\n\u003CSkeleton name=\"profile-card\" loading={isLoading}>\n  \u003CProfileCard \u002F>\n\u003C\u002FSkeleton>\n```\n\n```bash\nnpx boneyard-js build --native --out .\u002Fbones\n# Open your app on device — bones capture automatically\n```\n\n> **Dynamic Type:** Generate bones at default font scale. Boneyard automatically scales bone positions at runtime to match the user's text size setting.\n\n## Generate bones\n\n```bash\n# CLI — works with any framework\nnpx boneyard-js build\n\n# Watch mode — re-captures on HMR changes\nnpx boneyard-js build --watch\n\n# React Native — scans from device\nnpx boneyard-js build --native\n```\n\nThen import the registry once in your app entry:\n\n```ts\nimport '.\u002Fbones\u002Fregistry'\n```\n\n### Vite plugin\n\nFor Vite-based projects (React, Preact, Vue, Svelte), use the plugin instead of the CLI — no second terminal needed:\n\n```ts\n\u002F\u002F vite.config.ts\nimport { boneyardPlugin } from 'boneyard-js\u002Fvite'\n\nexport default defineConfig({\n  plugins: [boneyardPlugin()]\n})\n```\n\nBones are captured automatically when the dev server starts and re-captured on every HMR update.\n\n## How it works\n\n**Web:** The CLI (or Vite plugin) opens a headless browser, visits your app, finds every `\u003CSkeleton name=\"...\">`, and snapshots their layout at multiple breakpoints.\n\n**React Native:** The `\u003CSkeleton>` component auto-scans in dev mode when the CLI is running. It walks the fiber tree, measures views via `UIManager`, and sends bone data to the CLI. Zero overhead in production.\n\nAll frameworks output the same `.bones.json` format — cross-platform compatible.\n\n## CLI flags\n\n| Flag | Default | Description |\n|------|---------|-------------|\n| `[url]` | auto-detected | URL to visit |\n| `--breakpoints` | 375,768,1280 | Viewport widths, comma-separated |\n| `--wait` | 800 | ms to wait after page load |\n| `--out` | .\u002Fsrc\u002Fbones | Output directory |\n| `--force` | — | Skip incremental cache |\n| `--watch` | — | Re-capture on HMR changes |\n| `--native` | — | React Native device scanning |\n| `--no-scan` | — | Skip filesystem route scanning |\n| `--cdp` | — | Connect to existing Chrome via debug port |\n| `--env-file` | — | Load env vars from file |\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `loading` | boolean | — | Show skeleton or real content |\n| `name` | string | — | Unique name (generates `name.bones.json`) |\n| `color` | string | `rgba(0,0,0,0.08)` | Bone fill color |\n| `darkColor` | string | `rgba(255,255,255,0.06)` | Bone color in dark mode |\n| `animate` | `'pulse'` \\| `'shimmer'` \\| `'solid'` | `'pulse'` | Animation style |\n| `stagger` | `number` \\| `boolean` | `false` | Stagger delay between bones in ms (`true` = 80ms) |\n| `transition` | `number` \\| `boolean` | `false` | Fade out duration when loading ends (`true` = 300ms) |\n| `boneClass` | string | — | CSS class applied to each bone element |\n| `fixture` | ReactNode \u002F Snippet \u002F Slot | — | Mock content for CLI capture (dev only) |\n| `initialBones` | ResponsiveBones | — | Pass bones directly (overrides registry) |\n| `fallback` | ReactNode \u002F Snippet \u002F Slot | — | Shown when loading but no bones available |\n\n## Config file\n\n```json\n{\n  \"breakpoints\": [375, 768, 1280],\n  \"out\": \".\u002Fsrc\u002Fbones\",\n  \"wait\": 800,\n  \"color\": \"#e5e5e5\",\n  \"animate\": \"pulse\"\n}\n```\n\nSave as `boneyard.config.json`. Per-component props override config values.\n\n## Package exports\n\n| Import | Use |\n|--------|-----|\n| `boneyard-js` | `snapshotBones`, `renderBones`, `computeLayout` |\n| `boneyard-js\u002Freact` | React `\u003CSkeleton>` |\n| `boneyard-js\u002Fpreact` | Preact `\u003CSkeleton>` (no compat needed) |\n| `boneyard-js\u002Fvue` | Vue `\u003CSkeleton>` |\n| `boneyard-js\u002Fsvelte` | Svelte `\u003CSkeleton>` |\n| `boneyard-js\u002Fangular` | Angular `\u003Cboneyard-skeleton>` |\n| `boneyard-js\u002Fnative` | React Native `\u003CSkeleton>` |\n| `boneyard-js\u002Fvite` | Vite plugin `boneyardPlugin()` |\n\n## Links\n\n- [Docs](https:\u002F\u002Fboneyard.vercel.app\u002Foverview)\n- [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fboneyard-js)\n- [Twitter](https:\u002F\u002Fx.com\u002F0xGoodfuture\u002Fstatus\u002F2039818750568878245)\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=0xGF\u002Fboneyard&type=Date)](https:\u002F\u002Fstar-history.com\u002F#0xGF\u002Fboneyard&Date)\n\n## License\n\nMIT\n","Boneyard 是一个自动生成骨架屏加载框架，旨在从真实用户界面中提取像素级精确的加载效果。它支持React、Preact、Vue、Svelte 5、Angular和React Native等多种前端框架，通过简单配置即可实现无手动测量、无需手工调整占位符的加载动画。项目采用TypeScript编写，确保了代码质量和类型安全。适用于需要优化用户体验，尤其是在数据加载过程中希望展示与实际UI布局一致的加载提示的应用场景。使用时，只需安装`boneyard-js`包，并根据所选框架引入相应的Skeleton组件，配合提供的CLI工具或Vite插件自动捕捉并生成所需的骨架样式。",2,"2026-06-11 03:50:48","high_star"]