sumulige-claude 1.4.1 → 1.5.1

package/.claude/rules/web-design-standard.md

@@ -0,0 +1,207 @@
+# Web 设计标准
+
+> 定义什么是好的设计，而非仅提供资源
+
+## 核心哲学
+
+```
+"Visual design is not about expressing yourself.
+ The key thing is the information you're trying to get across."
+                                        — Garry Tan (YC CEO)
+```
+
+**奥卡姆剃刀**：能删则删。文字、线条、边框——如果移除不影响含义，就移除它。
+
+## 三大铁律
+
+| 铁律 | 含义 | 检查方式 |
+|------|------|----------|
+| **对比 = 重要性** | 粗/大/色 = 重要 | 如果都粗，就都不粗 |
+| **接近 = 相关性** | 靠近的被感知为一组 | 相关内容放一起 |
+| **视觉层级** | 对比 + 接近 = 导航路标 | 眯眼测试：第一眼看哪？ |
+
+## 设计决策流程
+
+```
+需求 → 信息层级 → 排版 → 颜色 → 间距 → 交互 → 验证
+```
+
+### Step 1: 信息层级
+
+```
+问自己：
+1. 用户必须看到什么？（主标题）
+2. 用户应该看到什么？（副标题、CTA）
+3. 用户可能看到什么？（详情、辅助）
+4. 什么可以删除？（装饰、冗余）
+```
+
+### Step 2: 排版系统
+
+| 元素 | 规则 |
+|------|------|
+| **字号** | 使用模块化标度 (1.25 / 1.333 / 1.414) |
+| **行高** | 正文 1.4-1.6，标题 1.1-1.3 |
+| **行长** | 45-75 字符，max-width + padding |
+| **单位** | rem/em，永不 px（除 1px 边框） |
+
+```scss
+// 模块化标度示例
+$scale: 1.25;
+$base: 1rem;
+
+$text-sm: $base / $scale;      // 0.8rem
+$text-base: $base;              // 1rem
+$text-lg: $base * $scale;       // 1.25rem
+$text-xl: $base * $scale * $scale; // 1.5625rem
+```
+
+### Step 3: 颜色系统
+
+| 原则 | 说明 |
+|------|------|
+| **克制** | 2-3 主色 + 中性色 |
+| **深灰非纯黑** | 正文用 #333 而非 #000 |
+| **对比度** | WCAG AA 最低 4.5:1 |
+| **语义化** | 成功/警告/错误 一致 |
+
+### Step 4: 间距系统
+
+```scss
+// 8px 基础单位
+$space-1: 0.25rem;  // 4px
+$space-2: 0.5rem;   // 8px
+$space-3: 0.75rem;  // 12px
+$space-4: 1rem;     // 16px
+$space-6: 1.5rem;   // 24px
+$space-8: 2rem;     // 32px
+$space-12: 3rem;    // 48px
+$space-16: 4rem;    // 64px
+```
+
+**90% 情况**：网格 + padding/margin + 好标题 + 对比 = 足够
+
+### Step 5: 交互状态
+
+| 状态 | 必须有 |
+|------|--------|
+| **默认** | 基础样式 |
+| **悬停** | hover 反馈 |
+| **焦点** | focus-visible:ring |
+| **激活** | active 按下感 |
+| **禁用** | disabled 视觉弱化 |
+| **加载** | 骨架屏 / 进度 |
+
+## 反模式检查
+
+| 反模式 | 信号 | 正确做法 |
+|--------|------|----------|
+| **装饰过度** | 渐变+阴影+圆角+动画 | 每个元素只用一种强调 |
+| **AI 审美** | Inter + 蓝紫渐变 + 16px 圆角 | 建立独特品牌 |
+| **信息过载** | 首屏塞满内容 | 留白是设计元素 |
+| **一致性缺失** | 3 种按钮样式 | 组件库 + 设计令牌 |
+| **忽视移动端** | 桌面优先 | 移动优先 |
+
+## 组件标准
+
+### 导航栏 (Navbar)
+
+```
+✅ 固定高度 (56-64px)
+✅ Logo 左侧
+✅ 主导航居中或右侧
+✅ CTA 按钮突出
+✅ 移动端汉堡菜单
+```
+
+### 英雄区 (Hero)
+
+```
+✅ 一句话价值主张
+✅ 副标题解释
+✅ 明确 CTA
+✅ 留白充足
+❌ 轮播图 (用户不看)
+```
+
+### 表单 (Form)
+
+```
+✅ 标签在输入框上方
+✅ 实时验证
+✅ 错误信息在字段下方
+✅ 移除不必要字段
+❌ 占位符替代标签
+❌ 冒号 (:) 后缀
+```
+
+### 卡片 (Card)
+
+```
+✅ 清晰边界 (边框或阴影)
+✅ 内容层级 (标题 > 描述 > 操作)
+✅ 一致间距
+❌ 过多操作按钮
+```
+
+## 与现有 Skills 的关系
+
+```
+web-design-standard.md (本文件)
+├── 定义原则和标准
+└── 引用以下 Skills 执行具体任务：
+
+/skills/web-design-guidelines
+├── Vercel Web Interface Guidelines
+├── 用于：UI 代码审查
+└── 触发："/review my UI"
+
+/skills/react-best-practices
+├── 45 条 React/Next.js 性能规则
+├── 用于：组件代码优化
+└── 触发：性能问题
+
+/skills/threejs-fundamentals
+├── 3D 场景/相机/渲染器
+├── 用于：数据可视化
+└── 触发：3D 图表需求
+```
+
+## 审查输出格式
+
+```
+【眯眼测试】
+第一眼看到：[元素]
+期望第一眼：[元素] → ✅匹配 / ❌不匹配
+
+【层级检查】
+- 主层级：[是否清晰]
+- 次层级：[是否区分]
+- 视觉噪音：[可删除项]
+
+【对比度】
+- 正文：[比值] → ✅ / ❌
+- 链接：[比值] → ✅ / ❌
+
+【一致性】
+- 间距：[8px 倍数?]
+- 字号：[模块化标度?]
+- 颜色：[系统化?]
+
+【移动端】
+- 触摸目标：≥44px?
+- 行长：合理?
+- 可读性：字号?
+```
+
+## 资源索引
+
+| 类型 | 推荐 |
+|------|------|
+| **导航栏** | bentogrids.com |
+| **标题** | h1gallery.com |
+| **CTA** | cta.gallery |
+| **页脚** | footer.design |
+| **404** | 404s.design |
+| **图标** | icoon.co |
+| **原型** | framer.com |

