agentmods.dev

frontend-performance

frontend-performance is a skill for Claude Code from ssheleg/sheleg-dev. It costs 84 tokens per session (3,668 once invoked), scanned A, original, MIT.

A guide for making websites load and respond faster. It covers measurements such as Lighthouse scores and Core Web Vitals, which are Google's main real-user indicators for loading, interaction, and layout stability.

In plain words
What is it for?
Use it to audit pages, diagnose render-blocking files and large bundles, improve loading and interaction, fix layout shifts, and verify performance after changes.
Why use it?
It connects slow-page measurements to likely code causes and suggests a process for prioritizing fixes. This helps avoid optimizing blindly or confusing lab-only metrics with real-user metrics.

Skill for Claude Code

Written for Claude Code: PreToolUse hook event. Also seen: mentions Claude Code; mentions Codex.

Part of the sheleg-dev plugin — 7 skills, 1 hook shipped together

not rated 4repo changed 12d ago A scan 84 tokens original MIT

Good fit Use it to audit pages, diagnose render-blocking files and large bundles, improve loading and interaction, fix layout shifts, and verify performance after changes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ssheleg/sheleg-dev/frontend-performance
View source ↗ ssheleg/sheleg-dev skills.sshlg.me
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add ssheleg/sheleg-dev --skill frontend-performance
Clone the repo
git clone --depth 1 https://github.com/ssheleg/sheleg-dev

Made for: Claude Code.

Or install sheleg-dev, the plugin that ships this one along with the rest of its 7 skills, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for frontend-performance

README.md
[![agentmods](https://agentmods.dev/badge/skills/ssheleg/sheleg-dev/frontend-performance/github.svg)](https://agentmods.dev/skills/ssheleg/sheleg-dev/frontend-performance)
Your own site
<a href="https://agentmods.dev/skills/ssheleg/sheleg-dev/frontend-performance"><img src="https://agentmods.dev/badge/skills/ssheleg/sheleg-dev/frontend-performance/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for frontend-performance

Your own site · 80×15
<a href="https://agentmods.dev/skills/ssheleg/sheleg-dev/frontend-performance"><img src="https://agentmods.dev/badge/skills/ssheleg/sheleg-dev/frontend-performance.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 84 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,668 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00084 $0.03668
Opus 5.5 $0.00034 $0.01467
Sonnet 5.5 $0.00017 $0.00734
Haiku 4.5 $0.00008 $0.00367

Measured 12d ago against content hash 55732bbce357, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-performance scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Asks for rootlowPrivilege escalation

A mod that escalates privileges can change anything on the machine, not only the project.

(WebDriver; `sudo safaridriver --enable` once) for a real browser, Playwright's

Downgraded: this mod is about security review, or the phrase is quoted, so it is likely naming the pattern rather than instructing it.

plugins/sheleg-dev/skills/frontend-performance/SKILL.md · 229 lines

How it starts

The opening of the file, as written. The whole thing — 229 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Performance

Optimize frontend applications for maximum Lighthouse scores and real-user performance. This skill covers the technical performance layer -- for how it looks, see sheleg-design; for what the interface must do, see super-ux.

Audit Workflow

  1. Measure -- Run PageSpeed Insights or Lighthouse (Chromium) and load the same scenario in WebKit first (see Test browser below). Record scores, failing audits and the engine of each number.
  2. Diagnose -- Map each failing audit to a specific code-level cause (see checklist below).
  3. Prioritize -- Fix by impact: P0 blocks rendering, P1 hurts metrics, P2 is informational.
  4. Implement -- Apply fixes per the reference guides.
  5. Validate -- next build (or framework equivalent) + re-run Lighthouse and the WebKit run. Verify no regressions in either engine.

Test browser — WebKit (Safari) first

Load and profile the page in WebKit first: Safari through safaridriver (WebDriver; sudo safaridriver --enable once) for a real browser, Playwright's webkit (the webkit project, --browser webkit, installed with npx playwright install webkit) for scripted runs and traces, Safari Web Inspector's Timelines for debugging. On macOS open a page with open -a Safari <url>, not the system default browser, which may be another engine. An automation library (browser-use and the like) runs on its WebKit/Safari backend where it has one. WebKit has the narrowest support envelope of the big three — a regression that only iOS Safari users feel is invisible to every Chrome tool below.

Lighthouse, PageSpeed Insights, CrUX, a CDP trace and the chrome-devtools MCP are Chromium by definition — they stay in this workflow as the stated Chromium exception: use them when the task needs Chrome itself, and say which and why. Prefer the Chrome Dev build for a Chrome run you start; give it a temporary profile (never the user's), record what you started, and close every process you started before you finish. A page checked only in Chromium is reported as "checked only in Chromium", never as "tested in a browser"; a Lighthouse score is a Chrome lab number, not a cross-browser verdict.

Read the full file on GitHub · 229 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago Changed · +1 lines · -29 tokens per session 55732bbce357
  2. 17d ago Changed · -89 tokens per session 2092fefd26d1
  3. 19d ago Changed · +22 lines 6da640069caa
  4. 1mo ago Changed · +11 lines f4c3882395a2
  5. 1mo ago Changed · +28 lines acfcc84e984d
  6. 2mo ago Changed · +1 lines 2116f5413396
  7. 2mo ago First seen · 166 lines · 202 tokens per session scan A f963aed70c37

Subscribe to this mod's changes

frontend-performance is a skill published in the GitHub repository ssheleg/sheleg-dev (4 stars, last pushed 4d ago), licensed MIT. It adds 84 tokens to every session and 3,668 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 1 finding (asks for root). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Analytics and metricsDebuggingFrontendagent-skillsconsent-modecrypto-paymentssentrystripe
Related

frontend-performance compared with skills from other repositories

frontend-performance next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
frontend-performancessheleg/sheleg-devSkill44d agoMITA84Claude Code
strip-demospeedpy/speedpySkill8215d agoMITA49Claude Code
integration-rule-engineaozyildirim/AgenaSkill10328d agoMITA67Claude Code, Codex
analytics-and-monitoringkws-projects/react-boilerplateSkill35mo agoMITA0Cursor
error-monitoringzebbern/termstackSkill46mo agononeA59Claude Code, Codex
log-error-digestzebbern/claude-code-guideSkill4.7k3d agoMITA71Claude Code, Codex
cwv-optimizeradobe/skillsSkill319yesterdayApache-2.0A112Claude Code