Skip to content
Get packs

Browser Performance Audit Guide

Guides the agent to verify web performance bottlenecks in a real browser before recommending fixes

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

What it does

When installed, this skill tells an AI agent to check web page performance using real browser-based tools such as Lighthouse, DevTools, Puppeteer, or WebPageTest rather than guessing from code alone. The agent is asked to confirm the actual slow spot (like heavy assets, slow scripts, or layout shifts) and measure metrics such as LCP, CLS, and INP before suggesting changes. The skill is written as guidance; the files do not themselves run any tools.

Great for

  • Front-end developers investigating slow page loads or rendering delays
  • Teams wanting performance checks added to a CI/CD pipeline
  • Reviewers who want measured evidence before performance changes

Skip it if

  • Simple static-site checks that need no browser measurement, since the skill emphasises browser testing
  • Non-developers wanting a one-click speed report, as it only shapes agent behaviour and runs no measurement itself

Try asking

  • “Audit why my product page loads slowly and confirm the bottleneck with Lighthouse before suggesting fixes”
  • “Review my site's assets and scripts for performance problems and describe how each issue was measured”
  • “Set up a Lighthouse or WebPageTest step in my CI pipeline for performance checks”
Step-by-step guide: how to use Browser Performance Audit GuideInstall, 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.

    browser-required.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip browser-required.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip browser-required.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

  • Provide the URL, a DevTools or Lighthouse report, or field data so the agent can verify the bottleneck instead of guessing.
  • Ask the agent to name the measurement method for every recommended change.
  • Check references/rule.md for framework-specific examples before applying them.

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.