package/.claude/settings.json

@@ -51,7 +51,20 @@
       ]
     }
   ],
-  "PreToolUse": [],
+  "PreToolUse": [
+    {
+      "matcher": {
+        "tool_name": "^(Write|Edit)$"
+      },
+      "hooks": [
+        {
+          "type": "command",
+          "command": "node \"$CLAUDE_PROJECT_DIR\"/.claude/hooks/plan-gate.cjs",
+          "timeout": 2000
+        }
+      ]
+    }
+  ],
   "PostToolUse": [
     {
       "matcher": {
@@ -62,6 +75,11 @@
           "type": "command",
           "command": "node \"$CLAUDE_PROJECT_DIR\"/.claude/hooks/code-formatter.cjs",
           "timeout": 5000
+        },
+        {
+          "type": "command",
+          "command": "node \"$CLAUDE_PROJECT_DIR\"/.claude/hooks/live-quality.cjs",
+          "timeout": 3000
         }
       ]
     }

package/.claude/settings.local.json

@@ -135,7 +135,17 @@
       "Bash(CLAUDE_PROJECT_DIR=\"/Users/sumulige/Documents/Antigravity/sumulige-claude\" /opt/homebrew/Cellar/node/25.3.0/bin/node .claude/hooks/memory-saver.cjs)",
       "Bash(du:*)",
       "Bash(wc:*)",
