// 01 > CONTEXT
Ghostframes 是一个 React 骨架占位库，以单一公开软件包 @ghostframes/runtime 的形式发布。它在构建时从真实组件捕获骨架清单，并在 CI 中强制保证其质量。
// 02 > THE_PROBLEM
骨架占位是手写的，会从它们所模仿的组件漂移开去，因此随着时间推移会衰退成错误的形状。
手动维护骨架既乏味又易出错，而且当骨架不再匹配其组件时没有任何机制能捕获，于是加载状态会悄无声息地劣化。
之前
手写骨架 · 从组件漂移 · 没有质量关卡
// 03 > APPROACH
我在构建时从真实组件生成骨架，并加入 CI 关卡，强制执行 schema、键覆盖率、无效条目预算和产物大小。
构建时捕获
AutoSkeleton 和 generateStaticBlueprint 从真实的组件树产出占位产物。
CI 质量关卡
ghostframes validate、diff 和 report 在每次变更时强制执行 schema、覆盖率和大小。
TypeScriptReact
// 04 > THE_RESULT
骨架从真实组件生成，并由 CI 关卡保持一致，因此加载状态始终准确，无需手工维护。
之前
- 手写的骨架
- 从真实组件漂移
- 没有自动化检查
之后
- 构建时生成
- CI 中的 schema + 覆盖率关卡
- 零运行时配置
“骨架应当来自组件，而不是你手工维护的第二份副本。生成它，然后让 CI 保持它诚实。”