ccbot-cli 2.0.1 → 2.2.0

package/skills/domains/frontend-design/ui-aesthetics.md

@@ -0,0 +1,110 @@
+# UI 美学
+
+## 色彩理论
+
+### 色彩体系设计
+60-30-10配色法则：主色60%、辅色30%、强调色10%。使用HSL而非RGB便于调整。建立语义化色彩令牌（primary/success/danger）。
+
+```css
+:root {
+  --primary-h: 220;
+  --primary-s: 90%;
+  --primary-l: 50%;
+  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
+  --primary-dark: hsl(var(--primary-h) var(--primary-s) 40%);
+  --primary-light: hsl(var(--primary-h) var(--primary-s) 60%);
+}
+```
+
+## 排版系统
+
+### 排版层级规范
+使用模块化比例（1.25/1.333/1.5）。基准16px，标题用比例放大，正文14-18px。行高1.5-1.8。限制字体族≤3种。
+
+```css
+:root {
+  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
+  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
+}
+body {
+  font-size: var(--fs-base);
+  line-height: 1.6;
+}
+```
+
+## 间距系统
+
+### 8px网格间距体系
+基准8px，建立4/8/12/16/24/32/48/64px间距令牌。组件内用小间距(4-12)，组件间用中间距(16-32)，区块间用大间距(48+)。
+
+```css
+:root {
+  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
+  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
+}
+.stack-sm > * + * { margin-top: var(--sp-2); }
+.stack-md > * + * { margin-top: var(--sp-4); }
+```
+
+## 视觉层次
+
+### 视觉层次四原则
+1. 对比：大小/粗细/颜色差异
+2. 对齐：统一对齐建立秩序
+3. 重复：一致性建立认知
+4. 亲密性：相关元素靠近
+
+## 设计令牌
+
+### Design Token架构
+三层架构：基础令牌(颜色/字号原始值)→语义令牌(primary/heading)→组件令牌(button-bg)。
+
+```css
+:root {
+  --color-gray-50: #f9fafb;
+  --color-gray-900: #111827;
+  --color-primary: var(--color-blue-600);
+  --text-primary: var(--color-gray-900);
+  --bg-surface: white;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+}
+```
+
+## 暗色模式
+
+### 暗色模式设计规范
+背景用深灰(#121212)非纯黑。降低白色文本亮度至#e0e0e0。提升表面层级用更亮灰色。注意色彩对比度WCAG AA。
+
+```css
+:root { --bg: white; --text: #111; }
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #121212; --text: #e0e0e0; }
+}
+[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }
+body { background: var(--bg); color: var(--text); }
+```
+
+## 阴影与层级
+
+### 阴影层级体系
+5级阴影：1-贴地(1px) 2-悬浮(2-4px) 3-浮起(8-12px) 4-弹出(16-24px) 5-模态(24-32px)。
+
+```css
+:root {
+  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-2: 0 2px 4px rgba(0,0,0,0.08);
+  --shadow-3: 0 8px 16px rgba(0,0,0,0.12);
+  --shadow-4: 0 16px 24px rgba(0,0,0,0.16);
+  --shadow-5: 0 24px 32px rgba(0,0,0,0.2);
+}
+```
+
+## 审查清单
+
+- [ ] 色彩对比度≥4.5:1
+- [ ] 字体≤3种
+- [ ] 间距符合8px网格
+- [ ] 视觉层级清晰
+- [ ] 暗色模式适配
+- [ ] 阴影层级合理

package/skills/domains/frontend-design/ux-principles.md

@@ -0,0 +1,156 @@
+# UX 原则
+
+## 可用性
+
+### Nielsen十大可用性原则
+1. 系统状态可见
+2. 系统匹配现实
+3. 用户控制自由
+4. 一致性标准
+5. 防错
+6. 识别优于回忆
+7. 灵活高效
+8. 美学简约
+9. 帮助识别错误
+10. 帮助文档
+
+## 无障碍
+
+### WCAG 2.1速查
+- **可感知**：文本替代、时基媒体、适配性、可辨别
+- **可操作**：键盘、足够时间、无癫痫、导航
+- **可理解**：可读、可预测、输入辅助
+- **健壮**：兼容性
+
+### ARIA标签最佳实践
+```html
+<button aria-label="关闭对话框">
+  <svg aria-hidden="true">...</svg>
+</button>
+<nav aria-label="主导航">
+  <ul role="list">...</ul>
+</nav>
+<div role="alert" aria-live="assertive">错误消息</div>
+```
+
+### 键盘导航支持
+```javascript
+element.addEventListener("keydown", e => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    handleClick();
+  }
+  if (e.key === "Escape") {
+    closeModal();
+  }
+});
+element.setAttribute("tabindex", "0");
+```
+
+## 信息架构
+
+### 信息架构设计模式
+- 层级结构(树形)
+- 顺序结构(线性)
+- 矩阵结构(网格)
+- 数据库结构(标签)
+
+导航深度≤3层，广度5±2项。
+
+## 用户流程
+
+### 用户流程设计原则
+减少步骤、清晰进度、允许跳过、保存状态、提供退出、即时反馈。关键流程≤3步。
+
+## 加载体验
+
+### 骨架屏与加载策略
+优先级：骨架屏>进度条>加载动画>空白。首屏<1s，交互<100ms，加载>1s显示进度。
+
+```css
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+@keyframes loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+```
+
+## 反馈设计
+
+### 用户反馈模式
+- **Toast**(临时提示)
+- **Alert**(重要警告)
+- **Modal**(阻断操作)
+- **Inline**(表单验证)
+
+成功绿、警告黄、错误红、信息蓝。
+
+```css
+.toast {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 1rem 1.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--shadow-4);
+  animation: slideInRight 0.3s ease;
+}
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+```
+
+## 移动端优先
+
+### 移动端设计原则
+触摸目标≥44px、拇指热区、避免悬停、简化导航、减少输入、优化性能、考虑单手操作。
+
+```css
+.btn-touch {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+@media (hover: hover) {
+  .btn-touch:hover {
+    background: var(--primary-dark);
+  }
+}
+```
+
+## 性能感知
+
+### 感知性能优化
+骨架屏、乐观更新、预加载、懒加载、渐进增强。让用户感觉快比实际快更重要。
+
+## 审查清单
+
+- [ ] 符合Nielsen原则
+- [ ] WCAG AA达标
+- [ ] 键盘可访问
+- [ ] 移动端友好
+- [ ] 加载状态清晰
+- [ ] 反馈及时
+
+## 最佳实践
+
+1. 用户优先于技术
+2. 简单优于复杂
+3. 一致性建立信任
+4. 反馈建立信心
+5. 可访问性非可选

package/skills/domains/infrastructure/SKILL.md

@@ -0,0 +1,200 @@
+---
+name: infrastructure
+description: 云原生基础设施。Kubernetes、Helm、Kustomize、Operator、CRD、GitOps、ArgoCD、Flux、IaC、Terraform、Pulumi、CDK。当用户提到 K8s、Helm、GitOps、IaC 时路由到此。
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# 云原生基础设施 · Infrastructure
+
+## 域概览
+
+```
+                    GitOps 控制平面
+                          |
+        +-----------------+-----------------+
+        |                 |                 |
+    ArgoCD/Flux      Kubernetes         IaC 层
+        |                 |                 |
+   Git Repo ------> Helm/Kustomize --> Terraform/Pulumi
+        |                 |                 |
+    声明式配置        容器编排          云资源管理
+```
+
+---
+
+## Kubernetes 容器编排
+
+### Helm Chart 开发
+
+标准结构：`Chart.yaml` + `values.yaml` + `templates/` + `charts/`
+
+核心要点：
+- Chart.yaml：`apiVersion: v2`, dependencies 声明子 Chart（condition 控制启用）
+- values.yaml 设计：image / replicaCount / resources / autoscaling / service / ingress / probes / env / persistence
+- Deployment 模板：使用 `_helpers.tpl` 定义 `fullname` / `labels` / `selectorLabels`
+- 配置校验：`checksum/config: {{ include ... | sha256sum }}` 触发滚动更新
+- 安全上下文：`runAsNonRoot: true, runAsUser: 1000`
+
+关键命令：
+- `helm lint` / `helm template --debug` 验证
+- `helm install -f values-prod.yaml` 部署
+- `helm upgrade --reuse-values` 升级
+- `helm rollback <release> <revision>` 回滚
+- `helm push <chart>.tgz oci://registry` 推送 OCI
+
+### Kustomize 配置管理
+
+目录结构：`base/` + `overlays/{dev,staging,production}/`
+
+核心能力：
+- base/kustomization.yaml：resources / commonLabels / images / configMapGenerator / secretGenerator
+- overlay：namespace / patchesStrategicMerge / patchesJson6902 / replicas / images / configMapGenerator(behavior: merge)
+- 命令：`kubectl apply -k overlays/production` / `kubectl diff -k`
+
+### Operator 模式
+
+- CRD 定义：openAPIV3Schema 声明 spec/status，subresources(status/scale)
+- Controller 核心循环：Get CR → 构建期望状态 → Create/Update 子资源 → 更新 Status
+- OwnerReferences：子资源关联 CR，级联删除
+- 初始化：`operator-sdk init` → `create api` → `make manifests` → `make install`
+
+### 部署策略
+
+| 策略 | 实现方式 | 适用场景 |
+|------|----------|----------|
+| 滚动更新 | `strategy.rollingUpdate` maxSurge/maxUnavailable | 默认策略 |
+| 蓝绿部署 | 两个 Deployment + Service selector 切换 | 零停机切换 |
+| 金丝雀 | stable(9) + canary(1) 共享 Service | 渐进式验证 |
+| Flagger | `Canary` CRD + 自动分析指标 | 自动化金丝雀 |
+
+### K8s Checklist
+
+- [ ] 健康检查：livenessProbe + readinessProbe 必配
+- [ ] 资源限制：requests + limits 防止资源耗尽
+- [ ] HPA：CPU/Memory/自定义指标自动扩缩容
+- [ ] PDB：`minAvailable` 防止滚动更新中断
+- [ ] ResourceQuota + LimitRange：命名空间资源配额
+- [ ] 镜像使用 Digest 确保一致性
+- [ ] Pod 反亲和性分散到不同节点
+- [ ] 密钥外部化：External Secrets Operator
+
+---
+
+## GitOps 持续部署
+
+### ArgoCD vs Flux
+
+| 特性 | ArgoCD | Flux |
+|------|--------|------|
+| Web UI | 功能强大 | 无（可用 Weave GitOps） |
+| 多租户 | Projects + RBAC | 需额外配置 |
+| 多集群 | 原生支持 | 原生支持 |
+| 镜像自动更新 | 需 Image Updater | 原生支持 |
+| 渐进式交付 | Argo Rollouts | Flagger |
+| CNCF | Graduated | Graduated |
+
+### ArgoCD 核心模式
+
+- Application：source(repoURL/path/targetRevision) + destination(server/namespace)
+- syncPolicy：`automated(prune: true, selfHeal: true)` + retry
+- ignoreDifferences：忽略 HPA 修改的 `/spec/replicas`
+- ApplicationSet：Git 目录生成器，一套模板管理多环境
+- 多集群：`argocd cluster add` 注册集群
+- Notifications：ConfigMap 配置 Slack/Email 通知模板
+- Rollouts：`Canary` CRD + steps(setWeight/pause) + AnalysisTemplate(Prometheus 查询)
+
+### Flux 核心模式
+
+- GitRepository：`interval: 1m`, ref branch, secretRef
+- Kustomization：path + prune + healthChecks + postBuild substitute
+- HelmRepository + HelmRelease：chart + values + install/upgrade remediation
+- ImageRepository + ImagePolicy + ImageUpdateAutomation：自动检测新镜像并提交 Git
+
+### 多环境管理
+
+```
+fleet-infra/
+├── clusters/{dev,staging,production}/  # 每集群入口
+├── infrastructure/base + overlays/     # 基础组件
+└── apps/base + overlays/              # 应用配置
+```
+
+### 密钥管理
+
+- Sealed Secrets：`kubeseal` 加密 → 提交 Git → Controller 解密
+- External Secrets Operator：SecretStore(AWS SM) + ExternalSecret → 自动同步
+
+### GitOps Checklist
+
+- [ ] Git 为唯一真相源，所有变更通过 PR
+- [ ] 自动同步 + 自愈（selfHeal）
+- [ ] 密钥加密存储（Sealed Secrets / External Secrets）
+- [ ] 渐进式交付（Rollouts / Flagger）
+- [ ] 多环境目录隔离
+- [ ] 回滚策略：保留历史版本
+
+---
+
+## 基础设施即代码 (IaC)
+
+### 工具对比
+
+| 工具 | 语言 | 状态管理 | 云支持 | 学习曲线 |
+|------|------|----------|--------|----------|
+| Terraform | HCL | 显式(S3/TF Cloud) | 全平台 | 中等 |
+| Pulumi | Python/TS/Go | 自动(Pulumi Cloud) | 全平台 | 较低 |
+| AWS CDK | Python/TS | CloudFormation | AWS | 中等 |
+
+### Terraform 核心模式
+
+项目结构：`modules/{vpc,eks,rds}/` + `environments/{dev,staging,prod}/`
+
+- Provider：版本锁定 `required_providers` + `default_tags`
+- Backend：S3 + DynamoDB 锁 + KMS 加密
+- 模块化：`variable` → `resource` → `output`，环境通过 `module` 引用
+- 远程状态：`data "terraform_remote_state"` 跨模块引用
+- 命令流：`init` → `validate` → `fmt` → `plan -out=tfplan` → `apply tfplan`
+- 状态管理：`state list/show/mv/rm` / `import` 导入现有资源
+- Workspace：`workspace new/select` 多环境隔离
+
+### Pulumi 核心模式
+
+- ComponentResource：自定义资源组（VPC/EKS 封装为类）
+- Config：`pulumi.Config()` 读取 stack 配置
+- Outputs：`pulumi.export()` 导出值
+- 命令：`preview` → `up` → `stack output` / `destroy`
+
+### AWS CDK 核心模式
+
+- Stack：继承 `Stack`，使用 L2 Constructs（`ec2.Vpc` / `eks.Cluster`）
+- 跨 Stack 引用：通过构造函数参数传递
+- 命令：`synth` → `diff` → `deploy --all` / `bootstrap`
+
+### IaC Checklist
+
+- [ ] 模块化：可复用组件抽象为模块
+- [ ] 环境隔离：不同环境不同 State
+- [ ] 远程状态 + 状态锁定
+- [ ] Provider 版本锁定
+- [ ] 密钥管理：Secrets Manager / SSM
+- [ ] 统一资源标签
+- [ ] Plan 后人工审查再 Apply
+- [ ] CI/CD 集成自动化
+
+---
+
+## 最佳实践
+
+| 层级 | 工具选择 | 原则 |
+|------|----------|------|
+| 应用部署 | Helm + Kustomize | 模板化 + 环境差异 |
+| 持续交付 | ArgoCD / Flux | Git 为唯一真相源 |
+| 基础设施 | Terraform / Pulumi | 声明式 + 状态管理 |
+| 配置管理 | External Secrets | 密钥外部化 |
+| 可观测性 | Prometheus + Grafana | 指标 + 可视化 |
+
+## 触发词
+
+Kubernetes、K8s、Helm、Kustomize、Operator、CRD、GitOps、ArgoCD、Flux、IaC、Terraform、Pulumi、CDK、基础设施即代码

package/skills/domains/mobile/SKILL.md

@@ -0,0 +1,224 @@
+---
+name: mobile
+description: 移动开发。iOS、Android、SwiftUI、Jetpack Compose、React Native、Flutter、跨平台。当用户提到移动开发、iOS、Android、跨平台时路由到此。
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# 移动开发域 · Mobile Development
+
+## 域概览
+
+```
+原生开发                    跨平台开发
+├── iOS (SwiftUI/UIKit)     ├── React Native (JS/TS)
+├── Android (Compose/Kotlin) └── Flutter (Dart)
+└── 共通：MVVM / 网络层 / 持久化 / 测试
+```
+
+---
+
+## iOS 开发
+
+### SwiftUI 核心模式
+
+- View 组件：`struct MyView: View { var body: some View { ... } }`
+- State 管理：
+  - `@State` — 本地状态
+  - `@Binding` — 父子双向绑定
+  - `@StateObject` — 拥有 ObservableObject
+  - `@ObservedObject` — 引用 ObservableObject
+  - `@EnvironmentObject` / `@Environment` — 全局注入
+- ObservableObject：`@Published` 属性自动触发 UI 更新
+- Custom ViewModifier：`struct CardModifier: ViewModifier` + `extension View { func cardStyle() }`
+- 生命周期：`.task { await ... }` / `.onAppear` / `.onDisappear`
+
+### UIKit 集成
+
+- UIViewControllerRepresentable：包装 UIViewController 到 SwiftUI
+- UIViewRepresentable：包装 UIView 到 SwiftUI
+- Coordinator 模式：处理 delegate 回调
+- Auto Layout：`NSLayoutConstraint.activate([...])` + `translatesAutoresizingMaskIntoConstraints = false`
+
+### Combine 响应式
+
+- Publisher：`URLSession.shared.dataTaskPublisher` → `map` → `decode` → `eraseToAnyPublisher`
+- 订阅：`.sink(receiveCompletion:receiveValue:)` + `.store(in: &cancellables)`
+- 常用 Operators：`debounce` / `removeDuplicates` / `combineLatest` / `flatMap`
+- Subject：`PassthroughSubject`（无初始值）/ `CurrentValueSubject`（有初始值）
+
+### iOS 架构
+
+MVVM（推荐）：
+- Model：`Codable` 数据结构
+- Repository：`protocol` + `async throws` 方法
+- ViewModel：`@MainActor class VM: ObservableObject` + `@Published` 属性
+- View：`@StateObject private var viewModel = VM()`
+
+VIPER（复杂场景）：
+- View ←→ Presenter ←→ Interactor → Entity
+- Router 处理导航
+
+### 网络层
+
+- APIClient：泛型 `func get<T: Decodable>(_ path:) async throws -> T`
+- Token 管理：`request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")`
+- 错误处理：`enum APIError: Error { case invalidURL, invalidResponse, httpError(Int) }`
+
+### 数据持久化
+
+- UserDefaults：`@propertyWrapper struct UserDefault<T>` 简化访问
+- Keychain：`SecItemAdd` / `SecItemCopyMatching` 存储敏感数据
+- Core Data：`NSPersistentContainer` + `NSManagedObjectContext`
+- SwiftData（iOS 17+）：`@Model` 宏简化持久化
+
+### iOS Checklist
+
+- [ ] SwiftUI 优先，UIKit 按需集成
+- [ ] `@MainActor` 确保 UI 线程安全
+- [ ] async/await 替代回调
+- [ ] 依赖注入提升可测试性
+- [ ] LazyVStack/LazyHStack 优化大列表
+- [ ] 图片缓存（NSCache）减少内存压力
+- [ ] Keychain 存储敏感数据（非 UserDefaults）
+- [ ] 单元测试覆盖 ViewModel + Mock Repository
+
+---
+
+## Android 开发
+
+### Jetpack Compose 核心模式
+
+- Composable：`@Composable fun MyScreen() { ... }`
+- State 管理：
+  - `remember { mutableStateOf(value) }` — 本地状态
+  - `rememberSaveable` — 跨配置变更保存
+  - `derivedStateOf` — 派生状态避免重组
+- LazyColumn：`items(list, key = { it.id })` 提供稳定 key
+- Side Effects：
+  - `LaunchedEffect(key)` — 启动协程
+  - `DisposableEffect(key)` — 清理资源（onDispose）
+  - `SideEffect` — 同步状态到外部
+  - `snapshotFlow { state }` — 监听状态变化转 Flow
+- Navigation：`NavHost` + `composable(route)` + `navController.navigate()`
+- Custom Modifier：`fun Modifier.myModifier(): Modifier = composed { ... }`
+
+### ViewModel + StateFlow
+
+- StateFlow（推荐替代 LiveData）：
+  - `MutableStateFlow(UiState())` + `.asStateFlow()`
+  - `_uiState.update { it.copy(isLoading = true) }`
+  - Compose 中：`val uiState by viewModel.uiState.collectAsState()`
+- UiState data class：封装 loading / error / data
+
+### Kotlin Coroutines & Flow
+
+- 协程：`viewModelScope.launch { withContext(Dispatchers.IO) { ... } }`
+- 并发：`coroutineScope { val a = async { ... }; val b = async { ... } }`
+- Flow：`flow { emit(value) }` + `.flowOn(Dispatchers.IO)`
+- StateFlow：`.stateIn(scope, SharingStarted.WhileSubscribed(5000), initial)`
+- 搜索防抖：`searchQuery.debounce(300).filter { it.isNotEmpty() }.flatMapLatest { ... }`
+- Channel：`Channel<Event>(BUFFERED)` + `.receiveAsFlow()` 一次性事件
+
+### 依赖注入 (Hilt)
+
+- `@HiltAndroidApp` Application + `@AndroidEntryPoint` Activity
+- `@Module @InstallIn(SingletonComponent::class)` 提供依赖
+- `@Provides @Singleton` 提供实例 / `@Binds` 绑定接口
+- ViewModel：`@HiltViewModel class VM @Inject constructor(repo)` + `hiltViewModel()`
+
+### Room 数据库
+
+- Entity：`@Entity(tableName)` + `@PrimaryKey` + `@ColumnInfo`
+- DAO：`@Query` / `@Insert(onConflict = REPLACE)` / `@Delete` + 返回 `Flow<List<T>>`
+- Database：`@Database(entities, version)` + `Room.databaseBuilder`
+
+### 网络层 (Retrofit)
+
+- ApiService：`@GET` / `@POST` / `@Path` / `@Query` / `@Body` / `@Multipart`
+- Interceptor：AuthInterceptor 注入 Bearer Token
+- OkHttpClient：`addInterceptor` + `connectTimeout`
+
+### Android Checklist
+
+- [ ] Compose 优先，View 系统按需使用
+- [ ] StateFlow 替代 LiveData
+- [ ] Hilt 依赖注入
+- [ ] Room 本地持久化
+- [ ] `key` 参数优化 LazyColumn
+- [ ] `remember` / `derivedStateOf` 避免过度重组
+- [ ] Coil 图片加载 + 缓存策略
+- [ ] 单元测试覆盖 ViewModel（runTest + advanceUntilIdle）
+
+---
+
+## 跨平台开发
+
+### React Native vs Flutter
+
+| 维度 | React Native | Flutter |
+|------|--------------|---------|
+| 语言 | TypeScript | Dart |
+| 渲染 | 原生组件(桥接) | 自绘引擎(Skia) |
+| 性能 | 接近原生 | 接近原生 |
+| 热重载 | Fast Refresh | Hot Reload |
+| 生态 | npm（成熟） | pub.dev（快速增长） |
+| UI 一致性 | 跟随系统 | 完全一致 |
+| 包体积 | ~7MB | ~15MB |
+
+### React Native 核心模式
+
+- 组件：函数组件 + Hooks（useState / useEffect / useCallback / useMemo）
+- 列表：`FlatList` + `keyExtractor` + `initialNumToRender` + `windowSize`
+- Navigation：`@react-navigation/native` + `createNativeStackNavigator`
+- 状态管理：Redux Toolkit（`createSlice` + `createAsyncThunk`）/ Zustand
+- 原生桥接：`NativeModules` 调用 iOS(Swift) / Android(Kotlin) 原生代码
+- 性能：`React.memo` / Hermes 引擎 / 新架构 JSI（无桥接序列化）
+
+### Flutter 核心模式
+
+- Widget：StatelessWidget / StatefulWidget + `setState`
+- 状态管理：
+  - Provider：`ChangeNotifier` + `Consumer` / `context.watch`
+  - Riverpod（推荐）：`FutureProvider` / `StateNotifierProvider` + `ref.watch`
+- Navigation：go_router（`GoRoute` + `context.go/push/pop`）
+- 原生桥接：`MethodChannel` + Platform Channels（iOS Swift / Android Kotlin）
+- 性能：`const` 构造函数 / `ListView.builder` / `RepaintBoundary` / `ValueKey`
+
+### 选型建议
+
+| 场景 | 推荐 | 理由 |
+|------|------|------|
+| 团队有 Web 背景 | React Native | 学习成本低 |
+| 追求极致性能/动画 | Flutter | 自绘引擎 60fps |
+| UI 高度定制 | Flutter | 完全控制渲染 |
+| 大量原生交互 | React Native | 桥接生态成熟 |
+| 需要原生极致体验 | 原生开发 | 无桥接开销 |
+
+### 跨平台 Checklist
+
+- [ ] 选型匹配团队技术栈和业务需求
+- [ ] 列表优化：FlatList(RN) / ListView.builder(Flutter) + key
+- [ ] 状态管理：Redux Toolkit(RN) / Riverpod(Flutter)
+- [ ] 原生模块桥接方案验证
+- [ ] 包体积优化：ProGuard(Android) / tree-shake-icons(Flutter)
+- [ ] 性能基线：冷启动 < 1.5s / 渲染 > 55fps
+
+---
+
+## 通用最佳实践
+
+| 实践 | 说明 |
+|------|------|
+| MVVM 架构 | 分离 UI / 业务逻辑 / 数据层 |
+| 依赖注入 | Hilt(Android) / Protocol(iOS) / Context(RN) |
+| 响应式状态 | StateFlow / Combine / Hooks / Riverpod |
+| 网络层封装 | 统一错误处理 + Token 管理 + 重试 |
+| 本地持久化 | Room / Core Data / AsyncStorage / Hive |
+| 列表优化 | 懒加载 + 稳定 key + 缓存 |
+| 测试覆盖 | ViewModel 单元测试 + UI 测试关键流程 |
+
+## 触发词
+
+iOS、SwiftUI、UIKit、Combine、Android、Jetpack Compose、Kotlin、React Native、Flutter、跨平台、移动开发、MVVM