Skip to content
Get packs

Cumulative Layout Shift Audit

Audits pages for unexpected layout shifts and suggests fixes to keep content stable

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist for finding and reducing cumulative layout shift, a web performance measure of how much page content jumps around while loading. Once installed, the agent looks for common causes such as images without set dimensions, ads or banners that push content down, and late-loading fonts or dynamic content. It recommends measuring with Lighthouse, PageSpeed Insights or field data before suggesting changes, and aims for a score below 0.1.

Great for

  • Front-end developers who want a structured check of page stability before release
  • Designers or site owners reviewing a page that feels jumpy when it loads
  • Teams already using Lighthouse or PageSpeed Insights who want help interpreting CLS results

Skip it if

  • Non-web projects, since the guidance covers browser page rendering only (no use outside web pages)
  • Anyone expecting automatic fixes to be applied safely without review; the skill recommends changes but the agent's edits to real code should still be checked by a person
  • Users who need deep framework-specific code, because the skill points to an external reference file for detailed examples that is not summarised here

Try asking

  • “Audit this page for layout shift and tell me which images are missing width and height”
  • “Our homepage jumps when the cookie banner loads. What should we change?”
  • “Review this React component for causes of cumulative layout shift and explain how to measure it”
  • “Explain what CLS means and why our Lighthouse score dropped”
Step-by-step guide: how to use Cumulative Layout Shift AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    cumulative-layout-shift.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip cumulative-layout-shift.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip cumulative-layout-shift.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a real measurement (Lighthouse report or DevTools output) so it can confirm the actual cause rather than guess
  • Share the page or component code along with the URL so fixes point to exact files and elements
  • Ask the agent to re-measure after changes to confirm the score improved

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.