playbooks

home / skills / jeremylongshore / claude-code-plugins-plus-skills / performance-lighthouse-runner

performance-lighthouse-runner skill

/skills/05-frontend-dev/performance-lighthouse-runner

This skill guides performance lighthouse runner setup, generates production-ready configurations, and validates results to optimize frontend performance.

npx playbooks add skill jeremylongshore/claude-code-plugins-plus-skills --skill performance-lighthouse-runner

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.3 KB
---
name: "performance-lighthouse-runner"
description: |
  Manage performance lighthouse runner operations. Auto-activating skill for Frontend Development.
  Triggers on: performance lighthouse runner, performance lighthouse runner
  Part of the Frontend Development skill category. Use when working with performance lighthouse runner functionality. Trigger with phrases like "performance lighthouse runner", "performance runner", "performance".
allowed-tools: "Read, Write, Edit, Bash(cmd:*), Grep"
version: 1.0.0
license: MIT
author: "Jeremy Longshore <[email protected]>"
---

# Performance Lighthouse Runner

## Overview

This skill provides automated assistance for performance lighthouse runner tasks within the Frontend Development domain.

## When to Use

This skill activates automatically when you:
- Mention "performance lighthouse runner" in your request
- Ask about performance lighthouse runner patterns or best practices
- Need help with frontend skills covering react, vue, css, accessibility, performance optimization, and modern web development patterns.

## Instructions

1. Provides step-by-step guidance for performance lighthouse runner
2. Follows industry best practices and patterns
3. Generates production-ready code and configurations
4. Validates outputs against common standards

## Examples

**Example: Basic Usage**
Request: "Help me with performance lighthouse runner"
Result: Provides step-by-step guidance and generates appropriate configurations


## Prerequisites

- Relevant development environment configured
- Access to necessary tools and services
- Basic understanding of frontend development concepts


## Output

- Generated configurations and code
- Best practice recommendations
- Validation results


## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| Configuration invalid | Missing required fields | Check documentation for required parameters |
| Tool not found | Dependency not installed | Install required tools per prerequisites |
| Permission denied | Insufficient access | Verify credentials and permissions |


## Resources

- Official documentation for related tools
- Best practices guides
- Community examples and tutorials

## Related Skills

Part of the **Frontend Development** skill category.
Tags: react, vue, css, accessibility, web

Overview

This skill automates and guides Performance Lighthouse Runner tasks for frontend development. It helps generate runner configurations, validate results, and produce actionable optimization steps. Use it to streamline performance audits and embed Lighthouse checks into CI/CD pipelines.

How this skill works

The skill inspects project structure, existing build and test scripts, and any Lighthouse or Puppeteer configuration files. It generates or updates runner configs, suggests CI integration, and validates outputs against common performance thresholds. When requested, it produces step-by-step instructions, production-ready snippets, and remediation actions based on audit results.

When to use it

  • You need to add or update a Lighthouse runner for automated performance audits
  • Integrating Lighthouse checks into CI/CD (GitHub Actions, GitLab CI, CircleCI)
  • Diagnosing performance regressions or validating improvements after changes
  • Generating reproducible audit configurations for staging and production
  • Learning best practices for automated frontend performance testing

Best practices

  • Keep separate configs for local, staging, and production with appropriate throttling
  • Set realistic performance budgets and fail CI builds only when critical thresholds breach
  • Use headless Chromium with consistent environment flags to ensure reproducible results
  • Run audits against representative pages and user flows, not just the homepage
  • Store audit artifacts (reports, traces) in CI logs or an artifact store for historical comparison

Example use cases

  • Create a GitHub Actions workflow that runs Lighthouse on merge to main and fails on budget breaches
  • Generate a Puppeteer script that navigates a multi-step checkout flow and triggers Lighthouse audits
  • Produce a minimal Lighthouse config for local debugging with device and network emulation
  • Validate a produced config and return a prioritized remediation list with code-level suggestions
  • Set up scheduled Lighthouse runs and retention of reports for performance trend analysis

FAQ

What prerequisites do I need?

A configured frontend dev environment, Node.js tools, headless Chromium, and access to your CI system. Familiarity with build scripts and routing helps.

Can this fail my CI on minor regressions?

Yes—you can configure strict or lenient budgets. Best practice is to fail only on critical regressions and monitor trends for minor changes.