ui-gallery-pipeline

WorkBuddy Skill —— UI 组件库画廊归档与部署管线。

把任意 HTML/CSS 组件集合（Uiverse、React Bits 或自定义集合）归档为自包含的画廊站点： 抓取生成 manifest/raw → 构建自包含预览页与画廊前端 → 无头浏览器全量渲染验证 → 打包并部署为本机常驻服务 / Tailscale / 局域网。

参考实现 EmberUi：ReactBits 动效库 171 项 + Uiverse 元素库 4420 项，线上示例由该管线构建与部署。

安装（WorkBuddy Skill）

npx ui-gallery-pipeline

会把 skill 装到 ~/.workbuddy/skills/ui-gallery-pipeline（覆盖安装加 --force），重启 WorkBuddy 会话即可生效。触发语：「归档组件库」「排查画廊预览空白」「画廊打包部署」。

Skill 内容

| 文件 | 说明 | |---|---| | SKILL.md | 四条工作流：归档新库 / 排查空白 / 全量验证 / 打包部署 | | references/pipeline.md | 目录约定、preview 模板规则、分批渲染约定、新库接入清单 | | references/pitfalls.md | 实测踩坑手册：高度塌陷、退化源、CDN 本地化、缓存强刷、反代 403 等 | | scripts/verify-previews.mjs | 通用全量渲染验证脚本（playwright，退出码可判 CI） |

手动使用（不装 WorkBuddy 也可参考）

references/pitfalls.md 与 scripts/verify-previews.mjs 可独立使用：前者是组件画廊工程的失败模式清单，后者传入预览页根地址即可逐页检测空白预览。

License

MIT