How to use the Cumulative Layout Shift Audit agent skill

What the skill makes the agent do

Once installed, the skill gives the agent a checklist for finding and reducing cumulative layout shift. CLS measures visual stability: layout shifts cause accidental clicks, reading disruption, and user frustration, so a good score means content stays where users expect it.

The skill points the agent at common causes. These include images and embeds without set width and height, ads, banners and other dynamic content that push existing content down, and late-loading fonts or injected content. The guidance aims for a CLS score below 0.1.

• Check: measure CLS with Lighthouse or PageSpeed Insights and confirm the score is below 0.1.
• Fix: reserve space for images and embeds using dimensions, use font-display strategies, and avoid injecting content above existing content.
• Explain: describe how CLS works and why unexpected shifts frustrate users.
• Code review: flag exact files, requests or rendering steps that add layout cost, and describe how the issue was measured.

Install the skill from the ZIP download

Download the ZIP for this skill from our page, then unzip it. The skill folder contains SKILL.md and a references/rule.md file with more detailed examples.

For a personal setup, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into the .claude/skills/ folder inside that project instead.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

Trigger the skill with a natural request

You do not need a special command. Describe what you want in ordinary language and mention page loading, layout stability or CLS. The skill's description covers auditing slow page loads, heavy assets and rendering delays related to minimizing cumulative layout shift, so requests about those topics are the ones it is designed for.

The skill also asks the agent to verify the real bottleneck in DevTools, Lighthouse or field data before recommending changes. Give the agent your measurements if you have them, since this makes the advice more specific.

• "Audit this page for cumulative layout shift and tell me what's causing it."
• "My product page jumps when the images load. Find out why and suggest fixes."
• "Review this layout for things that could shift after load, like ads or late fonts."
• "Here is my Lighthouse report. Explain the CLS result and what to change first."

What you need before you start

The skill needs a way to measure CLS: Lighthouse, PageSpeed Insights or Chrome DevTools. It also needs access to the page source or the files being reviewed, because the agent's suggestions depend on the actual markup and CSS.

The skill runs no scripts and uses no network access, according to its listing. It works from the instructions and the files you give it.

• Lighthouse, PageSpeed Insights or Chrome DevTools to measure CLS
• Access to the page source or files under review

Safety notes: review changes before you ship them

The skill recommends changes, but the agent's edits to real code should be checked by a person before release. Do not expect automatic fixes to be applied safely without review.

The skill is for web pages only. It does not apply to non-web projects, because the guidance covers browser page rendering only. For deep framework-specific code, the skill refers to an external reference file whose detailed examples are not summarised in the skill itself.

• Review every edit the agent proposes to real files.
• Re-measure CLS after changes to confirm the score improved.
• Use the skill for browser-rendered pages only.

Tips for better results

Measure first. Run Lighthouse or PageSpeed Insights, or check field data, before asking for changes. The skill is built to confirm the bottleneck before recommending fixes.

Give the agent concrete files. Pointing it at the template, stylesheet or component that renders the shifting element gives more useful findings than a general question.

Set image and embed dimensions. The skill's quick reference says to always set width and height on images and embeds, or reserve space with CSS aspect-ratio, as shown in the reference examples.