Performance Optimization Engineering Skill
Measure, diagnose, and verify fixes for frontend, backend, query, and database performance bottlenecks.
The skill requires measurement before optimization and includes verification and regression safeguards. No malware, credential theft, covert exfiltration, or destructive default behavior is evident; however, it does not specify least privilege, user confirmation, sensitive performance-data handling, external data flows, rollback, or dependency security, so points are deducted.
The workflow and symptom-based branches are generally self-consistent, with examples spanning frontend, backend, databases, and common anti-patterns. However, it relies on Lighthouse, web-vitals, APM, npx tools, and project frameworks without installation prerequisites, abnormal-input handling, failure feedback, or skill-specific tests. Static review caps this at 10, and the evidence does not justify a higher score.
Trigger conditions, scenarios, and the evidence requirement against premature optimization are reasonably clear, covering page, interaction, API, and database performance issues. Inputs, output boundaries, non-fit cases, and environment requirements remain incomplete, with no Chinese-language support or mainland-China reachability statement, so points are deducted.
The document has clear structure, including overview, triggers, progressive workflow, examples, budgets, anti-patterns, red flags, and verification criteria. The repository provides an MIT license, maintainer information, and CI installation validation. However, the skill lacks versioning, changelog, skill-specific dependency notes, troubleshooting, and a clearly defined update path; its referenced checklist is not included in the supplied material, so points are deducted.
The measure-identify-fix-verify-guard workflow and examples for N+1 queries, pagination, images, React rerenders, code splitting, and caching can directly guide common performance work. However, results depend on project context, tools, and real measurements, and no representative execution results or comparative evidence against alternatives are provided. Static review caps this at 7, and human verification remains necessary, so points are deducted.
The skill provides explicit metrics, thresholds, and verification checks; repository CI validates skill content, installation, and evaluation scripts. However, the supplied test fixture is unrelated to this skill, and no skill-specific performance tests, real execution results, or independent corroboration are shown. Static review caps this at 5, so points are deducted.
- Do not apply caching, code splitting, preloading, or database changes without a baseline, representative traffic, and a rollback plan.
- Revalidate the example tools, frameworks, thresholds, and dependencies against the project versions, regional network conditions, and real-user data.
- The skill references references/performance-checklist.md, which was not supplied; confirm that it exists and is consistent before use.
What does this skill do, and when should you use it?
This is the performance-optimization skill in the agent-skills repository, intended for projects with performance requirements, reported slowness, or suspected regressions. It requires a baseline and evidence-based bottleneck identification before recommending or applying changes, followed by remeasurement and regression protection. The skill covers Core Web Vitals, frontend and backend profiling, N+1 queries, pagination, image delivery, React rerenders, code splitting, and caching. It is a good fit for teams that need measurable performance work, but not for speculative micro-optimization without evidence.
Guides an agent to establish baselines with Lighthouse, the Chrome DevTools Performance panel, Chrome DevTools MCP, web-vitals, CrUX, APM, database query logs, and simple timing; diagnose bottlenecks from page-load, interaction, navigation, or API symptoms; inspect waterfalls, long tasks, component rendering, queries, indexes, connection pools, memory, CPU, caching, and external dependencies; apply or recommend fixes such as pagination, joined queries, responsive images, lazy loading, code splitting, and caching; use bundlesize and Lighthouse CI for budget checks; and verify before-and-after measurements, Core Web Vitals, query behavior, builds, tests, and monitoring.
- A frontend team sees LCP, INP, or CLS below target and needs to distinguish image, resource, JavaScript, or layout causes.
- A backend developer sees slow API responses and needs to investigate N+1 queries, missing indexes, caching, connection pools, or CPU usage.
- A team is building a feature for large datasets or high traffic and needs pagination, performance budgets, and repeatable checks.
- A team suspects a recent change caused a regression and needs before-and-after measurements plus CI or monitoring safeguards.
What are this skill's strengths and limitations?
- Covers frontend, backend, query, and database performance scenarios.
- Provides explicit Core Web Vitals thresholds, performance budgets, and verification checks.
- Includes concrete anti-patterns and examples for N+1 queries, pagination, images, React, code splitting, and caching.
- Requires evidence, including before-and-after measurements and a combination of synthetic and real-user data where applicable.
- The detailed performance checklist is referenced but not included; it must be loaded from references/performance-checklist.md.
- Examples depend on specific tools and ecosystems, including Lighthouse, web-vitals, React, database clients, bundlesize, and Lighthouse CI, without documenting every integration path.
- The source provides no test suite, benchmark results, or measured platform coverage.
- Budgets and example thresholds must be evaluated against the project; they are not universal guarantees.
How do you install this skill?
Install only this skill with the skills CLI:
npx skills add addyosmani/agent-skills --skill performance-optimization
You can browse the repository's skills first:
npx skills add addyosmani/agent-skills --list
The README also documents collection installation for Claude Code, Cursor, Antigravity CLI, Gemini CLI, Windsurf, OpenCode, GitHub Copilot, Kiro, and Codex. The supplied material gives the command above as the explicit single-skill installation example.
How do you use this skill?
Trigger it when performance requirements exist, users report slow behavior, Core Web Vitals miss thresholds, a regression is suspected, or a feature handles large datasets or high traffic. Example: "Analyze this page's LCP and INP, establish a baseline, identify the bottleneck, apply a fix, and report before-and-after measurements." Follow the stated sequence: measure, identify, fix, verify, and guard. Do not use it for optimization without evidence of a problem.
How does this skill compare with similar options?
The README explicitly names Superpowers and Matt Pocock's skills as comparison points and links to docs/comparison.md, but the supplied material does not include that document's conclusions.