SkillHelp your coding agent diagnose slow web pages and make performance changes backed by measurements.
Performance is a skill for coding agents working on web projects. It helps connect loading delays, sluggish interactions and inefficient resource delivery to specific changes in your code or assets. Ask your agent to investigate performance; it can select the skill when your request matches its description.
For a runnable page, the skill combines available real-user data with controlled browser measurements to prioritize problems and diagnose their causes. Chrome DevTools MCP is optional: other measurement tools can supply evidence. Without a runnable page, findings remain hypotheses. Checks after a fix can show a lab improvement, but confirming its effect on real users requires new production data.
When visitors wait for the page's main content, several causes can look alike. The skill uses measurements and browser traces to distinguish server delays, blocking scripts and styles, and late-loading images or fonts, then targets the code or assets responsible.
When scrolling, resizing or working with a long list feels sluggish, the skill helps investigate expensive JavaScript and repeated layout work. It can guide changes such as batching layout reads and writes, reducing repeated event handling, or rendering only the visible list content.
Videos, analytics and widgets can add work before visitors need them. The skill helps identify their cost and adjust when they load, including replacing an immediate embed with a lightweight placeholder until someone interacts.
When returning visitors keep downloading unchanged assets, the skill helps review browser and service-worker caching. You get caching changes suited to the resource, with different treatment for HTML, versioned static files and API responses.
When moving between pages feels slow or abrupt, the skill covers prerendering likely destinations and adding view transitions. It also calls for checking browser support and measuring unused downloads and server cost before relying on speculative loading.
A fast local test can coexist with poor real-user performance. The skill helps compare the conditions behind each result and investigate differences in devices, routes, cache states and interactions, so you can focus on the experience that is actually failing.
When a change appears faster, the skill helps compare measurements taken under equivalent conditions. You get before-and-after values with test conditions, variation and remaining uncertainty, while real-user verification stays pending until enough new data arrives.
When you need to see how releases affect visitors, the skill includes guidance for collecting and aggregating Core Web Vitals through your existing monitoring pipeline. It covers release and device comparisons, sampling and privacy; adding a new collection endpoint or changing consent behavior requires authorization.
When you only have source code, the skill can identify likely performance problems without presenting them as measured failures. Each high-impact hypothesis comes with a measurement command or browser workflow that can confirm it once the page is runnable.
When a project needs limits for scripts, styles, images, fonts or third-party resources, the skill provides starting guardrails to calibrate against your target devices, networks and user journeys. Existing project budgets take precedence over its example values.
Performance belongs to Web Quality Skills and can be installed separately using the routes below. For the complete collection, including its Gemini CLI extension, open the full Plugin's install guide.
Install the full PluginThe routes below use the Skills CLI, which requires Node.js 22.20.0 or later. Usage telemetry and security-audit requests are enabled by default; install telemetry can include repository and skill names, target agents and installation scope. To disable both, set the DISABLE_TELEMETRY environment variable to 1 before running the installer. See Skills CLI data collection.
In a terminal, open the project where you want to use Performance and run this command to install the skill from Web Quality Skills.
npx skills add addyosmani/web-quality-skills --skill performanceChoose Claude Code if the installer asks for an agent. When prompted for scope, choose Project for this project or Global for use across projects. If an installation-method prompt appears, choose Symlink or Copy. Check that the installation summary targets Claude Code, then confirm.
In Claude Code, list the available skills and check for performance.
/skillsClaude Code normally picks up changes in its skill directories without restarting. If the installer created a top-level skills directory after your session began, reload skills and check the list again.
/reload-skillsClaude can select Performance for a relevant request, or you can invoke it with /performance. See Claude Code skill loading and invocation.
In a terminal, open the project where you want to use Performance and run this command to install the skill from Web Quality Skills.
npx skills add addyosmani/web-quality-skills --skill performanceChoose Cursor if the installer asks for an agent. When prompted for scope, choose Project for this project or Global for use across projects. If an installation-method prompt appears, choose Symlink or Copy. Check that the installation summary targets Cursor, then confirm.
Restart Cursor so it discovers the installed skill. In Agent chat, type / and search for performance.
Cursor can apply the skill when it is relevant. Selecting it from the slash menu attaches it to one message. See Cursor skill discovery and invocation.
In a terminal, open the project where you want to use Performance and run this command to install the skill from Web Quality Skills.
npx skills add addyosmani/web-quality-skills --skill performanceChoose Codex if the installer asks for an agent. When prompted for scope, choose Project for this project or Global for use across projects. If an installation-method prompt appears, choose Symlink or Copy. Check that the installation summary targets Codex, then confirm.
In Codex CLI or the IDE extension, open the skill list and check for performance. In the desktop app, open Skills in the sidebar instead. Codex detects skill changes automatically; restart it if Performance does not appear.
/skillsCodex can select the skill from a matching request. To select it explicitly, use the skill list or a $ mention in the CLI or IDE extension, or an @ mention in the desktop app. See Codex standalone skills.
In a terminal, open the project where you want to use Performance and run this command to install the skill from Web Quality Skills.
npx skills add addyosmani/web-quality-skills --skill performanceChoose OpenCode if the installer asks for an agent. When prompted for scope, choose Project for this project or Global for use across projects. If an installation-method prompt appears, choose Symlink or Copy. Check that the installation summary targets OpenCode, then confirm.
In the terminal, list installed skills and check for performance.
npx skills listThe installer list confirms installation. OpenCode makes permitted skills available to the model and loads them through its skill tool; its documentation gives no separate command for checking skill availability inside OpenCode.