How do I install the Pwp Perf skill?

Run npx skillmds@latest add shandar/pwp-perf in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Pwp Perf safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Pwp Perf?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Pwp Perf free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Pwp Perf?

shandar (@shandar) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Pwp Perf by shandar — Agent Skill

Name: Pwp Perf
Author: shandar

Pwp Perf

Performance optimization protocol — measure first, optimize second, verify always. Use this skill whenever the user reports something is slow, asks about performance, wants to optimize, or mentions load times, bundle size, rendering speed, memory usage, or database query performance. Also use when they say 'this is slow', 'speed this up', 'optimize this', 'reduce bundle size', 'improve load time', or 'why is this taking so long'. Covers web vitals, profiling, bottleneck identification, and before/after verification.

shandar 877453f 3.4 KB Updated Sep 17, 2026

File contents

Performance Optimization Skill

The cardinal rule: never optimize on vibes. Measure, identify the bottleneck, fix it, prove it's faster.

Performance Mindset

Measure before optimizing. Intuition about performance is wrong more often than right. Profile first.
Optimize the bottleneck. Making a fast operation faster doesn't help.
Premature optimization is real. Only optimize measured problems or known-critical paths.
Verify the improvement. Before/after numbers or it didn't happen.

Investigation Protocol

Step 1: Define the Problem

What is slow? (Page load, API, render, build)
How slow? (Actual numbers: "3.2 seconds")
What is the target? ("Under 1 second")

Step 2: Measure Current State

Area	How to Measure
Page load	Lighthouse, DevTools Performance tab
Core Web Vitals	LCP, INP, CLS via Lighthouse
API response	Network tab timing, server-side logging
Render	React DevTools Profiler
Bundle size	Build output, bundlephobia
Memory	DevTools Memory tab, heap snapshots
Database	Query EXPLAIN plans

Step 3: Identify the Bottleneck

Network — too many requests, large payloads, no caching
Data — slow queries, over-fetching, N+1 patterns
Rendering — unnecessary re-renders, layout thrashing
Compute — expensive calculations on main thread
Assets — uncompressed images, unminified JS

Step 4: Fix the Bottleneck

Bottleneck	Common Fixes
Large bundle	Code splitting, dynamic imports, tree shaking
Slow page load	Lazy loading, preload critical resources
Re-renders	useMemo, useCallback, React.memo (only where profiled)
Slow API	Caching, pagination, field selection
N+1 queries	Batch queries, eager loading, DataLoader
Large images	WebP/AVIF, responsive srcset, lazy loading
Heavy computation	Web Workers, caching results

Step 5: Verify

**Before:** {metric} = {value}
**After:** {metric} = {value}
**Improvement:** {percentage}%
**Target met:** Yes / No
**Method:** {tool, conditions}

Web Performance Targets

Metric	Good	Needs Work	Poor
LCP	< 2.5s	2.5-4.0s	> 4.0s
INP	< 200ms	200-500ms	> 500ms
CLS	< 0.1	0.1-0.25	> 0.25
TTFB	< 800ms	800-1800ms	> 1800ms
Bundle (gzip)	< 100KB	100-300KB	> 300KB

Anti-Patterns

Anti-Pattern	Do This Instead
Memoizing everything	Profile first, memoize measured bottlenecks
Optimizing render count	Profile actual paint/layout cost
Cache without TTL	Always set expiration
Lazy loading everything	Only lazy load below-fold content
Compressing at runtime	Compress at build time

---name: pwp-perfdescription: Performance optimization protocol — measure first, optimize second, verify always. Use this skill whenever the user reports something is slow, asks about performance, wants to optimize, or mentions load times, bundle size, rendering speed, memory usage, or database query performance. Also use when they say 'this is slow', 'speed this up', 'optimize this', 'reduce bundle size', 'improve load time', or 'why is this taking so long'. Covers web vitals, profiling, bottleneck identification, and before/after verification.---# Performance Optimization SkillThe cardinal rule: **never optimize on vibes.** Measure, identify the bottleneck, fix it, prove it's faster.## Performance Mindset- **Measure before optimizing.** Intuition about performance is wrong more often than right. Profile first.- **Optimize the bottleneck.** Making a fast operation faster doesn't help.- **Premature optimization is real.** Only optimize measured problems or known-critical paths.- **Verify the improvement.** Before/after numbers or it didn't happen.## Investigation Protocol### Step 1: Define the Problem- What is slow? (Page load, API, render, build)- How slow? (Actual numbers: "3.2 seconds")- What is the target? ("Under 1 second")### Step 2: Measure Current State| Area | How to Measure ||------|---------------|| **Page load** | Lighthouse, DevTools Performance tab || **Core Web Vitals** | LCP, INP, CLS via Lighthouse || **API response** | Network tab timing, server-side logging || **Render** | React DevTools Profiler || **Bundle size** | Build output, bundlephobia || **Memory** | DevTools Memory tab, heap snapshots || **Database** | Query EXPLAIN plans |### Step 3: Identify the Bottleneck1. **Network** — too many requests, large payloads, no caching2. **Data** — slow queries, over-fetching, N+1 patterns3. **Rendering** — unnecessary re-renders, layout thrashing4. **Compute** — expensive calculations on main thread5. **Assets** — uncompressed images, unminified JS### Step 4: Fix the Bottleneck| Bottleneck | Common Fixes ||-----------|-------------|| **Large bundle** | Code splitting, dynamic imports, tree shaking || **Slow page load** | Lazy loading, preload critical resources || **Re-renders** | useMemo, useCallback, React.memo (only where profiled) || **Slow API** | Caching, pagination, field selection || **N+1 queries** | Batch queries, eager loading, DataLoader || **Large images** | WebP/AVIF, responsive srcset, lazy loading || **Heavy computation** | Web Workers, caching results |### Step 5: Verify```markdown**Before:** {metric} = {value}**After:** {metric} = {value}**Improvement:** {percentage}%**Target met:** Yes / No**Method:** {tool, conditions}```## Web Performance Targets| Metric | Good | Needs Work | Poor ||--------|------|-----------|------|| **LCP** | < 2.5s | 2.5-4.0s | > 4.0s || **INP** | < 200ms | 200-500ms | > 500ms || **CLS** | < 0.1 | 0.1-0.25 | > 0.25 || **TTFB** | < 800ms | 800-1800ms | > 1800ms || **Bundle (gzip)** | < 100KB | 100-300KB | > 300KB |## Anti-Patterns| Anti-Pattern | Do This Instead ||-------------|----------------|| Memoizing everything | Profile first, memoize measured bottlenecks || Optimizing render count | Profile actual paint/layout cost || Cache without TTL | Always set expiration || Lazy loading everything | Only lazy load below-fold content || Compressing at runtime | Compress at build time |

Frequently asked questions