骨架屏html结构必须与服务端输出完全同构，即节点层级、类名、顺序、数量严格一致，否则hydration失败导致内容跳动或空白；须用固定高度或aspect-ratio替代height:100%，禁用伪元素，内联关键css，并通过v-if或条件渲染彻底卸载骨架dom而非隐藏。
骨架屏 HTML 结构必须和服务端输出一致
服务端返回的 HTML 里，骨架结构得和客户端最终渲染的真实 DOM 完全同构——节点层级、类名、顺序、数量一个都不能少。否则 hydration 会失败，React/Vue 的 SSR 渲染直接错位，用户看到内容跳动或空白块。
常见错误现象：hydration mismatch 错误、骨架消失后真实内容位置偏移、div 嵌套多一层导致 flex 或 grid 布局失效。
- 用和真实组件完全相同的 class 名，比如真实卡片是
<article class="card"></article>，骨架就得是<article class="card skeleton"></article>，而不是另起一套skeleton-card - 禁用
height: 100%—— 父容器没高度时它坍缩为 0，骨架“消失”，改用固定值或aspect-ratio - 图片占位统一用
<div class="skeleton-img"></div>，不用<img src="data:">，后者仍触发解码逻辑，拖慢主线程 - SSR 模板中骨架结构必须在首段 flush 输出，不能等整个模板渲染完才
res.end()；Node.js Express 场景下用res.write()分段发<div id="root"></div>和骨架
CSS 动画只用 background-position 和 transform
骨架屏动画不是为了炫技，而是模拟“内容正在流入”的视觉暗示。任何触发重排（reflow）或高开销重绘（repaint）的属性都会卡顿，尤其在低端设备上。
常见错误现象：动画掉帧、骨架闪一下就消失、LCP 指标恶化、iOS Safari 上 left/top 动画卡死。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 动画只允许用
background-position（配合linear-gradient）或transform（如scale、translateX），禁用width、height、left、top、opacity -
will-change: transform提前声明合成层，避免动画开始时临时提升图层带来的抖动 - 动画周期控制在 1.2–1.8s，太快用户感知不到加载过程，太慢显得卡顿；
animation-timing-function: linear保证匀速流动感 - 所有骨架元素必须设
overflow: hidden，否则渐变背景溢出破坏圆角或边距
骨架与真实内容切换必须 DOM 级卸载
不能靠 v-show、visibility: hidden 或 opacity: 0 隐藏骨架——它仍参与布局计算、占用无障碍树、影响 SSR hydration 一致性。真实内容挂载前，骨架 DOM 必须被移除或替换。
常见错误现象：屏幕阅读器读出两遍标题、焦点管理错乱、Vue/React 控制台警告 Hydration failed because the initial UI does not match what was rendered on the server。
- Vue 中用
v-if="!loading"，不是v-show；React 中用{loading ? <skeleton></skeleton> : <content></content>}，而非条件 class 切换 - 服务端生成骨架时，必须内联关键 CSS（比如
.skeleton的background和animation），否则 FOUC（Flash of Unstyled Content）明显 - 加载失败时，骨架不能无限停留，需设超时 fallback，比如
setTimeout(() => setLoading(false), 8000)后显示错误态 - 骨架元素禁止含伪元素（
::before/::after）或content，否则干扰屏幕阅读器解析
文字行高与图片宽高比必须硬编码
骨架屏里“看起来像”不重要，“尺寸稳”才关键。文字区域跳动、图片占位撑开布局，本质都是没控住基础几何属性。
常见错误现象：骨架消失瞬间文字上跳、卡片高度忽大忽小、CLIP 指标超标、暗色模式下灰度色块对比度不足。
- 文字区块用
line-height × 行数算出固定高度，例如三行正文：3 × 1.5em = 4.5em；禁用min-height或height: fit-content - 图片占位优先用
aspect-ratio: 16 / 9（现代浏览器），降级方案用padding-top: 56.25%+position: relative+ 子元素position: absolute - 头像统一用
border-radius: 50%+background-color，不用background-image，后者干扰 LCP 计算且增加解析负担 - 深色模式适配不是靠 JS 切换 class，而是在 CSS 中用
@media (prefers-color-scheme: dark)调整background-color值，确保服务端能预判
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
