Claude Code core-web-vitals 技能：定位商品卡片加载导致的 CLS
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/development/core-web-vitals` 目录。
- 将目录放入目标项目的 `.claude/skills/`，确认 `.claude/skills/core-web-vitals/SKILL.md` 存在，再从项目根目录启动 Claude Code 并输入 `/core-web-vitals`。
中文摘要
根据布局偏移轨迹找出在加载时改变尺寸的图片、字体或插入区块。适合用可重复的浏览器录制比较修改前后的偏移。
SKILL.md 中文导读
可复现示例
用虚构商品列表复现慢速加载时标题向下跳动。商品缩略图晚到且卡片没有预留图像区域，请设计前后对照和验收方式。工作步骤
- 在相同设备与网络条件录制页面加载，定位偏移发生的时间和元素。
- 为迟到的内容预留布局空间，按同样的步骤重录并比较。
验收方法
对照结果应说明图像前是否保留尺寸，以及录制中原来的偏移事件是否仍出现。保留实际数值，避免把一次实验室结果当作所有用户的结果。
GitHub 原文 · 更新日期
适用环境
Claude Code 和固定版本技能。准备待测页面及可查看布局偏移的浏览器开发者工具，有实际用户数据时另行对照。
常见问题
只看最后的 CLS 数值能找到根因吗？
数值说明偏移程度。结合录制里的偏移时间、受影响元素和加载顺序，才能判断应在哪个位置预留空间。