diff --git a/skills/react-best-practices.zip b/skills/react-best-practices.zip
index f6dfb7a3..810e43e4 100644
Binary files a/skills/react-best-practices.zip and b/skills/react-best-practices.zip differ
diff --git a/skills/react-best-practices/AGENTS.md b/skills/react-best-practices/AGENTS.md
index ed2bab40..4312825c 100644
--- a/skills/react-best-practices/AGENTS.md
+++ b/skills/react-best-practices/AGENTS.md
@@ -528,6 +528,9 @@ export default function RootLayout({ children }) {
**Correct: loads after hydration**
```tsx
+// components/analytics-provider.tsx
+'use client'
+
import dynamic from 'next/dynamic'
const Analytics = dynamic(
@@ -535,12 +538,21 @@ const Analytics = dynamic(
{ ssr: false }
)
+export function AnalyticsProvider() {
+ return
+}
+```
+
+```tsx
+// app/layout.tsx — remains a Server Component
+import { AnalyticsProvider } from '@/components/analytics-provider'
+
export default function RootLayout({ children }) {
return (
{children}
-
+
)
@@ -566,6 +578,8 @@ function CodePanel({ code }: { code: string }) {
**Correct: Monaco loads on demand**
```tsx
+'use client'
+
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
diff --git a/skills/react-best-practices/rules/bundle-defer-third-party.md b/skills/react-best-practices/rules/bundle-defer-third-party.md
index db041d15..c1e46045 100644
--- a/skills/react-best-practices/rules/bundle-defer-third-party.md
+++ b/skills/react-best-practices/rules/bundle-defer-third-party.md
@@ -29,6 +29,9 @@ export default function RootLayout({ children }) {
**Correct (loads after hydration):**
```tsx
+// components/analytics-provider.tsx
+'use client'
+
import dynamic from 'next/dynamic'
const Analytics = dynamic(
@@ -36,12 +39,21 @@ const Analytics = dynamic(
{ ssr: false }
)
+export function AnalyticsProvider() {
+ return
+}
+```
+
+```tsx
+// app/layout.tsx — remains a Server Component
+import { AnalyticsProvider } from '@/components/analytics-provider'
+
export default function RootLayout({ children }) {
return (
{children}
-
+
)
diff --git a/skills/react-best-practices/rules/bundle-dynamic-imports.md b/skills/react-best-practices/rules/bundle-dynamic-imports.md
index 60b62695..c65af765 100644
--- a/skills/react-best-practices/rules/bundle-dynamic-imports.md
+++ b/skills/react-best-practices/rules/bundle-dynamic-imports.md
@@ -22,6 +22,8 @@ function CodePanel({ code }: { code: string }) {
**Correct (Monaco loads on demand):**
```tsx
+'use client'
+
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(