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-semanticgit 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-semantic)<a href="https://agentmods.dev/skills/s977043/river-review/modern-web-semantic"><img src="https://agentmods.dev/badge/skills/s977043/river-review/modern-web-semantic/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-semantic"><img src="https://agentmods.dev/badge/skills/s977043/river-review/modern-web-semantic.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.00032 | $0.01749 |
| Opus 5.5 | $0.00013 | $0.00700 |
| Sonnet 5.5 | $0.00006 | $0.00350 |
| Haiku 4.5 | $0.00003 | $0.00175 |
Grade A, and why
Modern Web Semantic + Platform-Native 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 — 106 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Goal / 目的
- generic な JS / CSS 実装が「セマンティクスを失った車輪の再発明」になっていないかを検出する。
- semantic HTML / Web Platform Native API / modern CSS の利用機会があれば、より少ないコードで同じ結果が得られる選択肢を提示する。
- 出力は「強制」ではなく「検討してほしい代替案」として suggestion 扱いにする。
Non-goals / 扱わないこと
- ブラウザ互換性のフル評価（Baseline / Can I Use 表の機械的読み取り）。
- フロントエンドフレームワーク選定や状態管理ライブラリの議論。
- パフォーマンス計測値（LCP / INP）の数値検証。
- 既存コードの大規模リファクタ提案（差分の範囲内のみ）。
False-positive guards / 抑制条件
- 既に
<dialog>/<details>/<summary>などの semantic 要素を使っている箇所は指摘しない。 - ライブラリ提供のコンポーネント (
<Dialog>,<Popover>, ...) は内部実装の選択を尊重し、差分でその利用方法だけが変わった場合は指摘しない。 - 古いブラウザサポート（IE11 / Safari < 15 など）が
.river/rules.mdや README に明示されているリポジトリでは指摘を抑制してよい。 - 差分が typo 修正・rename・import 整理のみで意味的変化を伴わない場合は指摘しない。
Rule / ルール
Semantic-first
- click ハンドラ付きの generic 要素 (
<div onClick>,<span onClick>) は、<button>/<a>/<label>などの semantic 要素を検討する。 - ヘッダー / フッター / ナビ / 主要コンテンツ領域は、
role属性より<header>/<footer>/<nav>/<main>を優先する。 - 開閉可能なコンテンツは custom toggle より
<details>/<summary>の利用を検討する。
Platform-native API
- modal / dialog 実装では
<dialog>要素とshowModal()/close()API を検討する（focus trap / inert / top-layer が無償で得られる）。 - tooltip / popover では Popover API (
popover属性 +popovertarget) と Anchor Positioning の利用機会に触れる。 - form validation は HTML 標準の
required/pattern/:invalid/:user-invalidを起点にし、JS 実装は補強にとどめる。
Modern CSS
- レスポンシブ実装で要素サイズに依存する場合は Container Queries (
@container) を検討する。 - subgrid / grid の出番がある領域で過剰な flex ネストを行っていないか確認する。
- アニメーションでは
view-transition, CSS transitions,prefers-reduced-motionを検討し、JS 駆動の差分計算に頼らない方法があれば触れる。
Evidence / 根拠の取り方
- 差分のコードスニペットを引用し、どの行がどの代替に対応するかを示す。
- 提示する API / プロパティの MDN / W3C / WHATWG 規格名を 1 つ挙げる（例: "HTML
<dialog>element", "Popover API", "CSS Container Queries"）。 - 抑制条件（既存の semantic 利用 / ライブラリコンポーネント）に該当しないことを明示する。
Heuristics / 判定の手がかり
onClick/onKeyDown/tabIndexを手で組み合わせている generic 要素。position: fixed+ 自前 z-index 管理で modal っぽい振る舞いをしている要素。useEffectの中でgetBoundingClientRectを取って位置計算している tooltip / popover。addEventListener('resize'|'scroll', ...)で要素サイズに応じてスタイルを切り替えるレイアウト。setInterval/requestAnimationFrameで位置や寸法をアニメートしている箇所。
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 · 106 lines · 32 tokens per session scan A 8a1c28de110d
Modern Web Semantic + Platform-Native is a skill published in the GitHub repository s977043/river-review (7 stars, last pushed yesterday), licensed MIT. It adds 32 tokens to every session and 1,749 once invoked, about $0.0001 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
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", or "vs best practices".
tailwind-css
Tailwind CSS v4 patterns: CSS-first config, utility classes, component variants, v3 migration. Use when styling with Tailwind, configuring @theme tokens, using tailwind-variants/CVA, migrating v3 to v4, or fixing Tailwind styles and dark mode.
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…
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…
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.
iterate-skill
Run the Logic-Lens skill-improvement loop end to end — baseline → diagnose failures → edit → sync cache → re-eval → verify net gain → iterate until clean. Use whenever the goal is to RAISE a skill's eval score or fix a failing eval mode: "improve logic-review", "the format compliance is failing, fix it", "iterate on…