Gesture Interaction — 跨平台手势识别交互

在 Web 应用（网页、移动端 WebView、Electron 桌面端）中添加基于摄像头的手势识别交互，基于 MediaPipe Hands 21 点手部关键点追踪，即插即用。

功能

• 自由开关：默认关闭，按钮、快捷键 Ctrl+Shift+G 或 API 启用/关闭，关闭后立即释放摄像头
• 捕捉框高斯模糊：backdrop-filter: blur(12px)，0.4s 过渡动画，只模糊捕捉框内部
• 可拖拽捕捉框：160×120px 预览框，支持拖拽、边界约束、位置记忆、隐藏/恢复
• 手掌轮廓线：基于 21 关键点 Graham Scan 凸包 + 平滑曲线绘制
• 骨骼可视化：5 指 + 手掌骨架连线，不同颜色区分，21 关键点标注
• 11 套手势语义：基于几何规则判定（非模型分类），覆盖视图导航、对象操控与快捷操作

手势字典

类别	手势
视图导航	向上翻页、向下翻页、平移、左转、右转
对象操控	旋转、放大、缩小
快捷操作	截图、抓取链接、投放

技术栈

• 手部检测：MediaPipe Hands（CDN @mediapipe/hands）
• 渲染：Canvas 2D
• UI：纯 HTML/CSS/JS，零外部依赖
• 跨平台：Web 原生 / WKWebView / Android WebView / Electron

使用方式

将 SKILL.md 导入 AI Skill 系统，然后向 Agent 描述需求，例如：

• “给页面添加手势识别功能”
• “实现手势翻页 / 缩放 / 截图”
• “启动摄像头进行手势控制”

Agent 会按文档生成 gesture-interaction.html、gesture-interaction.css、gesture-engine.js 三件套。

仓库内容

gesture_interaction/
├── SKILL.md                      # Skill 定义文档（含 GestureEngine 核心代码模板）
├── gesture-interaction-skill.md  # 手势交互实现说明
└── READ_ME.txt                   # 包说明