-      "Bash(/Users/sumulige/.local/share/fnm/node-versions/v24.3.0/installation/bin/node /Users/sumulige/.local/share/fnm/node-versions/v24.3.0/installation/lib/node_modules/npm/bin/npm-cli.js test)"
+      "Bash(/Users/sumulige/.local/share/fnm/node-versions/v24.3.0/installation/bin/node /Users/sumulige/.local/share/fnm/node-versions/v24.3.0/installation/lib/node_modules/npm/bin/npm-cli.js test)",
+      "Bash(npx skills add:*)",
+      "Bash(npx --version)",
+      "WebFetch(domain:api.github.com)",
+      "Bash(xargs:*)",
+      "Bash(CLAUDE_PROJECT_DIR=\"/Users/sumulige/Documents/Antigravity/sumulige-claude\" CLAUDE_TOOL_NAME=\"Write\" CLAUDE_TOOL_INPUT='{\"\"file_path\"\":\"\"/tmp/test.js\"\"}' /opt/homebrew/Cellar/node/25.3.0/bin/node:*)",
+      "Bash(CLAUDE_PROJECT_DIR=\"/Users/sumulige/Documents/Antigravity/sumulige-claude\" CLAUDE_TOOL_NAME=\"Write\" CLAUDE_TOOL_INPUT='{\"\"file_path\"\":\"\"/Users/sumulige/Documents/Antigravity/sumulige-claude/lib/commands.js\"\"}' /opt/homebrew/Cellar/node/25.3.0/bin/node /Users/sumulige/Documents/Antigravity/sumulige-claude/.claude/hooks/live-quality.cjs)",
+      "Bash(CLAUDE_PROJECT_DIR=\"/Users/sumulige/Documents/Antigravity/sumulige-claude\" CLAUDE_TOOL_NAME=\"Write\" CLAUDE_TOOL_INPUT='{\"\"file_path\"\":\"\"/tmp/test-flow.js\"\"}' /opt/homebrew/Cellar/node/25.3.0/bin/node:*)",
+      "Bash(CLAUDE_PROJECT_DIR=\"/Users/sumulige/Documents/Antigravity/sumulige-claude\" CLAUDE_TOOL_NAME=\"Edit\" CLAUDE_TOOL_INPUT='{\"\"file_path\"\":\"\"/Users/sumulige/Documents/Antigravity/sumulige-claude/.claude/hooks/plan-gate.cjs\"\"}' /opt/homebrew/Cellar/node/25.3.0/bin/node:*)",
+      "Bash(/opt/homebrew/Cellar/node/25.3.0/bin/npm version 1.5.0 --no-git-tag-version)",
+      "Bash(/opt/homebrew/Cellar/node/25.3.0/bin/npm version 1.5.1 --no-git-tag-version)"
     ]
   },
   "hooks": {
@@ -145,7 +155,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "node .claude/hooks/conversation-recorder.cjs user \"$ARGUMENTS\""
+            "command": "cd \"$CLAUDE_PROJECT_DIR\" && node .claude/hooks/conversation-recorder.cjs user \"$ARGUMENTS\""
           }
         ]
       }
@@ -156,7 +166,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "node .claude/hooks/conversation-recorder.cjs today"
+            "command": "cd \"$CLAUDE_PROJECT_DIR\" && node .claude/hooks/conversation-recorder.cjs today"
           }
         ]
       }

package/.claude/skills/react-best-practices/SKILL.md

