Stats
Actions
Tags
From byhris-conventions
Use when writing or editing code that touches window, document, localStorage, timers, Date, random values, or browser-only libraries in by-hris-designs. Use when debugging a hydration mismatch or a blank preview screenshot. Use when verifying animations or page transitions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/byhris-conventions:byhris-ssr-gotchasThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Next.js prerenders every page; this app is client-heavy. These are the established patterns — reuse them instead of inventing new ones.
Next.js prerenders every page; this app is client-heavy. These are the established patterns — reuse them instead of inventing new ones.
Code that depends on the browser renders nothing on the server: ssr: false for whole widgets, a mounted-gate for client-only values.
next/dynamic(() => import('...'), { ssr: false }).useEffect sets mounted. Precedents: Parallax, ThemeToggle, LiveTime._document.tsx applies the stored theme before React mounts. It deliberately duplicates src/lib/theme.ts logic (no imports available there) — keep the two in sync when touching theme resolution.npm run dev are usually not real. Verify via npm run build && npm run start.AnimatePresence mode="wait" in _app.tsx, keyed on router.asPath). Do not propose migrating to the App Router.npx claudepluginhub forressterr/by-hris-designs --plugin byhris-conventionsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.