SkillReview web security, browser compatibility and code quality when fixing audit failures or modernizing a site.
best-practices is an agent skill that helps web developers review and improve security, browser compatibility and code quality. It connects Lighthouse Best Practices findings with changes to source code, dependencies and deployment settings, and covers common problems such as runtime errors, outdated APIs and poor permission prompts.
Ask your coding agent for a best-practices or security review; compatible agents can also select the skill when your request matches. It uses live browser audits when available and falls back to CLI audits and focused checks. Lighthouse results need to be considered alongside dependency, header and source inspection: a high score does not establish application security.
When an audit flags problems on a running page, the skill helps connect those findings to console errors, failed requests and the code responsible. It guides fixes and a repeat audit so you can compare the result under the same conditions.
Before shipping changes, ask for a review of HTTPS, mixed content, security headers, handling of untrusted HTML and cookies. The skill combines source inspection with checks of deployed responses, helping you find gaps that configuration files alone cannot confirm.
When updating libraries or adding externally hosted scripts, use the skill to review dependency vulnerabilities, version pinning and integrity checks. You get specific changes to reduce exposure to vulnerable packages or altered third-party files.
If an older site relies on deprecated APIs or browser-name checks, the skill helps replace brittle patterns with modern APIs, feature detection and appropriate fallbacks. Its compatibility review also covers document declarations, character encoding, viewport settings and polyfill delivery.
When users encounter blank screens or failures that appear only in the console, the skill reviews error handling, unhandled promises and React error boundaries. It helps preserve a usable fallback and capture errors for investigation.
If interactions become sluggish or event listeners remain after components disappear, the skill reviews blocking scripts, touch and wheel handlers, event delegation and cleanup. It helps identify changes that reduce unnecessary work and prevent listeners from accumulating.
When preparing production builds with source maps, use the skill to review how those maps are generated and uploaded. It covers hidden maps and removal of embedded source content so debugging support does not unnecessarily expose original application code.
When a page contains duplicate IDs, invalid nesting, generic markup or stretched images, the skill helps correct the underlying HTML and sizing rules. You get clearer document structure and images that retain their intended proportions.
If a site asks for location or other permissions before users know why, the skill helps move the request to the relevant action and explain its purpose. It also reviews restrictions on browser features such as the camera and microphone.
best-practices is also included in the Web Quality Skills plugin.
Install the full PluginThese routes install best-practices alone from its repository using Skills CLI. Have Node.js 22.20.0 or later available. Skills CLI collects anonymous usage data and sends security-audit requests by default; its telemetry settings explain what is collected and how to opt out.
Run this in a terminal from your project folder to install best-practices.
npx skills add addyosmani/web-quality-skills --skill best-practicesChoose Claude Code if asked for a target. Choose Project for this project or Global for use across projects when the scope prompt appears. If an installation-method prompt appears, choose Symlink or Copy, then check the target and scope in the installation summary before confirming.
In Claude Code, list available skills and look for best-practices.
/skillsChanges in existing skill folders load automatically. If the installer created a top-level skills folder during your session, run the reload command below, then check the list again.
/reload-skillsYou can select the skill directly from the skills menu, or let Claude choose it when your request matches.
Repository installation instructions · Claude Code skill loading and invocation
Run this in a terminal from your project folder to install best-practices.
npx skills add addyosmani/web-quality-skills --skill best-practicesChoose Cursor if asked for a target. Choose Project for this project or Global for use across projects when the scope prompt appears. If an installation-method prompt appears, choose Symlink or Copy, then check the target and scope in the installation summary before confirming.
Restart Cursor so it discovers the installed skill. In Agent chat, type / and search for best-practices.
Selecting the skill attaches it to that message. Cursor can also choose it automatically when it is relevant to your request.
Repository installation instructions · Cursor skill discovery and invocation
Run this in a terminal from your project folder to install best-practices.
npx skills add addyosmani/web-quality-skills --skill best-practicesChoose Codex if asked for a target. Choose Project for this project or Global for use across projects when the scope prompt appears. If an installation-method prompt appears, choose Symlink or Copy, then check the target and scope in the installation summary before confirming.
Check that Codex lists best-practices. In the CLI or IDE extension, use the skills command below; in the desktop app, open Skills in the sidebar.
/skillsCodex detects skill changes automatically; restart it if the skill does not appear. In the CLI or IDE extension, type $ to select a skill; in the desktop app, use @. Codex can also choose the skill when your request matches.
Repository installation instructions · Codex skill discovery and invocation
Run this in a terminal from your project folder to install best-practices.
npx skills add addyosmani/web-quality-skills --skill best-practicesChoose OpenCode if asked for a target. Choose Project for this project or Global for use across projects when the scope prompt appears. If an installation-method prompt appears, choose Symlink or Copy, then check the target and scope in the installation summary before confirming.
In a terminal in the same project folder, list installed skills and check that best-practices appears.
npx skills listThis checks the installer's record. OpenCode loads relevant skills through its skill tool; its documentation does not give a separate skill-list command to confirm availability inside the app.