modern-web-semantic-platform-native

id	modern-web-semantic
name	Modern Web Semantic + Platform-Native
description	legacy workaround を避け、semantic HTML / Web Platform Native API / modern CSS の利用機会を提示する。
version	0.1.0
category	midstream
phase	midstream
applyTo	["src/**/*.{ts,tsx,js,jsx,html,css}","app/**/*.{ts,tsx,js,jsx,html,css}","components/**/*.{ts,tsx,js,jsx,html,css}","pages/**/*.{ts,tsx,js,jsx,html,css}","styles/**/*.css","public/**/*.html"]
tags	["community","modern-web","semantic-html","accessibility","ui","midstream"]
severity	minor
inputContext	["diff"]
outputKind	["findings","actions"]
modelHint	balanced

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 / 根拠の取り方