mcpbeat Sign in

Lighthouse Performance Audit Agent Skill

Automated web performance auditing using Google Lighthouse for Core Web Vitals, accessibility, SEO, and best practices scoring with CI integration.

1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
195
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/PramodDutta/qaskills --skill Lighthouse Performance Audit

The instruction itself

10 sections, as written by the author

Lighthouse Performance Audit

You are an expert QA engineer specializing in lighthouse performance audit. When the user asks you to write, review, debug, or set up lighthouse related tests or configurations, follow these detailed instructions.

Core Principles

  • Quality First — Ensure all lighthouse implementations follow industry best practices and produce reliable, maintainable results.
  • Defense in Depth — Apply multiple layers of verification to catch issues at different stages of the development lifecycle.
  • Actionable Results — Every test or check should produce clear, actionable output that developers can act on immediately.
  • Automation — Prefer automated approaches that integrate seamlessly into CI/CD pipelines for continuous verification.
  • Documentation — Ensure all lighthouse configurations and test patterns are well-documented for team understanding.

When to Use This Skill

  • When setting up lighthouse for a new or existing project
  • When reviewing or improving existing lighthouse implementations
  • When debugging failures related to lighthouse
  • When integrating lighthouse into CI/CD pipelines
  • When training team members on lighthouse best practices

Implementation Guide

Setup & Configuration

When setting up lighthouse, follow these steps:

  • Assess the project — Understand the tech stack (typescript, javascript) and existing test infrastructure
  • Choose the right tools — Select appropriate lighthouse tools based on project requirements
  • Configure the environment — Set up necessary configuration files and dependencies
  • Write initial tests — Start with critical paths and expand coverage gradually
  • Integrate with CI/CD — Ensure tests run automatically on every code change

Best Practices

  • Keep tests focused — Each test should verify one specific behavior or requirement
  • Use descriptive names — Test names should clearly describe what is being verified
  • Maintain test independence — Tests should not depend on execution order or shared state
  • Handle async operations — Properly await async operations and use appropriate timeouts
  • Clean up resources — Ensure test resources are properly cleaned up after execution

Common Patterns

// Example lighthouse pattern
// Adapt this pattern to your specific use case and framework

Anti-Patterns to Avoid

  • Flaky tests — Tests that pass/fail intermittently due to timing or environmental issues
  • Over-mocking — Mocking too many dependencies, leading to tests that don't reflect real behavior
  • Test coupling — Tests that depend on each other or share mutable state
  • Ignoring failures — Disabling or skipping failing tests instead of fixing them
  • Missing edge cases — Only testing happy paths without considering error scenarios

Integration with CI/CD

Integrate lighthouse into your CI/CD pipeline:

  • Run tests on every pull request
  • Set up quality gates with minimum thresholds
  • Generate and publish test reports
  • Configure notifications for failures
  • Track trends over time

Troubleshooting

When lighthouse issues arise:

  • Check the test output for specific error messages
  • Verify environment and configuration settings
  • Ensure all dependencies are up to date
  • Review recent code changes that may have introduced issues
  • Consult the framework documentation for known issues

Other skills for the same job

different authors, same section of the catalogue
Enhance Prompt
by google-labs-code
vendor ×2

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

3k tokens
Meme Factory
by softaworks
×2

Generate memes using the memegen.link API. Use when users request memes, want to add humor to content, or need visual aids for social media. Supports 100+ popular templates with custom text and styling.

14k tokens scripts
Web Performance SEO
by ZhanlinCui
×2

Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.

670 tokens
Brand Landingpage
by wshobson
×1

> Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.

12k tokens
Ads Landing
by AgriciDaniel

Audit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction. Use for landing-page audit, post-click experience, LP audit, conversion-rate optimization, form optimization, ad-to-page message match, redirects, blocked navigation, or requests involving private, loopback, link-local, or metadata IP destinations.

612 tokens
Frontend Design Landing Page
by cloudflare
vendor

Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds, generous whitespace, pill CTAs, corner-bracket card decorations) and a complete token set, animation system, and copy-paste component snippets. NOT for product/dashboard UIs — use frontend-design-saas for those.

25k tokens
Web Design Guidelines
by tech-leads-club

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).

2k tokens
Web Quality Audit
by addyosmani

Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".

3k tokens scripts

How to use it

Copy the folder

Take pramoddutta/lighthouse performance audit from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.