docs(vercel-react-best-practices): 添加 Vercel React 最佳实践规则文档

- 添加 sections 定义文件，包含性能优化各领域分类
- 添加规则模板文件，规范文档结构和标签定义
- 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等
- 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等
- 添加服务端性能优化规则，包括 API 路

.agents/skills/vercel-react-best-practices/rules/rerender-derived-state.md

@@ -0,0 +1,29 @@
+---
+title: Subscribe to Derived State
+impact: MEDIUM
+impactDescription: reduces re-render frequency
+tags: rerender, derived-state, media-query, optimization
+---
+
+## Subscribe to Derived State
+
+Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+
+**Incorrect (re-renders on every pixel change):**
+
+```tsx
+function Sidebar() {
+  const width = useWindowWidth()  // updates continuously
+  const isMobile = width < 768
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+}
+```
+
+**Correct (re-renders only when boolean changes):**
+
+```tsx
+function Sidebar() {
+  const isMobile = useMediaQuery('(max-width: 767px)')
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+}
+```