Claude Code Core Web Vitals Skill for Product Image Layout Shifts
Find images, fonts, or delayed blocks that resize during loading. Use a repeatable browser trace to compare layout shifts before and after a change.
中文Install in Claude Code
Use Claude Code with the pinned skill and browser developer tools that show layout shifts. Compare field data separately when available.
- Get the complete `cli-tool/components/skills/development/core-web-vitals` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/core-web-vitals/SKILL.md`, open Claude Code at the project root, and call `/core-web-vitals`.
Example task
Reproduce a fictional product listing whose title moves down during slow image loading. Thumbnails arrive late and the card reserves no image area. Design a before-and-after check.What to check
The comparison should show whether dimensions were reserved before image load and whether the original shift still appears. Report measured values as lab results for that recording.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does the final CLS score identify the cause by itself?
The score measures the extent of shifts. Inspect timing, affected elements, and loading order to identify where the layout needs reserved space.