{
  "markdown": "# Web Vitals Auditor\n\nShip a faster site with a clear answer to one question: **what should we fix first?**\n\nWeb Vitals Auditor is a [Claude Code](https://docs.anthropic.com/en/docs/claude-code/getting-started) plugin for practical performance work. It runs a repeatable Lighthouse baseline, turns the result into a ranked fix list, and checks the common causes of slow pages: JavaScript bundles, images, and fonts.\n\nIt is designed for the moment after “the score dropped” and before a team spends a day chasing the wrong optimization.\n\n> This is a Claude Code plugin, not a browser extension and not a Claude.ai chat attachment. It runs on the developer machine where Claude Code can inspect the project and, when you ask, run an audit.\n\n## The outcome\n\nAfter one focused pass, you have:\n\n- Desktop and mobile Lighthouse JSON reports you can keep with the work.\n- A prioritized explanation of LCP, CLS, TBT, and (when present) INP findings.\n- Static checks for bundle bloat, image delivery, and font loading.\n- A sensible starting performance budget for CI.\n\n```mermaid\nflowchart LR\n    A[\"Production URL or static build\"] --> B[\"Lighthouse\\ndesktop + mobile\"]\n    B --> C[\"Core Web Vitals\\nranked by impact\"]\n    A --> D[\"Bundle, image, and\\nfont checks\"]\n    C --> E[\"Smallest high-value\\nfixes first\"]\n    D --> E\n    E --> F[\"Re-run audit and\\nprotect with a budget\"]\n```\n\n## When it pays off\n\nUse it before a release, after a performance regression, or when a page feels slow but the cause is unclear.\n\n| If you see | Start here | What you get |\n|---|---|---|\n| A slow page or falling Lighthouse score | `lighthouse-audit` | Mobile and desktop baseline with saved evidence |\n| A Lighthouse JSON report | `vitals-diagnose` | Ranked fixes tied to report audits |\n| A suspiciously large build | `bundle-analyze` | Duplicate and oversized dependency leads |\n| LCP or CLS issues around media | `image-audit` | Missing dimensions, modern formats, lazy-loading, preload leads |\n| Text flash or render blocking | `font-audit` | `font-display`, loading, weight, and format leads |\n\n## Install\n\n### Option 1: Install from the GitHub marketplace (recommended)\n\nThis makes the plugin available in future Claude Code sessions. From any terminal, run:\n\n```bash\nclaude plugin marketplace add mohitkale/web-vitals-auditor\nclaude plugin install web-vitals-auditor@web-vitals-auditor-marketplace\n```\n\nRestart Claude Code, then enter `/plugin` to confirm it is enabled.\n\n### Option 2: Use a downloaded ZIP for one session\n\nDownload the release asset, then point Claude Code at it. The same command works on macOS, Windows (PowerShell, Git Bash, or WSL), and Linux; change the path for your download folder.\n\n```bash\nclaude --plugin-dir \"/path/to/web-vitals-auditor-1.1.0.zip\"\n```\n\nFor an unpacked source folder instead:\n\n```bash\nclaude --plugin-dir \"/path/to/web-vitals-auditor\"\n```\n\n`--plugin-dir` loads the plugin for that session. It does not permanently install it. Use the marketplace route when you want automatic updates and a persistent install.\n\n### Windows notes\n\n- Install and run Claude Code in a supported shell. Anthropic documents Windows support through WSL or Git Bash.\n- Use a quoted Windows path in PowerShell, for example: `claude --plugin-dir \"C:\\Users\\you\\Downloads\\web-vitals-auditor-1.1.0.zip\"`.\n- For local audits, Chrome or Chromium must be available to Lighthouse, and Node.js 18+ must be on `PATH`.\n\n### macOS notes\n\n- Use Terminal, iTerm, or another shell with Claude Code and Node.js 18+ available.\n- Chrome or Chromium is required only when running a Lighthouse audit. The report-reading and static inspection skills can still help without it.\n\n## Your first useful audit\n\nOpen Claude Code in the project you want to inspect and run:\n\n```text\n/web-vitals-auditor:doctor\n/web-vitals-auditor:lighthouse-audit https://your-production-or-staging-url.example\n```\n\nThen turn the mobile report into a decision list:\n\n```text\n/web-vitals-auditor:vitals-diagnose ./lighthouse-mobile-YYYY-MM-DDTHHMMSS.json\n```\n\nThe audit never crawls beyond the URL you provide. Run it against a production build or staging site, not a framework development server.\n\n## What Claude does for you\n\n| Command | Best for | Result |\n|---|---|---|\n| `/web-vitals-auditor:doctor` | Before the first audit | Confirms Node, Lighthouse, Chrome/Chromium, and framework markers |\n| `/web-vitals-auditor:lighthouse-audit <url>` | A page-level baseline | One desktop and one mobile JSON report with an actionable summary |\n| `/web-vitals-auditor:vitals-diagnose <report>` | Deciding what to fix | Evidence-led priority list from the Lighthouse report |\n| `/web-vitals-auditor:serve-audit <static-build-dir>` | A static production build | Serves a short-lived local preview, audits it, then stops it |\n| `/web-vitals-auditor:bundle-analyze <build-dir>` | JavaScript bloat | Leads for duplicates, large packages, and tree-shaking misses |\n| `/web-vitals-auditor:image-audit [source-dir]` | LCP and CLS image risks | File and line-level image delivery checks |\n| `/web-vitals-auditor:font-audit [source-dir]` | Render blocking and font flashes | Font loading and unused-weight checks |\n| `/web-vitals-auditor:budget-generate [site-type]` | Keeping a win | A mobile-first Lighthouse CI budget file |\n| `/web-vitals-auditor:full-audit <url> [build-dir]` | Release readiness | One opt-in combined report; no source changes |\n\nTwo focused agents are also available when the task calls for a deeper read:\n\n- `perf-forensics` traces a regression across a report, bundle output, images, fonts, and source.\n- `vitals-interpreter` reads a Lighthouse JSON report without running commands.\n\n## A typical result\n\n```text\nMobile: performance 58 [warn]\n\n1. TBT 780 ms [fail]\n   Main cause: long main-thread script work.\n   Next move: inspect the largest shipped modules with bundle-analyze.\n\n2. LCP 3.9 s [warn]\n   Main cause: the first-fold image is not preloaded and is larger than needed.\n   Next move: ship a responsive AVIF/WebP source and preload the LCP image.\n\n3. CLS 0.18 [warn]\n   Main cause: image space is not reserved.\n   Next move: add intrinsic width and height (or an aspect ratio).\n```\n\nThis is lab data, not a substitute for field data. Lighthouse navigation runs commonly report INP as `n/a`; use CrUX or real-user monitoring to understand interaction responsiveness for actual visitors.\n\n## Privacy and safety\n\n- The plugin is local files: skills, commands, agents, and small Node.js hooks. It does not operate analytics, telemetry, or a plugin-owned backend.\n- Startup hooks only look for framework and audit markers in the current working directory. They add a short local context note when they find one.\n- Network activity happens only when you explicitly audit a URL or allow `npx` to fetch a pinned audit tool.\n- It does not read `.env` values, modify application code, deploy, or run destructive build commands.\n\nRead the full [privacy policy](PRIVACY.md).\n\n## Supported setup\n\n- Claude Code 2.1+ (the package was validated with Claude Code 2.1.206).\n- Node.js 18+ and `npx` for Lighthouse and local static-server audits.\n- A supported Chrome or Chromium installation for Lighthouse runs.\n- Any framework is welcome. The automated hints recognize Next.js, Vite, Nuxt, Webpack, Lighthouse CI, and common static build folders.\n\n## Release and updates\n\nEach release is versioned in the plugin manifest and published as a GitHub release ZIP that Claude Code can load directly. The release checklist validates the manifest, marketplace catalog, hooks, and fixture behavior before a tag is created.\n\nFor development from a clone:\n\n```bash\nclaude plugin validate .claude-plugin/plugin.json\nclaude plugin validate .claude-plugin/marketplace.json\nnode tests/run.js\n```\n\n## Limitations\n\n- Lighthouse is a single lab run, so use repeated CI runs and field data before making business-level claims.\n- `serve-audit` is for static output with an `index.html`; it deliberately does not pretend a Next.js `.next` directory is a static site.\n- Bundle, image, and font checks are static inspections. They cannot see assets injected later by a CMS, CDN, or third-party script.\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n",
  "bytes": 8188,
  "sha": "cbabb45be54e056b9157bf6f56974e17946b0b8aefc25acb9694d66cc375d7d2",
  "repo_slug": "mohitkale/web-vitals-auditor",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_mohitkale_web_vitals_auditor_web_vitals__ee2fd0ce/readme"
}