Back to Skills
Skill

perf

Quick performance measurement using Lighthouse and Core Web Vitals. Use when user says "/perf", "성능 측정", "performance", "lighthouse", or wants to audit page performance. Supports single page or batch measurement.

From perf
Install
1
Run in your terminal
$
npx claudepluginhub october-academy/agent-plugins --plugin perf
Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Performance Measurement Skill

Quick Lighthouse audit for web applications.

Usage

Commands

/perf                      # Audit current/main page
/perf /about               # Audit specific path
/perf https://example.com  # Audit full URL
/perf --all                # Audit all key pages

Korean Triggers

  • "성능 측정"
  • "라이트하우스 돌려"
  • "페이지 속도 확인"

Workflow

1. Identify Target URLs

If --all or batch mode:

Scan for key pages:

  • Homepage (/)
  • Main feature pages
  • High-traffic routes

2. Run Lighthouse

For each URL, invoke web-perf-ux skill or run directly:

lighthouse <url> --output=json --chrome-flags="--headless"

3. Collect Metrics

Focus on Core Web Vitals:

MetricGoodNeeds WorkPoor
LCP (Largest Contentful Paint)<2.5s2.5-4.0s>4.0s
CLS (Cumulative Layout Shift)<0.10.1-0.25>0.25
INP (Interaction to Next Paint)<200ms200-500ms>500ms

Additional metrics:

  • FCP (First Contentful Paint)
  • TTFB (Time to First Byte)
  • Total Blocking Time
  • Speed Index

4. Generate Report

Summary format:

Performance Report
==================
/ (Homepage)
  LCP: 1.8s    CLS: 0.05   INP: 120ms   Score: 92

/dashboard
  LCP: 3.2s    CLS: 0.08   INP: 180ms   Score: 74
  Issues: LCP needs improvement

/products
  LCP: 2.1s    CLS: 0.02   INP: 95ms    Score: 89

Top Issues:
1. /dashboard - Large images not optimized
2. /dashboard - Render-blocking JavaScript

Common Optimizations

Based on results, suggest:

IssueSolution
High LCPOptimize images, preload critical assets
High CLSSet image dimensions, avoid dynamic content insertion
High INPReduce JavaScript, use code splitting
High TTFBCheck server response, use CDN

Integration

This skill works best with web-perf-ux plugin for detailed analysis.

# For detailed analysis
/web-perf-ux https://example.com

# For quick check
/perf https://example.com

Batch Mode

When running --all:

  1. Discover routes from sitemap or router config
  2. Queue pages for measurement
  3. Run sequentially (avoid overwhelming server)
  4. Aggregate results into single report
Similar Skills
cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

138.5k
Stats
Parent Repo Stars0
Parent Repo Forks1
Last CommitFeb 3, 2026
Actions
View SourceView PluginView on GitHubView README