web-performance-auditor

by ualiyou

AI-powered web performance auditor for frontend and web developers. Use it to audit a website or web app, diagnose poor Core Web Vitals (LCP, CLS, INP) and low Lighthouse scores, review JavaScript bundle size, code splitting, lazy loading, image and font loading, hydration, React rendering, Next.js/Nuxt patterns, network waterfalls, third-party scripts, and caching. Produces a prioritized, senior-engineer performance audit with a score and concrete fixes.

v1.0.0New

Signing

SignedSLSA L2

Signed by: skills-hub.ai distributor
Method: Distributor-signed by skills-hub.aiCryptographically signed by the skills-hub.ai distributor key at publish time.
Signed: Jul 25, 2026, 5:23 PM

Install this skill

Run this command in your terminal. No account required — it auto-detects your AI tool and installs the skill file.

npx @skills-hub-ai/cli install web-performance-auditor

Or download directly:

Browse all CLI commands →

Setup by platform

Claude Code

~/.claude/skills/<skill>/SKILL.md

Setup guide →

Install

One-click setup for your editor

Run in your project root

npx @skills-hub-ai/cli install web-performance-auditor --target claude-code

Examples

Prompt

Can you audit the performance of https://example.com and tell me what needs fixing?

Output

The site exhibits a high LCP of 4.2s, primarily due to a 320 KB hero image that loads late. Recommend converting the image to WebP, implementing lazy loading via `loading="lazy"`, and optimizing server response time to reduce TTFB by 200ms. Additionally, critical CSS blocking render can be reduced by inlining above-the-fold styles, saving approximately 300ms. The total JavaScript payload is 1.8MB; splitting code with dynamic imports and removing unused modules could improve TTI by 15%. Prioritize image optimization and code splitting for immediate impact on Core Web Vitals.

Prompt

Review the web app at https://myapp.com for performance issues and suggest concrete improvements.

Output

Analysis shows a CLS of 0.25 caused by images without size attributes and late-loaded ads injecting content. To fix, specify width/height for all images, and defer ad scripts until after initial paint. The total JavaScript bundle is 2.3MB, with 600KB unminified code; minify and remove unused dependencies. The network waterfall indicates multiple small requests causing overhead; combining small CSS files and enabling HTTP/2 server push can reduce request count and improve load times. Focus on image sizing and reducing JavaScript payload to improve user experience and meet Core Web Vitals thresholds.

Instructions

This skill doesn’t include stateful context yet, instructions only. Learn about stateful skills.

Security

Loading security scan...

Reviews (0)

View full changelog & diffs →

Browse all →

web-research-agentA comprehensive autonomous web research agent that performs targeted searches, fetches and parses web content, summarizes findings, and generates structured reports, adhering to industry best practices for accuracy, security, and robustness.32 installs perplexity-searchAI-powered web search and research using the Perplexity API (Sonar models). Performs deep web research with citations, fact-checking, competitive analysis, market research, and technical documentation lookup. Supports streaming responses, search domain filtering, and recency filtering.4 installs video-toolkitCreate professional videos autonomously using AI -- voiceovers (Qwen3-TTS with voice cloning), image generation (FLUX.2), background music (MusicGen), talking head animation (SadTalker), and Remotion rendering. Uses cloud GPUs via Modal or RunPod. Full pipeline from text brief to rendered MP4.3 installs ai-native-controlled-implementationUse when implementing from docs/implementation-plan.md in small validated batches with progress tracking, pause discipline, and MVP boundaries.1 installs ai-native-software-engineeringUse when applying the AI Native Software Engineering lifecycle across problem definition, planning, foundation, implementation, and improvement.0 installs ai-native-problem-definitionUse when shaping a new software idea before planning: pressure-test problem, assumptions, constraints, platform, MVP direction, and project name.0 installs

More Build skills

Browse category →

ui-design-systemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.69 installs self-improving-agentCurate Claude Code's auto-memory into durable project knowledge. Analyze MEMORY.md for patterns, promote proven learnings to CLAUDE.md and .claude/rules/, extract recurring solutions into reusable skills. Use when: (1) reviewing what Claude has learned about your project, (2) graduating a pattern from notes to enforced rules, (3) turning a debugging solution into a skill, (4) checking memory health and capacity.33 installs senior-frontendFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.21 installs using-superpowersUse when starting any conversation - establishes how to find and use skills, requiring skill invocation before ANY response including clarifying questions20 installs frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.19 installs senior-backendDesigns and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set up GraphQL", "handle database migrations", or "load test APIs". Covers Node.js/Express/Fastify development, PostgreSQL optimization, API security, and backend architecture patterns.15 installs

Frequently asked questions about web-performance-auditor

What does the web-performance-auditor skill do?

How do I install the web-performance-auditor skill?

Run `npx @skills-hub-ai/cli install web-performance-auditor` from your terminal. The CLI writes the SKILL.md to the correct location for your AI tool (e.g. ~/.claude/skills/web-performance-auditor/ for Claude Code or ~/.cursor/skills/ for Cursor with --target cursor) and adds it to your project's .skills.json lockfile.

Which AI tools does web-performance-auditor work with?

web-performance-auditor runs in Claude Code. It follows the open Agent Skills standard (SKILL.md), so the same skill works in every supported tool without modification.

Is the web-performance-auditor skill free?

Yes. Every skill on skills-hub.ai is free and open-source. There are no premium tiers, paywalls, or usage limits. You only pay for whatever AI assistant you're already using.

How do I use web-performance-auditor after installing it?

In Claude Code, type `/web-performance-auditor` (or whatever slash command the skill registers) and the AI follows the skill's instructions immediately. You can also reference it by name in natural language, your AI loads the skill into context when relevant.

Can I share the web-performance-auditor skill with my team?

Yes. Commit your project's .skills.json lockfile and teammates run `npx @skills-hub-ai/cli install` (no args) to install every skill at the exact version you pinned. Organization-scoped installs work via skills-hub.ai organizations.