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.
npx skills add s977043/river-review --skill modern-web-performancegit clone --depth 1 https://github.com/s977043/river-reviewWrote 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.
[](https://agentmods.dev/skills/s977043/river-review/modern-web-performance)<a href="https://agentmods.dev/skills/s977043/river-review/modern-web-performance"><img src="https://agentmods.dev/badge/skills/s977043/river-review/modern-web-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.
<a href="https://agentmods.dev/skills/s977043/river-review/modern-web-performance"><img src="https://agentmods.dev/badge/skills/s977043/river-review/modern-web-performance.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.01889 |
| Opus 5.5 | $0.00019 | $0.00756 |
| Sonnet 5.5 | $0.00010 | $0.00378 |
| Haiku 4.5 | $0.00005 | $0.00189 |
Grade A, and why
Modern Web Performance + Core Web Vitals scanned grade A with 0 findings 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 1mo 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Goal / 目的
- フロントエンド差分が LCP / INP / CLS や読み込みコストへ与える影響を、診断可能な形で示す。
- 「測ってない最適化」を促すのではなく、今書かれているコードが既知の遅延・ジャンクパターンかを suggestion として返す。
- 出力は強制ではなく、計測 / プロファイリングの起点を提示する材料にとどめる。
Non-goals / 扱わないこと
- 実測値（Lighthouse / Real-User Metrics）の数値検証。
- bundler 設定や依存ライブラリ選定の議論。
- backend / DB / network 帯域起因のパフォーマンス問題（別エピックの対象）。
- マイクロベンチマーク的な「より速い書き方」の最適化合戦。
False-positive guards / 抑制条件
- すでに
loading="lazy"/fetchpriority/decoding属性などが指定されている画像は指摘しない。 - 既存コードのリファクタを跨ぐ変更（命名変更・型注釈追加）で副作用のない差分は指摘しない。
- A/B テスト・実験コード・dev-only コードと明示されている領域は対象外。
- パフォーマンスポリシーが
.river/rules.mdや README で明示されている場合はその方針に従う（過剰指摘の抑制）。
Rule / ルール
LCP (Largest Contentful Paint)
- ヒーロー画像 / 主要 visual には
fetchpriority="high"とdecoding="async"の検討を促す。 - above-the-fold の画像に
loading="lazy"が誤って付いていないか確認する。 - リクエスト連鎖（CSS → JS → font → image）が増える変更では preconnect / preload の検討を提案する。
- web font の差し替えでは
font-display: swap/ 適切な fallback の有無を確認する。
INP (Interaction to Next Paint)
- click / input ハンドラに同期的な重い処理（JSON.parse の大規模ループ、
document.querySelectorAll全 traversal）を追加していないか確認する。 - raf / scroll / resize ハンドラに直接 DOM 操作を入れる差分は throttle /
requestIdleCallback/ passive listener の検討を提案する。 - React の場合は
useMemo/useCallbackではなく、そもそも該当ハンドラが render path に乗らない構造を優先的に検討する。
CLS (Cumulative Layout Shift)
- 画像 / iframe / video / placeholder に明示的な
width/heightまたはaspect-ratioを指定する変更を促す。 - 後から injection される広告 / バナー / banner / Toast UI でレイアウトが跳ねないよう min-height や reserved space の確保を検討する。
- web font 切り替えで text reflow が起きる可能性を指摘し、
size-adjust/ 適切な fallback metrics の検討を提案する。
リソースコスト
- 大きな
<img>を縮小表示している場合、レスポンシブ画像 (srcset/sizes) や AVIF / WebP の検討を提案する。 - 新規 npm パッケージを import している差分は、tree-shaking 可否 / バンドルサイズの確認を suggestion で示す（実測値は別レビュー）。
import …で大きなライブラリを top-level に持ち込む変更には dynamic import の検討余地を伝える。
Evidence / 根拠の取り方
- 差分のコードを引用し、どの行がどの Core Web Vital に影響しうるかを示す。
- 該当する仕様 / MDN ドキュメントを 1 つ挙げる（例: "img loading attribute", "Performance Observer", "View Transitions API"）。
- 既に対策属性が付与されている場合の抑制条件を満たさないことを明示する。
What ships with it
8 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.
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.
- 1mo ago First seen · 113 lines · 48 tokens per session scan A 938d56927b0d
Modern Web Performance + Core Web Vitals is a skill published in the GitHub repository s977043/river-review (7 stars, last pushed yesterday), licensed MIT. It adds 48 tokens to every session and 1,889 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
logic-review
Find logic bugs in a single file or function via semi-formal execution tracing (Premises → Trace → Divergence → Trigger → Remedy). Trigger when a user shares code and suspects something is wrong without naming a concrete failure — phrases like "review this", "does this look right", "check this function", "audit this…
logic-fix-all
Autonomous repository-wide audit-and-fix pipeline: health → review → locate/explain → fix → diff-verify → iterate until clean. Starts with a mandatory consent prompt (token-intensive); after consent runs hands-free. Trigger when the user wants ALL logic issues found and fixed — "fix everything", "fix all logic…
logic-health
Sweep a directory, module, or full codebase for logic correctness and produce a scored health dashboard with systemic patterns. Trigger when the user requests a health view — "audit the whole codebase", "health check", "health overview", "logic health overview", "audit src/", "audit auth and payments modules", "where…
run-iteration-eval
Run the Logic-Lens content-eval pipeline for one iteration and produce a scored summary.json — use to measure a skill change. Wraps scripts/run-content-evals.sh (runner, costs tokens) and scripts/grade-iteration.py (grader, free, re-runnable). ALWAYS sync the plugin cache first. Use when the user wants to "run the…
sync-skill-cache
Sync the Logic-Lens working-copy skills/ into the installed plugin cache so content-evals test the EDITED skill, not the last published one. ALWAYS run this after editing any skills//SKILL.md or guide/shared file and BEFORE running content-evals — otherwise the eval silently grades stale content and every token is…
bump-version
Bump the Logic-Lens version across all six metadata locations at once (package.json, the four plugin manifests, and the README badge), then validate. Use when cutting a release or when npm run validate reports a version mismatch.