Add 2 more rules (22 total): hydration-safety, caching-revalidation

Author: vibestackdev

.cursor/rules/caching-revalidation.mdc

@@ -0,0 +1,55 @@
+---
+description: Next.js caching and revalidation best practices
+globs: ["**/app/**", "**/lib/**"]
+alwaysApply: false
+---
+
+# Caching & Revalidation
+
+## Default Behavior
+Next.js 15 has specific caching defaults. AI models often get these wrong.
+
+## Rules
+
+### Server Components - Data Fetching
+For dynamic data that changes frequently:
+```typescript
+// Force fresh data on every request
+const data = await fetch(url, { cache: 'no-store' })
+
+// Or revalidate every 60 seconds:
+const data = await fetch(url, { next: { revalidate: 60 } })
+```
+
+### Route Segment Config
+For pages that must always show fresh data:
+```typescript
+// At the top of page.tsx or layout.tsx:
+export const dynamic = 'force-dynamic'  // Never cache this page
+export const revalidate = 0             // Same as above
+```
+
+For static pages that rarely change:
+```typescript
+export const revalidate = 3600  // Revalidate every hour
+```
+
+### Server Actions — Always Revalidate
+After mutations, ALWAYS revalidate affected paths:
+```typescript
+'use server'
+import { revalidatePath } from 'next/cache'
+
+export async function createPost(formData: FormData) {
+  // ... create post in database
+  revalidatePath('/posts')  // ← NEVER forget this
+  revalidatePath('/dashboard')  // ← Revalidate all affected pages
+}
+```
+
+### Anti-Patterns
+- NEVER assume `fetch()` will always return fresh data — check your cache settings
+- NEVER forget `revalidatePath()` after a mutation in a Server Action
+- NEVER use `cache: 'force-cache'` for user-specific data
+- NEVER rely on client-side state to show "updated" data after a mutation — revalidate the server cache
+- ALWAYS use `revalidateTag()` for fine-grained cache invalidation when possible

.cursor/rules/hydration-safety.mdc

@@ -0,0 +1,75 @@
+---
+description: React hydration mismatch prevention
+globs: ["**/*.tsx", "**/*.ts"]
+alwaysApply: false
+---
+
+# Hydration Mismatch Prevention
+
+## The Problem
+Hydration mismatches occur when server-rendered HTML doesn't match the client-rendered output, causing UI flickers, errors, and broken interactivity.
+
+## Common AI Mistakes
+
+### 1. Non-deterministic Values in Render
+❌ WRONG — different value on server vs client:
+```tsx
+export default function Component() {
+  const id = Math.random()  // Different on server vs client!
+  return <div id={`item-${id}`}>Content</div>
+}
+```
+
+✅ CORRECT — use useId() for unique IDs:
+```tsx
+import { useId } from 'react'
+export default function Component() {
+  const id = useId()
+  return <div id={id}>Content</div>
+}
+```
+
+### 2. Browser APIs in Server-Rendered Code
+❌ WRONG — window/document don't exist on server:
+```tsx
+export default function Component() {
+  const width = window.innerWidth  // ReferenceError on server!
+  return <div>{width}</div>
+}
+```
+
+✅ CORRECT — guard with useEffect:
+```tsx
+'use client'
+import { useState, useEffect } from 'react'
+export default function Component() {
+  const [width, setWidth] = useState(0)
+  useEffect(() => { setWidth(window.innerWidth) }, [])
+  return <div>{width}</div>
+}
+```
+
+### 3. Date/Time Rendering
+❌ WRONG — different timezone on server vs client:
+```tsx
+export default function Component() {
+  return <p>{new Date().toLocaleString()}</p>  // Hydration mismatch!
+}
+```
+
+✅ CORRECT — render dates client-side or use consistent formatting:
+```tsx
+'use client'
+import { useState, useEffect } from 'react'
+export default function DateDisplay({ date }: { date: string }) {
+  const [formatted, setFormatted] = useState(date)
+  useEffect(() => { setFormatted(new Date(date).toLocaleString()) }, [date])
+  return <p>{formatted}</p>
+}
+```
+
+## Rule
+- NEVER use Math.random(), crypto.randomUUID(), or Date.now() directly in render
+- NEVER access window, document, localStorage, or navigator without checking typeof window !== 'undefined'
+- Use React.useId() for dynamically generated IDs
+- Wrap browser-only logic in useEffect