performance-check

Diagnose frontend performance issues and generate structured reports.

1|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/ReefBytes-Owner/Manifest --skill performance-check-reefbytes-owner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-check
Source: https://github.com/ReefBytes-Owner/Manifest/tree/main/configs/claude/skills/performance-check
Command: npx skills add https://github.com/ReefBytes-Owner/Manifest --skill performance-check-reefbytes-owner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often suffer from performance regressions caused by large bundle sizes, inefficient loading strategies, unoptimized images, and Core Web Vitals issues, leading to slower user experiences.

Core Features & Use Cases

  • Core Web Vitals analysis and targets to guide optimizations.
  • Bundle size and code-splitting analysis to reduce payloads and improve load times.
  • Lazy loading, preloading hints, and loading strategy evaluation to improve time-to-interactive.
  • Image optimization and caching strategy evaluation to boost perceived performance.
  • Actionable findings suitable for CI integrations, developer workflows, and performance reviews.

Quick Start

Point the skill at a frontend project directory to generate a structured performance report and optimization recommendations.

Frequently Asked Questions about performance-check

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I analyze Core Web Vitals and bundle size in a frontend project?

To analyze Core Web Vitals and bundle size, point the skill at your project directory to run static analysis across configs and assets, producing a structured report with actionable optimization findings.

Can I run a frontend performance audit on a Vite or Create React App project?

Yes, you can audit Vite or Create React App projects, as the skill supports Next.js, Webpack, and plain HTML setups to evaluate loading strategies and asset optimization.

What is the best way to diagnose inefficient loading strategies and unoptimized images?

The best way to diagnose inefficient loading and unoptimized images is using static analysis that evaluates lazy loading, preloading hints, and caching strategies to generate actionable performance findings.

How do I reduce large bundle sizes and improve code-splitting analysis for Next.js?

Reduce large bundle sizes by analyzing bundle efficiency and code-splitting configurations, which identifies payload reductions and loading improvements for Next.js and other frontend frameworks.

Does this frontend performance check require specific dependencies or components to run?

No, this performance check requires no external dependencies or components, reading your existing project configs and assets directly to output a structured performance optimization report.