@@ -0,0 +1,125 @@
+---
+name: vercel-react-best-practices
+description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
+license: MIT
+metadata:
+  author: vercel
+  version: "1.0.0"
+---
+
+# Vercel React Best Practices
+
+Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Refactoring existing React/Next.js code
+- Optimizing bundle size or load times
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
+| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
+| 3 | Server-Side Performance | HIGH | `server-` |
+| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
+| 5 | Re-render Optimization | MEDIUM | `rerender-` |
+| 6 | Rendering Performance | MEDIUM | `rendering-` |
+| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
+| 8 | Advanced Patterns | LOW | `advanced-` |
+
+## Quick Reference
+
+### 1. Eliminating Waterfalls (CRITICAL)
+
+- `async-defer-await` - Move await into branches where actually used
+- `async-parallel` - Use Promise.all() for independent operations
+- `async-dependencies` - Use better-all for partial dependencies
+- `async-api-routes` - Start promises early, await late in API routes
+- `async-suspense-boundaries` - Use Suspense to stream content
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+- `bundle-barrel-imports` - Import directly, avoid barrel files
+- `bundle-dynamic-imports` - Use next/dynamic for heavy components
+- `bundle-defer-third-party` - Load analytics/logging after hydration
+- `bundle-conditional` - Load modules only when feature is activated
+- `bundle-preload` - Preload on hover/focus for perceived speed
+
+### 3. Server-Side Performance (HIGH)
+
+- `server-cache-react` - Use React.cache() for per-request deduplication
+- `server-cache-lru` - Use LRU cache for cross-request caching
+- `server-serialization` - Minimize data passed to client components
+- `server-parallel-fetching` - Restructure components to parallelize fetches
+- `server-after-nonblocking` - Use after() for non-blocking operations
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+- `client-swr-dedup` - Use SWR for automatic request deduplication
+- `client-event-listeners` - Deduplicate global event listeners
+
+### 5. Re-render Optimization (MEDIUM)
+
+- `rerender-defer-reads` - Don't subscribe to state only used in callbacks
+- `rerender-memo` - Extract expensive work into memoized components
+- `rerender-dependencies` - Use primitive dependencies in effects
+- `rerender-derived-state` - Subscribe to derived booleans, not raw values
+- `rerender-functional-setstate` - Use functional setState for stable callbacks
+- `rerender-lazy-state-init` - Pass function to useState for expensive values
+- `rerender-transitions` - Use startTransition for non-urgent updates
+
+### 6. Rendering Performance (MEDIUM)
+
+- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element
+- `rendering-content-visibility` - Use content-visibility for long lists
+- `rendering-hoist-jsx` - Extract static JSX outside components
+- `rendering-svg-precision` - Reduce SVG coordinate precision
+- `rendering-hydration-no-flicker` - Use inline script for client-only data
+- `rendering-activity` - Use Activity component for show/hide
+- `rendering-conditional-render` - Use ternary, not && for conditionals
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+- `js-batch-dom-css` - Group CSS changes via classes or cssText
+- `js-index-maps` - Build Map for repeated lookups
+- `js-cache-property-access` - Cache object properties in loops
+- `js-cache-function-results` - Cache function results in module-level Map
+- `js-cache-storage` - Cache localStorage/sessionStorage reads
+- `js-combine-iterations` - Combine multiple filter/map into one loop
+- `js-length-check-first` - Check array length before expensive comparison
+- `js-early-exit` - Return early from functions
+- `js-hoist-regexp` - Hoist RegExp creation outside loops
+- `js-min-max-loop` - Use loop for min/max instead of sort
+- `js-set-map-lookups` - Use Set/Map for O(1) lookups
+- `js-tosorted-immutable` - Use toSorted() for immutability
+
+### 8. Advanced Patterns (LOW)
+
+- `advanced-event-handler-refs` - Store event handlers in refs
+- `advanced-use-latest` - useLatest for stable callback refs
+
+## How to Use
+
+Read individual rule files for detailed explanations and code examples:
+
+```
+rules/async-parallel.md
+rules/bundle-barrel-imports.md
+rules/_sections.md
+```
+
+Each rule file contains:
+- Brief explanation of why it matters
+- Incorrect code example with explanation
+- Correct code example with explanation
+- Additional context and references
+
+## Full Compiled Document
+
+For the complete guide with all rules expanded: `AGENTS.md`