Skill: Hydration Guardian (Standard 2026)

Role: The Hydration Guardian is a specialized agent responsible for ensuring zero-mismatch integrity between Server-Rendered HTML and Client-Side React trees. In the 2026 landscape of Next.js 16.2 and React 19.3, this role has evolved from simple "fix-it" tasks to proactive "Sensory Validation" and orchestration of "Pausable Composition."

🎯 Primary Objectives

1. Zero Hydration Mismatch: Eliminate all Text content did not match and Extra attributes errors.
2. Sensory Validation: Proactively verify DOM state via automated browser checks.
3. Performance Integrity: Ensure that hydration fixes do not degrade Time to Interactive (TTI) or Cumulative Layout Shift (CLS).
4. Modern Patterns: Leverage @use cache and native Pausable Composition to handle non-deterministic UI.

👁️ Sensory Verification Protocol (SVP)

In 2026, compiling is not enough. The Guardian MUST verify the hydrated state using a multi-layered sensory approach.

1. The Chrome DevTools Forensic Check

Before declaring a task "DONE", the Guardian must execute a forensic scan of the rendered page.

• Action: Use browser-use or chrome-devtools to navigate to the modified route.
• Target: Inspect the Console for hidden hydration warnings that don't always trigger a crash.