home / skills / openclaw / skills / vitals-fixer

vitals-fixer skill

/skills/lxgicstudios/vitals-fixer

This skill helps you fix Core Web Vitals issues with AI guidance, identifying LCP, CLS, and FID bottlenecks and actionable code fixes.

npx playbooks add skill openclaw/skills --skill vitals-fixer

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

Files (8)
SKILL.md
2.4 KB
---
name: vitals-fixer
description: Fix Core Web Vitals issues with AI guidance. Use when your Lighthouse scores need improvement.
---

# Core Web Vitals Fixer

Your Lighthouse scores are red. This tool tells you exactly why and how to fix it. LCP, FID, CLS. all the acronyms, all the solutions. No more guessing at performance problems.

**One command. Zero config. Just works.**

## Quick Start

```bash
npx ai-core-vitals ./src
```

## What It Does

- Analyzes your code for Core Web Vitals issues
- Identifies LCP bottlenecks like render-blocking resources
- Finds CLS causes like images without dimensions
- Spots FID problems from heavy JavaScript execution
- Provides specific code changes, not just generic advice

## Usage Examples

```bash
# Full project analysis
npx ai-core-vitals ./

# Focus on specific metric
npx ai-core-vitals ./src --metric lcp

# Analyze with a URL for real data
npx ai-core-vitals ./src --url https://yoursite.com

# Prioritized fix list
npx ai-core-vitals ./src --prioritize

# Output detailed report
npx ai-core-vitals ./src -o vitals-report.md
```

## Best Practices

- **Fix LCP first** - It's the biggest impact on perceived performance
- **Measure before and after** - Run Lighthouse to validate your fixes
- **Don't trust dev mode** - Production builds behave differently. Test both
- **Focus on the biggest wins** - One large image fix beats ten micro-optimizations

## When to Use This

- Failed a Core Web Vitals assessment on Search Console
- Preparing for a Lighthouse audit
- Client complains the site feels slow
- Building performance regression tests

## Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

**Find more:**
- GitHub: https://github.com/LXGIC-Studios
- Twitter: https://x.com/lxgicstudios
- Substack: https://lxgicstudios.substack.com
- Website: https://lxgic.dev

## Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

```bash
npx ai-core-vitals --help
```

## How It Works

The tool scans your source files for patterns known to hurt Web Vitals. It identifies specific issues like unoptimized images, missing preloads, layout-shifting elements, and heavy bundle imports. AI correlates these findings with your actual code to suggest targeted fixes.

## License

MIT. Free forever. Use it however you want.

Overview

This skill fixes Core Web Vitals issues with actionable AI-guided fixes for LCP, FID, and CLS. It analyzes your source or a live URL and returns specific code-level recommendations instead of generic tips. Run it with one command and no configuration to get prioritized, verifiable fixes for Lighthouse regressions. Designed to speed up remediation and improve perceived performance quickly.

How this skill works

The tool scans source files (or crawls a provided URL) to detect patterns that cause poor Web Vitals: render-blocking resources, oversized or unoptimized images, missing dimensions, heavy synchronous JavaScript, and layout-shifting elements. An AI engine correlates those findings with your code to generate concrete code changes, suggested asset optimizations, and a prioritized remediation plan. You can target a single metric, produce a detailed report, or run a full-project audit with minimal setup.

When to use it

  • You failed a Core Web Vitals assessment in Search Console or Lighthouse
  • Preparing for a Lighthouse audit before launch or review
  • When a client or users report the site feels slow or janky
  • Building performance regression tests and need actionable fixes
  • After performance budget alerts to triage root causes

Best practices

  • Fix LCP issues first — they have the largest impact on perceived speed
  • Measure before and after each change using Lighthouse or field metrics
  • Test fixes in production builds, not only in dev mode
  • Prioritize high-impact items (large images, blocking scripts) over micro-optimizations
  • Apply suggested code changes incrementally and verify with real user metrics

Example use cases

  • Run a full project analysis to receive a prioritized list of fixes and code patches
  • Scan only for LCP to find render-blocking assets and missing preloads
  • Provide a live-site URL to combine lab analysis with real runtime behavior
  • Generate a detailed markdown report for client deliverables or sprint tickets
  • Integrate into a performance regression workflow to catch new regressions

FAQ

Do I need to install anything to run this skill?

No install is required; run it via npx with Node.js 18+ recommended.

Will it automatically change my code?

It provides specific code changes and suggested edits; you review and apply them.