Automated Lighthouse audits in CI with performance budgets, accessibility thresholds, and trend tracking. Enforces Constitution quality gate G2. [EXPLICIT] Trigger: "Lighthouse CI", "performance budget", "Core Web Vitals", "CI audit", "G2 gate"
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdtemplates/output.docx.mdtemplates/output.html"What you don't measure, you can't improve. What you don't gate, you can't protect."
Integrates Lighthouse audits into the CI pipeline using @lhci/cli. Defines performance budgets per page type, sets accessibility and SEO thresholds, and blocks merges when scores drop below targets. Enforces Constitution quality gate G2 (Lighthouse >= 90, Accessibility >= 95). Supports local development audits, PR checks, and production URL verification. [EXPLICIT]
.github/workflows/)web-vitals integrationnpm install -D @lhci/cli
lighthouserc.js:
module.exports = {
ci: {
collect: {
url: ['http://localhost:5000/', 'http://localhost:5000/programs'],
startServerCommand: 'npx serve public -p 5000',
numberOfRuns: 3,
},
assert: {
assertions: {
'categories:performance': ['error', { minScore: 0.90 }],
'categories:accessibility': ['error', { minScore: 0.95 }],
'categories:best-practices': ['error', { minScore: 0.90 }],
'categories:seo': ['warn', { minScore: 0.90 }],
'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
},
},
upload: {
target: 'temporary-public-storage',
},
},
};
- name: Lighthouse CI
run: |
npm install -g @lhci/cli
lhci autorun
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
lhci autorun --collect.url="https://yourdomain.com"
lighthouserc.js configured with project-specific budgets| Anti-Pattern | Why It's Bad | Do This Instead |
|---|---|---|
| Single Lighthouse run | High variance, unreliable | Run 3+ times, use median |
| Warning-only assertions | Scores degrade without enforcement | Use error for critical thresholds |
| Only auditing homepage | Other pages may be slow | Audit representative pages per type |
| Ignoring CWV, only checking score | Score can be high with bad CWV | Set explicit CWV thresholds |
| Running only in CI | Developers discover issues late | Add npm run lighthouse for local runs |
performance-testing — Broader performance testing including load testingbuild-optimization — Reducing bundle size to meet budgetsgithub-actions-ci — CI pipeline configurationdual-layer-verification — Security verification in the same CI pipelineExample invocations:
| Scenario | Handling |
|---|---|
| Empty or minimal input | Request clarification before proceeding |
| Conflicting requirements | Flag conflicts explicitly, propose resolution |
| Out-of-scope request | Redirect to appropriate skill or escalate |
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.