@mison/ag-kit-cn 2.0.1

package/.agent/skills/frontend-design/visual-effects.md

@@ -0,0 +1,383 @@
+# 视觉效果参考（Visual Effects Reference）
+
+> 现代 CSS 视觉效果的原则与技术：先理解概念，再做场景化变化。
+> **不要复制固定参数，重点是掌握模式（patterns）。**
+
+---
+
+## 1. 玻璃拟态原则（Glassmorphism Principles）
+
+### 玻璃拟态为什么成立（What Makes Glassmorphism Work）
+
+```
+关键属性：
+├── 半透明背景（不是纯实色）
+├── 背景模糊（backdrop blur，磨砂玻璃感）
+├── 轻边框（定义边界）
+└── 常见搭配：轻阴影增强层次
+```
+
+### 模式（Pattern，可自定义参数）
+
+```css
+.glass {
+  /* 透明度：按内容可读性调整 */
+  background: rgba(R, G, B, OPACITY);
+  /* OPACITY：深背景常用 0.1-0.3，浅背景常用 0.5-0.8 */
+
+  /* 模糊：越高越“磨砂” */
+  backdrop-filter: blur(AMOUNT);
+  /* AMOUNT：8-12px 较克制，16-24px 更明显 */
+
+  /* 边框：用于定义边界 */
+  border: 1px solid rgba(255, 255, 255, OPACITY);
+  /* OPACITY：常见 0.1-0.3 */
+
+  /* 圆角：与设计系统一致 */
+  border-radius: YOUR_RADIUS;
+}
+```
+
+### 何时使用玻璃拟态（When to Use Glassmorphism）
+- ✅ 叠在彩色/图片背景上。
+- ✅ Modal、Overlay、Card 等浮层组件。
+- ✅ 背后有滚动内容的导航条。
+- ❌ 文本密集内容区（可读性风险）。
+- ❌ 纯色简背景场景（收益很低）。
+
+### 何时不应使用（When NOT to Use）
+- 低对比度场景。
+- 无障碍要求非常高的核心信息区。
+- 性能受限设备。
+
+---
+
+## 2. 新拟态原则（Neomorphism Principles）
+
+### 新拟态为什么成立（What Makes Neomorphism Work）
+
+```
+核心：使用“双阴影（DUAL shadows）”制造柔和浮雕感
+├── 亮阴影（模拟光源方向）
+├── 暗阴影（反向）
+└── 背景色与父容器一致（same color）
+```
+
+### 模式（The Pattern）
+
+```css
+.neo-raised {
+  /* 背景必须与父容器一致 */
+  background: SAME_AS_PARENT;
+
+  /* 双阴影：亮向 + 暗向 */
+  box-shadow:
+    OFFSET OFFSET BLUR rgba(light-color),
+    -OFFSET -OFFSET BLUR rgba(dark-color);
+
+  /* OFFSET：常见 6-12px */
+  /* BLUR：常见 12-20px */
+}
+
+.neo-pressed {
+  /* inset 形成“按下去”效果 */
+  box-shadow:
+    inset OFFSET OFFSET BLUR rgba(dark-color),
+    inset -OFFSET -OFFSET BLUR rgba(light-color);
+}
+```
+
+### 无障碍提醒（Accessibility Warning）
+⚠️ **对比度通常偏低**，要克制使用并确保边界清晰。
+
+### 适用场景（When to Use）
+- 装饰性元素。
+- 轻交互状态反馈。
+- 扁平底色的极简 UI。
+
+---
+
+## 3. 阴影层级原则（Shadow Hierarchy Principles）
+
+### 概念：阴影代表“海拔”（elevation）
+
+```
+海拔越高，阴影越大
+├── Level 0：无阴影（贴在表面）
+├── Level 1：轻阴影（微抬起）
+├── Level 2：中阴影（卡片、按钮）
+├── Level 3：大阴影（弹窗、下拉）
+└── Level 4：深阴影（漂浮元素）
+```
+
+### 阴影可调参数（Shadow Properties to Adjust）
+
+```css
+box-shadow: OFFSET-X OFFSET-Y BLUR SPREAD COLOR;
+
+/* Offset：阴影方向 */
+/* Blur：柔和程度（越大越软） */
+/* Spread：扩散范围 */
+/* Color：通常是低透明度黑色 */
+```
+
+### 自然阴影原则（Principles for Natural Shadows）
+
+1. **Y-offset 大于 X-offset**（符合上方光源直觉）。
+2. **透明度控制**（5-15% 克制，15-25% 更明显）。
+3. **多层阴影**更真实（环境光 + 直射光）。
+4. **偏移越大，模糊也应越大**。
+
+### 深色模式阴影（Dark Mode Shadows）
+- 深背景下阴影可见性更弱。
+- 可适度提高透明度。
+- 或改用 glow/highlight 做层次。
+
+---
+
+## 4. 渐变原则（Gradient Principles）
+
+### 渐变类型与场景（Types and When to Use）
+
+| 类型（Type） | 形式（Pattern） | 场景（Use Case） |
+|--------------|-----------------|------------------|
+| **Linear** | 颜色 A → 颜色 B 线性过渡 | 背景、按钮、标题区 |
+| **Radial** | 从中心向外扩散 | 聚焦、光斑 |
+| **Conic** | 围绕中心旋转过渡 | 饼图、创意效果 |
+
+### 如何做和谐渐变（Creating Harmonious Gradients）
+
+```
+优质渐变规则：
+├── 优先使用相邻色（analogous）
+├── 或同色相的明度变化
+├── 避免直接互补色硬拼（容易刺眼）
+└── 增加中间停点让过渡更平滑
+```
+
+### 渐变语法模式（Gradient Syntax Pattern）
+
+```css
+.gradient {
+  background: linear-gradient(
+    DIRECTION,           /* 角度或 to-关键词 */
+    COLOR-STOP-1,        /* 颜色 + 可选位置 */
+    COLOR-STOP-2,
+    /* ... more stops */
+  );
+}
+
+/* DIRECTION 示例： */
+/* 90deg, 135deg, to right, to bottom right */
+```
+
+### Mesh 渐变（Mesh Gradients）
+
+```
+多个径向渐变叠加：
+├── 每个渐变位于不同位置
+├── 每个渐变都有透明衰减
+├── Hero 区常用于制造“Wow”感
+└── 可形成有机彩色氛围（可搜索：Aurora Gradient CSS）
+```
+
+---
+
+## 5. 边框效果原则（Border Effects Principles）
+
+### 渐变边框（Gradient Borders）
+
+```
+技术路线：伪元素 + 渐变背景
+├── 元素 padding 作为边框厚度
+├── 伪元素铺满渐变
+└── 通过 mask/clip 实现“只显示边框”
+```
+
+### 动态边框（Animated Borders）
+
+```
+技术路线：旋转渐变或锥形扫描（conic sweep）
+├── 伪元素略大于内容
+├── 动画旋转渐变
+└── 用 overflow hidden 裁切形状
+```
+
+### 发光边框（Glow Borders）
+
+```css
+/* 多层 box-shadow 叠加发光 */
+box-shadow:
+  0 0 SMALL-BLUR COLOR,
+  0 0 MEDIUM-BLUR COLOR,
+  0 0 LARGE-BLUR COLOR;
+
+/* 每一层都在增强发光范围 */
+```
+
+---
+
+## 6. 发光效果原则（Glow Effects Principles）
+
+### 文字发光（Text Glow）
+
+```css
+text-shadow:
+  0 0 BLUR-1 COLOR,
+  0 0 BLUR-2 COLOR,
+  0 0 BLUR-3 COLOR;
+
+/* 层数越多，发光越强 */
+/* 模糊越大，扩散越柔 */
+```
+
+### 元素发光（Element Glow）
+
+```css
+box-shadow:
+  0 0 BLUR-1 COLOR,
+  0 0 BLUR-2 COLOR;
+
+/* 使用与元素相近的颜色更自然 */
+/* 低透明度偏克制，高透明度偏霓虹 */
+```
+
+### 脉冲发光动画（Pulsing Glow Animation）
+
+```css
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 SMALL-BLUR COLOR; }
+  50% { box-shadow: 0 0 LARGE-BLUR COLOR; }
+}
+
+/* 动画曲线与时长共同决定体感 */
+```
+
+---
+
+## 7. 覆盖层技术（Overlay Techniques）
+
+### 图片渐变遮罩（Gradient Overlay on Images）
+
+```
+目的：提升图上文字可读性
+模式：从透明渐变到不透明
+位置：对准文字出现区域
+```
+
+```css
+.overlay::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    DIRECTION,
+    transparent PERCENTAGE,
+    rgba(0,0,0,OPACITY) 100%
+  );
+}
+```
+
+### 彩色遮罩（Colored Overlay）
+
+```css
+/* Blend mode 或分层渐变 */
+background:
+  linear-gradient(YOUR-COLOR-WITH-OPACITY),
+  url('image.jpg');
+```
+
+---
+
+## 8. 现代 CSS 技术（Modern CSS Techniques）
+
+### 容器查询（Container Queries, Concept）
+
+```
+区别于 viewport 断点：
+├── 组件响应“自己的容器”
+├── 更模块化、可复用
+└── 语法：@container (condition) { }
+```
+
+### `:has()` 选择器（Concept）
+
+```
+基于子元素反向影响父元素样式：
+├── “包含某类子元素的父元素”
+├── 能实现以往难做的模式
+└── 建议走渐进增强（progressive enhancement）
+```
+
+### 滚动驱动动画（Scroll-Driven Animations, Concept）
+
+```
+动画进度绑定滚动：
+├── 元素进入/退出动画
+├── 视差效果（parallax）
+├── 进度指示器
+└── 可用 view-based 或 scroll-based timeline
+```
+
+---
+
+## 9. 性能原则（Performance Principles）
+
+### GPU 友好属性（GPU-Accelerated Properties）
+
+```
+低成本动画（GPU）：
+├── transform（translate、scale、rotate）
+└── opacity
+
+高成本动画（CPU）：
+├── width、height
+├── top、left、right、bottom
+├── margin、padding
+└── box-shadow（需要重复计算）
+```
+
+### `will-change` 使用建议（will-change Usage）
+
+```css
+/* 仅在重动画场景、且克制使用 */
+.heavy-animation {
+  will-change: transform;
+}
+
+/* 动画结束后可移除，避免长期占用优化资源 */
+```
+
+### 减少动态（Reduced Motion）
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* 禁用或显著减弱动画 */
+  /* 尊重用户系统偏好 */
+}
+```
+
+---
+
+## 10. 效果选型检查清单（Effect Selection Checklist）
+
+应用任何视觉效果前：
+
+- [ ] **是否有明确目的？**（不是纯装饰）
+- [ ] **是否符合场景语境？**（品牌、受众）
+- [ ] **是否区别于上一个项目？**（避免重复）
+- [ ] **是否无障碍友好？**（对比、动效敏感）
+- [ ] **是否性能可控？**（尤其移动端）
+- [ ] **是否询问过用户偏好？**（当风格开放时）
+
+### 反模式（Anti-Patterns）
+
+- ❌ 所有元素都套 Glassmorphism（廉价感/杂乱感）。
+- ❌ 默认深色 + 霓虹（典型 AI 模板化风格）。
+- ❌ **纯静态/纯平面且缺乏层次（FAILED）**。
+- ❌ 效果损害文字可读性。
+- ❌ 无意义动画。
+
+---
+
+> **记住（Remember）**：视觉效果应“强化信息语义”。基于目的与上下文选择，而不是只因为“看起来很酷”。

package/.agent/skills/game-development/2d-games/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: 2d-games
+description: 2D 游戏开发原则。Sprite（精灵）、Tilemap（瓦片地图）、物理、摄像机。
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# 2D 游戏开发
+
+> 2D 游戏系统的原则。
+
+---
+
+## 1. 精灵系统
+
+### 精灵组织
+
+| 组件 | 用途 |
+|-----------|---------|
+| **Atlas（图集）** | 合并贴图，减少绘制调用 |
+| **Animation（动画）** | 帧序列 |
+| **Pivot（枢轴）** | 旋转/缩放的原点 |
+| **Layering（分层）** | Z 顺序控制 |
+
+### 动画原则
+
+- 帧率：常见 8-24 FPS
+- 挤压与拉伸增强冲击感
+- 动作前要有预备
+- 动作后要有收势
+
+---
+
+## 2. 瓦片地图设计
+
+### 瓦片要点
+
+| 因素 | 建议 |
+|--------|----------------|
+| **尺寸** | 16x16、32x32、64x64 |
+| **自动拼接（Auto-tiling）** | 用于地形 |
+| **碰撞** | 使用简化形状 |
+
+### 图层
+
+| 图层 | 内容 |
+|-------|---------|
+| 背景 | 非交互场景 |
+| 地形 | 可行走地面 |
+| 物件 | 可交互对象 |
+| 前景 | 视差覆盖 |
+
+---
+
+## 3. 2D 物理
+
+### 碰撞形状
+
+| 形状 | 使用场景 |
+|-------|----------|
+| Box | 矩形对象 |
+| Circle | 球形、圆角 |
+| Capsule | 角色 |
+| Polygon | 复杂形状 |
+
+### 物理要点
+
+- 像素级碰撞 vs 物理驱动
+- 固定时间步长保证一致性
+- 使用分层过滤
+
+---
+
+## 4. 摄像机系统
+
+### 摄像机类型
+
+| 类型 | 用途 |
+|------|-----|
+| **Follow（跟随）** | 跟随玩家 |
+| **Look-ahead（前瞻）** | 预判移动 |
+| **Multi-target（多目标）** | 双人视角 |
+| **Room-based（房间制）** | 类银河城 |
+
+### 屏幕抖动
+
+- 短时长（50-200ms）
+- 强度递减
+- 克制使用
+
+---
+
+## 5. 类型模式
+
+### 平台跳跃（Platformer）
+
+- Coyote time（离边宽容时间）
+- 跳跃缓冲
+- 可变跳跃高度
+
+### 俯视角（Top-down）
+
+- 8 方向或自由移动
+- 目标锁定或自动瞄准
+- 是否需要旋转
+
+---
+
+## 6. 反模式
+
+| ❌ 不要做 | ✅ 推荐 |
+|----------|-------|
+| 分离贴图 | 使用图集 |
+| 复杂碰撞形状 | 使用简化碰撞 |
+| 抖动镜头 | 平滑跟随 |
+| 物理与像素混用 | 选定一种方案 |
+
+---
+
+> **记住：** 2D 讲究清晰，每个像素都应传达信息。

package/.agent/skills/game-development/3d-games/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: 3d-games
+description: 3D 游戏开发原则。渲染（Rendering）、着色器（Shader）、物理（Physics）、相机（Camera）。
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# 3D 游戏开发
+
+> 3D 游戏系统的原则。
+
+---
+
+## 1. 渲染管线（Rendering Pipeline）
+
+### 阶段
+
+```
+1. Vertex Processing → Transform geometry
+2. Rasterization → Convert to pixels
+3. Fragment Processing → Color pixels
+4. Output → To screen
+```
+
+### 优化原则
+
+| 技术 | 用途 |
+|-----------|---------|
+| **视锥裁剪（Frustum culling）** | 不渲染屏幕外区域 |
+| **遮挡裁剪（Occlusion culling）** | 不渲染被遮挡部分 |
+| **LOD（Level of Detail）** | 距离远时降低细节 |
+| **批处理（Batching）** | 合并绘制调用 |
+
+---
+
+## 2. 着色器原则（Shader Principles）
+
+### 着色器类型
+
+| 类型 | 用途 |
+|------|---------|
+| **顶点（Vertex）** | 位置、法线 |
+| **片元/像素（Fragment/Pixel）** | 颜色、光照 |
+| **计算（Compute）** | 通用计算 |
+
+### 何时编写自定义着色器
+
+- 特效（水、火、传送门）
+- 风格化渲染（Toon、Sketch）
+- 性能优化
+- 独特视觉风格
+
+---
+
+## 3. 3D 物理（3D Physics）
+
+### 碰撞体形状
+
+| 形状 | 使用场景 |
+|-------|----------|
+| **盒体（Box）** | 建筑、箱体 |
+| **球体（Sphere）** | 球、快速检测 |
+| **胶囊体（Capsule）** | 角色 |
+| **网格（Mesh）** | 地形（成本高） |
+
+### 原则
+
+- 碰撞体用简单形状，视觉用复杂模型
+- 分层过滤（Layer-based filtering）
+- 视线检测用射线（Raycasting）
+
+---
+
+## 4. 相机系统（Camera Systems）
+
+### 相机类型
+
+| 类型 | 用途 |
+|------|-----|
+| **第三人称（Third-person）** | 动作、冒险 |
+| **第一人称（First-person）** | 沉浸、FPS |
+| **等距（Isometric）** | 策略、RPG |
+| **轨道（Orbital）** | 检视、编辑器 |
+
+### 相机手感
+
+- 平滑跟随（lerp）
+- 碰撞回避（Collision avoidance）
+- 运动前瞻（Look-ahead）
+- 用 FOV 变化体现速度
+
+---
+
+## 5. 光照（Lighting）
+
+### 光源类型
+
+| 类型 | 用途 |
+|------|-----|
+| **方向光（Directional）** | 太阳、月亮 |
+| **点光（Point）** | 灯、火把 |
+| **聚光（Spot）** | 手电、舞台 |
+| **环境光（Ambient）** | 基础照明 |
+
+### 性能考量
+
+- 实时阴影开销大
+- 尽量烘焙（Bake）
+- 大场景用级联阴影（Shadow cascades）
+
+---
+
+## 6. 细节层级（LOD）
+
+### LOD 策略
+
+| 距离 | 模型 |
+|----------|-------|
+| 近 | 全细节 |
+| 中 | 50% 三角形 |
+| 远 | 25% 或看板（billboard） |
+
+---
+
+## 7. 反模式（Anti-Patterns）
+
+| ❌ 不要 | ✅ 要做 |
+|----------|-------|
+| 到处使用网格碰撞体（Mesh colliders） | 使用简单形状 |
+| 移动端全开实时阴影 | 选择烘焙或投影（Blob）阴影 |
+| 所有距离只用一个 LOD | 按距离分级 LOD |
+| 未优化的着色器 | 性能分析（Profiling）后简化 |
+
+---
+
+> **提示：** 3D 追求的是错觉，营造细节的印象，而非细节本身。