skills.rest
DucCuong159
DucCuong159COMMUNITY
Explore all skills by this author →
GitHub

frontend-lighthouse

Configures a Lighthouse CI gate enforcing Core Web Vitals budgets on production builds.

Updated Aug 11, 2026
Search Tags:#performance#frontend#github actions#lighthouse#core web vitals#ci#budgets
One-click install
npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill frontend-lighthouse-duccuong159
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-lighthouse
Source: https://github.com/DucCuong159/Realtime-chatapp/tree/main/.agent/skills/frontend-lighthouse
Command: npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill frontend-lighthouse-duccuong159

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lhci/cli.

What problem does it solve? Frontend teams often ship performance regressions because Lighthouse audits are run manually, against dev servers, or as single flaky runs. This Skill adds a CI gate that blocks pull requests unless the production build meets explicit Core Web Vitals budgets and category score floors. ## Core Features & Use Cases - Single-source budget config: All budgets and assertions live in one lighthouserc.cjs with named constants for LCP, CLS, and TBT (as the INP lab proxy), plus category floors for performance, SEO, accessibility, and best practices. - Flake-resistant gating: Median-of-N runs (aggregationMethod: "median-run", numberOfRuns >= 3) against the production build, never the dev server. - CI integration: A GitHub Actions workflow builds the app, runs lhci autorun, and always uploads HTML/JSON reports as artifacts for debugging failures. - Use Case: A team adds the gate to their Next.js app so every PR touching apps/web is blocked if LCP exceeds 2500 ms or the accessibility score drops below 0.95. ## Quick Start Ask the AI to add a Lighthouse CI performance gate with Core Web Vitals budgets and a PR-blocking GitHub Actions workflow to your web app.

Frequently Asked Questions about frontend-lighthouse

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Lighthouse CI performance budget to my project?▼

Install @lhci/cli as a dev dependency, create a lighthouserc.cjs with your budgets and assertions, add an "lhci": "lhci autorun" script, and run pnpm build && pnpm lhci locally. Then add a GitHub Actions workflow that builds the app and runs the gate on pull requests.

How do I prevent flaky Lighthouse CI runs?▼

Set aggregationMethod to "median-run" and numberOfRuns to at least 3 so per-run jitter never fails a healthy build. Also ensure the gate runs against the production build, not the dev server, and raise numberOfRuns to 5 if flakiness persists.

Does Lighthouse CI work with Next.js, Astro, or Vite?▼

Yes, the config is framework-neutral except for startServerCommand and startServerReadyPattern. Next.js uses `pnpm start` with "Ready in", Vite uses `npx vite preview` with "Local:", and static output can use collect.staticDistDir instead of a server.

Why is interaction-to-next-paint failing my Lighthouse CI gate?▼

The INP audit is not present in every Lighthouse build, so it should be asserted as "warn", not "error". Gate INP in the lab via total-blocking-time at the same 200 ms budget, which is Lighthouse's recommended lab proxy.

What are the limitations of Lighthouse CI budgets?▼

Lighthouse CI is a lab signal and does not replace real-user field monitoring. Budgets must be tuned to the actual route, hosting platform, and device assumptions, and a passing gate does not prove business flows, visual correctness, or backend availability.

Related Skills

Explore More Software Engineering Skills→
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced
ankaboot-sourceankaboot-source
2

performance-optimization

Diagnose and fix frontend and backend performance bottlenecks through measurement-driven optimization workflows.

Official
Advanced
AndreaRR18AndreaRR18

Web Accessibility & SEO Expert

Enhance ByteShutter blog articles with WCAG 2.1 accessibility and SEO metadata.

Community
Basic
fengshao1227fengshao1227
5.9k

optimize

Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.

Community
Intermediate