Agent skill · software engineering · sickn33
frontend-lighthouse
Add a portable Lighthouse CI gate for production frontend builds with Core Web Vitals budgets, category floors, median runs, and CI artifacts.
Why this skill is useful
Adds a Lighthouse CI configuration and GitHub Actions workflow that enforce Core Web Vitals budgets, which the AI wouldn't reliably generate on its own.
What it needs
Requires @lhci/cli, lighthouse, node installed locally. About 8k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Frontend Lighthouse (portable performance gate) Portable skill — readable by Claude Code, OpenCode, Codex, Cursor, Windsurf, and others. This skill describes a CI performance gate — a Lighthouse CI config plus a workflow — not a component library or a visual style. It pairs with the frontend-seo and frontend-architecture skills: SEO writes the metadata, Lighthouse proves it ships fast. The goal: every pull request is blocked unless the production build meets explicit Core Web Vitals budgets and category score floors. Budgets live in one lighthouserc.cjs, runs are median-of-N so the gate doesn't flake, and the same config runs locally and in CI. When to Use This Skill Use when adding a Lighthouse CI performance gate to a web app. Use when setting Core Web Vitals budgets for LCP, CLS, and TBT as the lab proxy for INP. Use when configuring category score floors for performance, SEO, accessibility, and best practices. Use when debugging flaky Lighthouse runs or making reports visible as CI artifacts. --- 0. The five core ideas 1. One config, one source of truth. All budgets and assertions live in a single lighthouserc.cjs. Named constants for each budget — no magic numbers buried in assertion objects. 2. Gate the production build, never dev. Lighthouse runs against build + start (the real, optimized output). Dev-server numbers are meaningless for a budget. 3. Median-of-N kills flakiness. Run 3+ times and assert on the median run, so per-run jitter (cold caches, CI noise) never red-flags a healthy build. 4. Budgets encode Google's "good" thresholds. LCP ≤ 2500 ms, INP ≤ 200 ms (gated via the TBT lab proxy), CLS ≤ 0.1 — the values that earn green scores, not "needs improvement". 5. Blocking in CI, visible as artifacts. A GitHub Action runs the gate on every PR touching the app and uploads the HTML/JSON reports so failures are debuggable. --- 1. Files this skill adds Plus a dev dependency: @lhci/cli. --- 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/frontend-lighthouse--739d42