hydration-guardian

Ensures zero-mismatch integrity between server-rendered HTML and client-side React trees. Covers hydration error diagnosis, selective hydration via Suspense boundaries, deterministic data bridges with the React 19 use() hook, 'use cache' for eliminating data drift, two-pass rendering for client-only content, React 19's single-diff hydration error reporting for pinpointing exact mismatches, and automated validation...

When to use: Debugging hydration mismatch errors, fixing text content mismatches, handling browser extension DOM pollution, implementing deterministic data bridges, optimizing SSR/client hydration performance, setting up error monitoring with onRecoverableError.

When NOT to use: Client-only React applications without SSR, static sites without hydration, API-only backends.

サーバーでレンダリングされた HTML とクライアント側の React ツリー間の不一致ゼロの整合性を保証します。ハイドレーション エラーのデバッグ、テキスト コンテンツの不一致の修正、ブラウザ拡張機能の DOM 汚染の処理、Suspense による選択的ハイドレーションの実装、決定論的なサーバーからクライアントへのデータ ブリッジに React 19 use() フックを使用する場合、またはデータ ドリフト防止に Next.js 使用キャッシュを適用する場合に使用します。ハイドレーションの不一致、SSR、水和物ルート、suppressHydrationWarning、onRecoverableError、2 パス レンダリングに使用します。 ソース: oakoss/agent-skills。