万圣节那天发布的骨架屏库:Skullet 一周 700 多颗星,靠的是作者的 1.3 万粉,不是新点子
它是什么 一个前端加载占位库:数据没到时,它用样例数据把组件隐形排一遍,量出每块内容的位置,自动画出同形状的灰色骨架,内容到了不跳版。
为什么火了 作者是 X 上有 1.3 万前端和设计工程师关注的人,万圣节当天发了一段好看的演示视频(16 万浏览、收藏比赞多),再用一句「不需要构建步骤」和先火的 boneyard 划开。
C你可以怎么跟 别再做网页端骨架屏;学它的打法——挑一个半年内被验证过的前端需求,只做好它最被嫌弃的一点,或换到 Flutter、SwiftUI、小程序这类没人做的生态,配一页交互演示,借节日在 X 发录屏。
- 数据(每天更新) · 建库 2026-10-19 · 828 星 · 7 天 +725
GitHub · 星数 数据 2026-11-01 → 2026-11-08(8 天,8 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有
Skullet 是一个「自动骨架屏」前端库:把组件包一层,它自己量出内容长什么样,画出同形状的加载占位。这个点子半年前已经有人做火了(boneyard,7,600 星)。Skullet 拿到 773 颗星,靠的是作者在 X 上的圈子、一段成品级演示视频,还有万圣节这个日子。打法可以学,但这条赛道已经站了三个人,而你多半没有他的那 1.3 万粉。
10 月 31 日的那条推文
2026 年 10 月 31 日,世界协调时下午 1 点 17 分,前端工程师 Lochie Axon 在 X 上发了一条推文:
Introducing Skullet 💀 Loading states without hand-drawn placeholders or layout shift. Skullet measures your components and draws their skeletons for you. Wrap your component with <Skeleton> and you're done. Happy Halloween! 🎃
下面配了一段演示视频。到 11 月 6 日,这条推文 2,286 赞、2,631 收藏、16.2 万浏览。收藏比赞还多——对开发工具来说,这意味着很多人是「存下来以后用」,不只是点个赞走人。
名字也是梗:skull(骷髅)加 mullet(鲻鱼头),骨架屏本来就叫 skeleton。官网的演示文案接着玩:「Wait, how does it know the content length? … Spooky … skeletons usually are 💀」。
Lochie Axon 是 Aave Labs 的前端负责人,做过 ConnectKit,当时 X 上 13,354 个关注者。这不是他第一次这么干:前两个小库 web-haptics(2,800 星)、torph(1,500 星)用的是同一套「一页可交互官网 + X 上发录屏」的打法。Skullet 是第三次。
它到底做了什么
做过加载状态的人都知道,骨架屏一般要手写:这里放一根灰条、那里放一个灰块,内容一改骨架就对不上,内容加载出来时页面还会跳一下。
Skullet 的用法是这样:
``jsx <Skeleton data={user} sample={SAMPLE_USER}> {(user) => <Card user={user} />} </Skeleton> ``
数据还没到的时候,它拿你给的样例数据(sample)把组件隐形地排一遍,量出每个元素的位置和大小,文字每行画一根条、图片画一块,骨架正好占着内容的位置。数据一到直接换上,不跳版。
支持 React、Vue、Svelte 和原生 JS。11 月 2 日的第二条推文专讲细节:不需要额外构建步骤、服务端渲染的内容直接显示不闪、数据回来得快就跳过骨架、图片渐显——1,461 赞、6.7 万浏览。官网 skullet.lochie.me 把效果放进博客卡片、仪表盘、通知、聊天、钱包资产列表几种真实界面里,随手切换。
npm 包 10 月 26 日首发,现在才 0.0.3。
星是怎么涨上来的
| 日期 | 发生了什么 | star |
|---|---|---|
| 10-19 | 建仓 | — |
| 10-31 | 发布推文 + 视频,16.2 万浏览 | — |
| 11-01 | 致谢推文(感谢帮忙做设计的 Alex van der Zon),4,879 浏览 | 103 |
| 11-02 | 第二条推文讲功能,6.7 万浏览 | 229(+126) |
| 11-03 | 362(+133) | |
| 11-04 | 开发者带货号 RammCodes 在 Instagram / Facebook 搬运 | 491(+129) |
| 11-05 | 551(+60) | |
| 11-06 | 683(+132),页面实时 773 |
数据:GitHub 逐日 star 数(11-01 至 11-06);推文数字为 11-06 所取。
几点值得注意:
- 没有尖峰。 没上 Hacker News,Reddit 上也搜不到帖子,没有媒体报道。两条推文之后每天稳稳涨一百多,全是 X 上前端和「design engineer」小圈子在传。
- 还进不了 trending。 仓库建了不到 60 天,GitHub 趋势榜还不收,12 月中之后可能还有一波。
- npm 下载偏高。 11-03 起每天 3 万多次,近 7 天合计 11 万,对一个 773 星、0.0.3 的库来说太多了。作者另外两个库也这样(torph 周下载 34.6 万,web-haptics 52.6 万)。可能是被某个大应用或依赖链引用,也可能是镜像和 CI 刷出来的,未核实。
- 已经有 11 个 issue、6 个 PR,说明有人在真项目里试了,但还早。
谁在跟它抢
| 项目 | 上线 | 体量 | 和 Skullet 的区别 |
|---|---|---|---|
| boneyard | 2026-04-01 | 7,609 星;npm 周下载 25.6 万;HN 31 分 | 开发时跑命令行把骨架抓成文件,每次改界面要重抓;Skullet 运行时现量 |
| phantom-ui | 2026-03-30 | 816 星;Show HN 6 分 | 路线几乎一样,做成 Web Component,任何框架都能用;作者没粉丝,演示一般 |
| skelter / react-zero-skeleton | 2026-04-20 | 65 星 | 走 React 内部组件树,支持 React Native |
| auto-skeleton 等几个 | 2024–2026 | 0–27 星 | 思路一样,没人看见 |
| react-loading-skeleton | 2017 | 4.2k 星;npm 周下载 158 万 | 传统手写骨架 |
| react-content-loader | 2017 | 14k 星;npm 周下载 105 万 | 手画 SVG 骨架 |
数据:GitHub、npm 下载统计(10-30 至 11-05)、Hacker News,11-06。
「自动量出骨架」这件事,2026 年 3–4 月已经被 boneyard 做出来了,后面跟了一串。Skullet 是后来者,星数还不到 boneyard 的十分之一。
最能说明问题的一组对比是 phantom-ui:技术路线和 Skullet 几乎一样,早出来 7 个月,攒了 816 星;Skullet 用 6 天追平。差的不是代码,是作者有没有人看、演示好不好看。
它为什么跑出来
- 作者自带分发。 1.3 万关注者,还都是前端和设计工程师——正好是会用这个库的人。前两个库已经替他攒好了信任。
- 演示比库本身更会卖。 一整页真实界面里的交互演示,加一段录屏,看一眼就懂。
- 需求不用教育。 boneyard 已经证明「不想手写骨架」是真需求,Skullet 只要一句「不需要构建步骤,包一层就完事」就跟领先者划开了。
- 日子和名字。 万圣节当天发,骷髅梗贯穿名字、表情、文案,零成本拿到传播性。
- 细节打磨。 不闪、不跳、图片渐显,这些正是设计工程师圈子挑剔的地方。
技术上的差异化其实很小。「无构建步骤」是个好用的对比点,但不是它涨星的主要原因。
如果是你
判断: 学打法,别再做骨架屏。「已验证的需求 + 一句话讲清差异 + 好看的演示 + 节日借势」这套可以照搬到别的前端小工具上;但自动骨架屏这块已经有 boneyard、phantom-ui、Skullet 三家,第四个做进去,没有粉丝大概率就是 phantom-ui 的命运。
适合谁: 在 X、即刻、掘金、V2EX 上已经有几千个前端或设计向关注者的人;做事讲究细节、能做出一页好看交互演示的设计工程师;熟悉某个还没被照顾到的生态(比如 React Native、Flutter、SwiftUI、小程序)的开发者。
不适合谁: 零粉丝、指望代码写得好自然涨星的;不愿意花一半时间做官网演示和录屏的;想做大而全组件库的。
怎么做: 找一个最近半年被某个项目证明过的前端需求(看它的星数和 npm 下载),找到它最被嫌弃的一点(这次是「要构建步骤」),只把这一点做好,一句话写进第一行。换生态是最现实的路:boneyard 和 Skullet 都是网页端,Flutter、SwiftUI、小程序上的「自动骨架屏」还没看到有人做火。官网直接做成可交互演示,放进几种真实界面里。
怎么获客: 在 X 上发 20–40 秒的录屏,第一句就是效果;争取收藏,而不是只要点赞。挑一个节日或热点定发布日、起名。隔一两天再发一条讲细节的推文。没有粉丝的话,先找圈子里有粉的人帮忙打磨设计、写进致谢,换一次转发;同时发 Show HN 和 Reddit 的 r/reactjs、r/webdev——这两处 Skullet 没去,是空着的。
什么时候之前: 想在骨架屏这块换生态做,趁 boneyard 和 Skullet 的热度还在,12 月中 Skullet 进 trending 之前发最好。打法本身不过期,下一个节日(感恩节、圣诞)都能用。
什么情况说明看错了: ① phantom-ui 或某个零粉丝作者的同类库,一个月内自然涨过 1,000 星——说明作者资源没那么重要,这块还有空位;② Skullet 在 11 月下旬停涨,每天只剩个位数——说明这波只是圈内一阵风,需求没想象的大;③ 12 月进 trending 后 Skullet 再涨几千星——说明骨架屏这个品类还能装下更多人,换生态做的胜算更高。
数据与出处:github.com/lochie/skullet 及其 README、逐日 star 数(11-01 至 11-06);skullet.lochie.me 官网(11-06);X 推文 x.com/lochieaxon/status/2116519949799960590(10-31)与 2117203756203061713(11-02);RammCodes 的 Instagram Reel(11-04);npm 下载统计(10-30 至 11-05);boneyard、phantom-ui、skelter、react-loading-skeleton、react-content-loader 的 GitHub 页;Hacker News 发帖记录。
研究底稿:竞品表、获客证据、完整研究报告
- 竞品
名字 在哪 上线 规模 它和这家不同在哪 boneyard(0xGF/boneyard) 开源 2026-04-01 7,609 star;npm boneyard-js 周下载 25.6 万;HN 31 分 boneyard 开发时跑 CLI 抓 .bones.json,要构建步骤;Skullet 运行时用 sample 数据现量,零构建步骤 phantom-ui 开源 2026-03-30 816 star;Show HN 6 分 同样运行时量 DOM,做成 Web Component;作者没有影响力、演示一般,用了 7 个月才拿到 Skullet 6 天的 star skelter / react-zero-skeleton 开源 2026-04-20 65 star;npm 周下载 243 走 React Fiber 树,支持 React Native;几乎没人看见 auto-skeleton / react-auto-skeleton / pulsable 开源 2024-2026 0-27 star 思路一样,没有分发 react-loading-skeleton 开源 2017 4.2k star;npm 周下载 158 万 传统手写骨架,只是尺寸自适应 react-content-loader 开源 2017 14k star;npm 周下载 105 万 手画 SVG 骨架 MUI / shadcn / Kendo Skeleton 大厂功能 早已有 海量 组件库自带,要手动摆放骨架 - 用户从哪来
- 查实 作者本人 X 发布推文 + 演示视频(万圣节当天):x.com/lochieaxon/status/2116519949799960590:2,286 赞 / 95 转 / 2,631 收藏 / 16.2 万浏览
- 查实 X 第二波功能推文(对比 boneyard 的构建步骤):x.com/lochieaxon/status/2117203756203061713:1,461 赞 / 6.7 万浏览
- 查实 作者既有粉丝与系列作品互相导流:前作 web-haptics 2,835 star、torph 1,531 star;README 列出 torph / easing.dev / web haptics
- 推断 design engineer 圈子协助与转发:README 致谢 Alex van der Zon(网站设计)、Pugson;具体谁转发了未逐条核实
- 查实 开发者带货号搬运(Instagram / Facebook):RammCodes Reel 2026-11-04「WOW Homie… It's called Skullet」
- 推断 HN / Reddit:我们 HN 库与 Jina 搜索都没搜到
Skullet(lochie/skullet)研究报告
渠道:GitHub | 研究日期:2026-11-06 | 数据卡:建库 2026-10-19,卡上 683 star(11-06),GitHub 页面实时 773 star / 15 fork
一句话结论
Skullet 是一个「自动骨架屏」前端库:把组件包进 <Skeleton data sample>,它先用样例数据隐形渲染一遍,量出每个元素再画出同形状的骨架,内容到了不跳版。它不是新点子,半年前 boneyard(7.6k star)、phantom-ui(816 star)已经把「从真实 DOM 量出骨架」做火了。Skullet 能起来,靠的是作者 Lochie Axon 在 X 上的「design engineer」圈子(1.3 万粉,前两个库 web-haptics 2.8k star、torph 1.5k star)、万圣节当天发布的成品级演示视频,再加上对 boneyard 的一句定位:「不需要额外构建步骤」。这是分发打法加作者资源,产品只是同类里打磨得更好的一个。
1. 它是什么
- README:「Smart skeleton states for React, Vue, Svelte, and vanilla JavaScript」;用法
<Skeleton data={user} sample={SAMPLE_USER}>{(user) => <Card user={user}/>}</Skeleton>。原理是加载时用 sample 数据把内容隐形排出来,文字每行一根条、图片一块,骨架正好占内容的位置。(出处:github.com/lochie/skullet ,github.com/lochie/skullet/blob/main/packages/skullet/README.…) - 官网 skullet.lochie.me 是一整页可交互演示(博客卡、仪表盘、通知、聊天、钱包资产列表),演示文案自带梗:「Wait, how does it know the content length? … Spooky … skeletons usually are 💀」。
- npm 包 skullet:2026-10-26 首发,目前 0.0.3,还没有 GitHub release。
2. 竞品(做同一件事的)
| 产品 | 形态 | 上线 | 规模 | 和 Skullet 的区别 |
|---|---|---|---|---|
| boneyard(0xGF/boneyard) | 开源 | 2026-04-01 | 7,609 star;npm boneyard-js 近 7 天 25.6 万次下载;HN 31 分(2026-04-03);作者称首月 10 万下载 | 开发时跑 CLI,把骨架抓成 .bones.json,有构建步骤,SSR 时骨架随响应下发;Skullet 运行时量,宣传点就是「no additional build step」 |
| phantom-ui(Aejkatappaja) | 开源 Web Component | 2026-03-30 | 816 star;Show HN 6 分 | 同样运行时量真实 DOM,8kb,任何框架都能用;作者没有影响力,演示也不够好看 |
| skelter / react-zero-skeleton(J-Ben) | 开源 | 2026-04-20 | 65 star;npm 周下载 243 | 走 React Fiber 树,支持 React Native |
| auto-skeleton(ShanukJ)、react-auto-skeleton、pulsable(2024) | 开源 | 2024–2026 | 0–27 star | 思路一样,都没人看见 |
| react-loading-skeleton | 开源 | 2017 | 4.2k star;npm 周下载 158 万 | 传统做法,手写骨架,只是会自适应尺寸 |
| react-content-loader | 开源 | 2017 | 14k star;npm 周下载 105 万 | 手画 SVG 骨架 |
| MUI / shadcn / Kendo 的 Skeleton 组件 | 大厂、组件库自带 | 早已有 | 海量 | 都要手动摆骨架 |
判断:「自动量出骨架」这个品类 2026 年 3–4 月已经被 boneyard 做出来了,Skullet 是后来者。star 数(773)还不到 boneyard 的十分之一。
数据来源:GitHub API(2026-11-06)、npm downloads API(2026-10-30 至 11-05)、我们 hackernews 库 story 表。
3. 增长:用户从哪儿来
时间线
- 10-19 建库,10-26 npm 首发预览版。
- 10-31(万圣节)13:17 UTC 发布推文「Introducing Skullet 💀 … Wrap your component with <Skeleton> and you're done. Happy Halloween! 🎃」,附视频:2,286 赞 / 95 转 / 2,631 收藏 / 16.2 万浏览。作者当时 13,354 粉。(出处:x.com/lochieaxon/status/2116519949799960590,数字取自 fxtwitter 接口,11-06)
- 11-01 致谢推文(感谢 @alexvanderzon 帮忙打磨设计):71 赞 / 4,879 浏览。
- 11-02 第二波推文,讲功能(无构建步骤、SSR 不闪、数据快就直接出内容、图片渐显):1,461 赞 / 1,413 收藏 / 6.7 万浏览。(x.com/lochieaxon/status/2117203756203061713)
- 11-04 起有搬运:开发者带货号 RammCodes(@rammcodes_)发 Instagram Reel / Facebook 视频「WOW Homie… It's called Skullet」,用的是推文截图。这个号 4 月也搬过 boneyard,是专搬 X 热门开发工具的号。(instagram.com/reel/DfVQEKZI7Ws/)
- 还被收进 context7.com、creatorstoolbox.com 这类聚合站。
star 曲线(我们 github 库 repo_day,加 11-06 页面实时值)
11-01 103 → 11-02 229(+126)→ 11-03 362(+133)→ 11-04 491(+129)→ 11-05 551(+60)→ 11-06 683(+132),页面实时 773。两条推文之后每天稳定涨一百多,没有出现上 HN 或 trending 那种尖峰。trending 天数为 0,因为建库不满 60 天还进不了榜。
npm 下载(npm API)
10-31 2,124 → 11-01 3,717 → 11-02 9,525 → 11-03 27,517 → 11-04 33,295 → 11-05 33,760,近 7 天合计 11.0 万。对一个 0.0.3、773 star 的库来说这个数偏高。同作者的 torph 周下载 34.6 万、web-haptics 52.6 万,也远高于 star 体量,可能是被某个大应用(作者在 Family / Aave Labs)或依赖链引用了,也可能是镜像和 CI 刷出来的。未核实。
渠道归纳
| 渠道 | 证据 | 是否确认 |
|---|---|---|
| 作者本人 X 发布推文 + 演示视频 | 2.3k 赞 / 16 万浏览 / 2.6k 收藏 | 确认 |
| 第二波功能推文(和 boneyard 的「构建步骤」划开) | 1.5k 赞 / 6.7 万浏览 | 确认 |
| 节日借势(万圣节,骷髅梗,名字 skullet = skull + mullet) | 推文「Happy Halloween」、官网文案 | 确认 |
| design engineer 圈子(合作设计 Alex van der Zon、Pugson 致谢) | README Acknowledgements | 确认(具体谁转了未逐条核实) |
| 开发者带货号搬运(Instagram / Facebook) | RammCodes Reel,11-04 | 确认 |
| HN / Reddit | 我们 HN 库与 Jina 搜索都没搜到 Skullet 的帖子 | 没有 |
| 作者既有粉丝(前作 web-haptics 2.8k、torph 1.5k,同一套「官网演示 + X 视频」打法) | GitHub API | 确认 |
4. 为什么跑出来
- 作者自带分发:Lochie Axon 是 Aave Labs 的 Principal Frontend Engineer,做过 ConnectKit,X 上 1.3 万粉。这是「design engineer 做小而美 UI 库」的圈子,前两个库已经各拿了 1.5k–2.8k star,Skullet 是同一套打法第三次。
- 演示比库本身更会卖:官网把骨架效果放进 6 种真实界面里,随时切换。推文的收藏数(2,631)比赞(2,286)还多,说明大家是「存下来以后用」,对开发工具来说这是很强的信号。
- 时机和梗:万圣节当天发,💀、名字、文案都在玩骷髅梗,推文的天然传播性高。
- 踩在一个已被验证的需求上:boneyard 半年前已经证明「不想手写骨架」是真需求(7.6k star、首月 10 万下载)。Skullet 不用教育市场,只用一句话讲清自己和它的区别:不用构建步骤、包一层就完事。
- 工程打磨:同时支持 React、Vue、Svelte 和原生 JS;SSR 不闪、数据快就直接出内容、图片渐显、骨架同步闪动,这些细节正是 design engineer 圈子在意的。
5. 差异化
- 对 boneyard:boneyard 在开发时用 CLI 抓骨架、生成
.bones.json,每次改 UI 都要重新抓;Skullet 运行时用 sample 数据现量,零构建步骤。代价是要写一份 sample 数据,运行时还多一次隐形渲染。 - 对 phantom-ui:技术路线几乎一样(运行时量 DOM),区别在 API 形态(render-prop 加 sample,还是 Web Component)和打磨程度。phantom-ui 出来更早,star 和 Skullet 差不多,但它花了 7 个月,Skullet 只用了 6 天。
- 结论:技术上的差异化很小。真正拉开差距的是作者影响力、演示质量和发布时机。「无构建步骤」是一个好用的对比点,但不是它跑出来的主要原因。
6. 被多少人看见了
- 小圈子里在传:在 X 前端 / design engineer 圈子里两条推文合计约 23 万浏览,也有开发者带货号搬运;但没有上 HN 和 Reddit 的热帖,也没有媒体报道。
- 开源项目,不涉及收入。
- 跟风者:11-06 前还没看到明确抄 Skullet 的项目。反倒是 Skullet 自己就站在 boneyard 引出的那波跟风里(phantom-ui、skelter、auto-skeleton 都是 2026 年 2–5 月出来的)。
7. 可借鉴
- 「先有人验证了需求,再用更好的 DX 和演示重做一遍」:不用发明品类,只要一句话讲清和领先者的区别(这次是「无构建步骤」)。
- 开发工具的官网就该是一整页可交互的真实界面演示,推文配录屏,争取的是收藏,不只是赞。
- 借节日梗定发布日、起名(skull + mullet),零成本拿到传播性。
- 同一个作者持续出系列小库(torph、easing.dev、web-haptics、skullet),每个 README 里互相导流,粉丝越攒越多。
8. 还不确定的
- npm 每天 3 万多次下载的来源(大应用引用、依赖链,还是镜像和 CI 刷量),未核实。
- 推文具体被哪些大号转发、引用,没有逐条拉转推列表。
- 用户留存:open issues 11、PR 6,说明已经有人在真实项目里试用,但还早。
- star 后劲:建库满 60 天(约 12 月中)才进得了 trending,到时可能还有第二波。