lighthouse-ci-integrator_skill

This skill automates performance testing and Core Web Vitals tracking with Lighthouse CI in CI/CD, enforcing budgets and surfacing trends.

TypeScript

4

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill dexploarer/claudius-skills --skill lighthouse-ci-integrator

SKILL.md12.6 KB

Overview

This skill integrates Lighthouse CI into your CI/CD pipeline to automate performance testing, Core Web Vitals tracking, and regression detection. It provisions configs, npm scripts, and CI workflow steps to run desktop and mobile audits, enforce budgets, and surface failures on PRs. Use it to get repeatable Lighthouse reports, trend history, and alerting for regressions.

How this skill works

The integration installs @lhci/cli, adds lighthouserc configuration (desktop and mobile), and wires lhci commands into npm scripts and CI jobs. It collects multiple runs per URL, asserts scores and metrics against configured budgets, uploads results (temporary storage or LHCI server), and can post PR comments or notifications on failures. Optional custom audits, a self-hosted LHCI server, and report generation are supported.

When to use it

When you want automated Lighthouse audits on every pull request or push
To track Core Web Vitals and enforce performance budgets over time
To prevent regressions by failing CI when assertions break
When you need both mobile and desktop performance coverage
To add PR comments, Slack/email alerts, or uploadable reports

Best practices

Run LHCI on every PR and on main to catch regressions early
Start with realistic budgets and tighten them as metrics stabilize
Test multiple pages and include authenticated flows where relevant
Use temporary-public-storage for PRs and an LHCI server for long-term history
Run separate mobile and desktop configs and collect multiple runs to reduce flakiness
Upload artifacts and enable CI notifications (Slack/email) for immediate visibility

Example use cases

Add lhci autorun to GitHub Actions to fail PRs that drop Performance or Core Web Vitals
Run desktop and mobile LHCI in GitLab CI with artifacts and one-week retention
Host an LHCI server via Docker Compose to keep historical trends and project tokens
Use lighthouserc asserts to enforce resource budgets (script, image, stylesheet sizes)
Create a script to parse .lighthouseci JSON results and produce team-friendly summaries

FAQ

No. Use temporary-public-storage for PRs initially; add a self-hosted LHCI server when you need retained history and trend analysis.

How do I reduce flaky results?

Collect multiple runs per URL, run separate mobile/desktop configs, warm up the server, and use consistent throttling and emulation settings.

Can I add custom audits?

Yes. Implement a Lighthouse Audit plugin and reference it in lighthouserc plugins to include custom checks.