서버에서 렌더링된 HTML과 클라이언트 측 React 트리 간의 불일치 없는 무결성을 보장합니다. 하이드레이션 오류 디버깅, 텍스트 콘텐츠 불일치 수정, 브라우저 확장 DOM 오염 처리, Suspense로 선택적 하이드레이션 구현, 결정적 서버-클라이언트 데이터 브리지를 위한 React 19 use() 후크 사용 또는 데이터 드리프트 방지를 위해 Next.js 사용 캐시 적용 시 사용합니다. 수화 불일치, SSR, hydrateRoot, 억제HydrationWarning, onRecoverableError, 2패스 렌더링에 사용합니다.
명령줄에서 hydration-guardian AI 스킬을 개발 환경에 빠르게 설치
출처: oakoss/agent-skills.
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, hydrateRoot, 억제HydrationWarning, onRecoverableError, 2패스 렌더링에 사용합니다. 출처: oakoss/agent-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/oakoss/agent-skills --skill hydration-guardian서버에서 렌더링된 HTML과 클라이언트 측 React 트리 간의 불일치 없는 무결성을 보장합니다. 하이드레이션 오류 디버깅, 텍스트 콘텐츠 불일치 수정, 브라우저 확장 DOM 오염 처리, Suspense로 선택적 하이드레이션 구현, 결정적 서버-클라이언트 데이터 브리지를 위한 React 19 use() 후크 사용 또는 데이터 드리프트 방지를 위해 Next.js 사용 캐시 적용 시 사용합니다. 수화 불일치, SSR, hydrateRoot, 억제HydrationWarning, onRecoverableError, 2패스 렌더링에 사용합니다. 출처: oakoss/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/oakoss/agent-skills --skill hydration-guardian 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/oakoss/agent-skills