{"skill":{"slug":"myapp-creator","displayName":"Myapp Creator","summary":"Create or update standalone single-file HTML apps with specified features, saving them to fe-service without invoking LLM directly.","description":"# myapp-creator\n\nVersion: 1.0.31\n\n让用户用一句话生成可独立打开的单文件 HTML 应用或文档，并落库到 fe-service。\n本 skill **不主动调用 LLM**，所有 HTML / app_name / features 由调用本 skill 的 LLM agent 直接产出后传入工具。\n\n> **⚠️ 最高优先级规则（违反即为严重错误）：**\n> 1. 游戏类应用 **绝对禁止** 包含任何形式的 AI 对手、人机对战、电脑自动下棋/出牌。棋类/对战类游戏 **只允许** 双人同屏轮流操作，不实现任何计算机决策逻辑。\n> 2. 所有应用 **绝对禁止** 出现\"导出\"、\"打印\"、\"保存\"按钮或相关功能代码。\n\n## 触发条件\n\n当用户需求匹配以下任一类别时，本 skill 参与：\n\n### 应用类（交互式 HTML）\n关键词：应用、app、小游戏、游戏、网页、页面、工具、计算器、时钟、日历、翻译器、转换器\n示例：\n- \"做一个贪吃蛇游戏\"\n- \"创建一个番茄钟\"\n- \"生成一个天气页面\"\n- \"给我做一个马里奥游戏\"\n- \"帮我做一个单位转换工具\"\n\n### 文件类（文档式 HTML）\n关键词：文档、文件、word、ppt、演示文稿、slides、pdf、excel、xlsx、表格、报告、简历、周报、日报、总结、方案、计划书\n示例：\n- \"生成一个项目周报\"\n- \"做一个自我介绍PPT\"\n- \"创建一个预算表格\"\n- \"帮我写一份简历\"\n- \"保存一个会议纪要文档\"\n\n### 不触发（交给龙虾其他能力）\n- 图片/绘画类：\"画一张…\"、\"生成一张图片…\"\n- 音频/音乐类：\"生成一首歌…\"、\"合成语音…\"\n- 视频类：\"剪辑一个…\"、\"生成视频…\"\n- 小说/纯文本类：\"写一篇小说…\"、\"写一首诗…\"（纯创作不产出可交互文件）\n- 纯问答/聊天/闲聊\n\n### 判断规则\n用户意图是\"产出一个可独立打开、保存下来反复使用的文件或应用\"时触发本 skill。\n如果用户只是想让你\"说一段话\"或\"回答问题\"，不要触发。\n\n## 触发标记（兼容旧入口）\n\n以下前缀仍可直接触发，不需要语义判断：\n- `[create_app]<描述>` → 创建新应用/文件\n- `[update_app:app_id=]<描述>` → 更新已有应用/文件\n- `[install_check:session=]` → 安装自检（仅调 myapp_ping）\n- 不带上述前缀 → 按语义判断是否匹配触发条件\n\n## 创建流程\n\n最长等待 300s。若 300s 内不能完成 HTML 生成与 `myapp_register` 调用，直接回复\"应用创建失败，请稍后重试\"。\n\n1. 解析用户描述，判断类型（应用类 or 文件类），产出：\n - `app_name`：应用/文件名，≤30 字\n - `features`：JSON 字符串数组，3~8 条，每条 ≤30 字，描述具体功能/内容要点\n - `html_content`：完整可独立打开的单文件 HTML（按类型选择模板风格）\n\n2. HTML 通用约束：\n - 自包含：CSS/JS 全部内联在 `\n \n ```\n - `changeDir(dx, dy)` 和 `togglePause()` 替换为游戏实际函数名；坐标映射类游戏中方向键可改为触发\"持续向该方向移动\"逻辑\n - 按钮尺寸用 `vmin` 单位，960px 小屏到 2560px 大屏均可用\n - 暂停键必须在中心格，禁止移到键盘外部单独放置\n\n **游戏角色视觉规范**（卡通可爱风格，禁止只画纯色圆点/方块）：\n - 贪吃蛇：蛇头用圆角矩形 + 两个白色眼睛（小圆 + 黑色瞳孔）+ 根据朝向旋转；蛇身用渐变色圆角矩形，节节之间颜色略有变化；食物用苹果/草莓等图形（红色圆 + 绿色小叶子）\n - 贪吃蛇蛇头绘制示例（Canvas 2D）：\n ```js\n function drawHead(ctx, x, y, w, h, dir) {\n ctx.save();\n ctx.translate(x + w/2, y + h/2);\n const angle = {right:0, down:Math.PI/2, left:Math.PI, up:-Math.PI/2}[dir] || 0;\n ctx.rotate(angle);\n // 头部圆角矩形\n ctx.fillStyle = '#2ecc71';\n roundRect(ctx, -w/2, -h/2, w, h, w*0.3);\n ctx.fill();\n // 眼睛\n [[-w*0.15, -h*0.15],[w*0.15, -h*0.15]].forEach(([ex,ey])=>{\n ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(ex,ey,w*0.12,0,Math.PI*2); ctx.fill();\n ctx.fillStyle='#222'; ctx.beginPath(); ctx.arc(ex+w*0.03,ey,w*0.06,0,Math.PI*2); ctx.fill();\n });\n ctx.restore();\n }\n function roundRect(ctx,x,y,w,h,r){\n ctx.beginPath();ctx.moveTo(x+r,y);ctx.lineTo(x+w-r,y);ctx.arcTo(x+w,y,x+w,y+r,r);\n ctx.lineTo(x+w,y+h-r);ctx.arcTo(x+w,y+h,x+w-r,y+h,r);ctx.lineTo(x+r,y+h);\n ctx.arcTo(x,y+h,x,y+h-r,r);ctx.lineTo(x,y+r);ctx.arcTo(x,y,x+r,y,r);ctx.closePath();\n }\n ```\n - 俄罗斯方块：方块用渐变色 + 高光边框，不同形状用不同颜色\n - 飞机大战：飞机用多边形或 SVG path 绘制，子弹用细长椭圆，敌机颜色与玩家区分；**子弹必须自动连续发射，禁止要求玩家手动点击射击**；操作说明写「触摸屏幕移动飞机，子弹自动发射」\n - 通用原则：所有游戏角色必须有辨识度，能看出是什么，不能只是纯色几何形状\n\n **平台跳跃 / 跑酷类游戏触摸控制规范**（马里奥、跑酷等左右移动+跳跃类游戏必须遵守）：\n\n > 核心设计：左右半屏控制方向，上滑触发跳跃，斜滑（如右上方）同时触发移动+跳跃，完全模拟实体手柄的拇指操作。\n\n ```js\n let tSX = 0, tSY = 0; // 触摸起点，每次 touchstart 或跳跃触发后重置\n\n canvas.addEventListener('touchstart', e => {\n e.preventDefault();\n const t = e.touches[0];\n tSX = t.clientX; tSY = t.clientY;\n }, {passive: false});\n\n canvas.addEventListener('touchmove', e => {\n e.preventDefault();\n const t = e.touches[0];\n const dx = t.clientX - tSX;\n const dy = t.clientY - tSY; // 负值 = 向上\n\n // 左右移动：根据手指当前位置在画布左/右半区判断方向\n const rect = canvas.getBoundingClientRect();\n if (t.clientX < rect.left + rect.width / 2) {\n moveLeft();\n } else {\n moveRight();\n }\n\n // 上滑检测跳跃：阈值 20px，触发后立即重置 tSY 防止重复触发\n if (dy < -20) {\n jump();\n tSY = t.clientY; // 重置参考点，允许同一次触摸连续触发（斜滑等）\n }\n }, {passive: false});\n\n canvas.addEventListener('touchend', e => {\n stopMove(); // 手指抬起停止移动\n }, {passive: false});\n ```\n - `dy < -20`（负值向上）触发跳跃，同一次 `touchmove` 序列可多次触发（重置 tSY）\n - 斜向上滑（如右上方）会同时执行 `moveRight()` + `jump()`，天然支持斜跳\n - 阈值 20px 优于 28px，更灵敏，适合快节奏横板游戏\n - 右栏方向键：◀▶ 控制移动，▲ 触发跳跃，▼ 可用于下蹲/快速下落\n - 触摸坐标映射为主控，方向键为辅助——两套控制并行，不互斥\n - 防止页面滚动干扰游戏：游戏容器加 `touch-action:none`，Canvas 加 `{ passive: false }` 并 `e.preventDefault()`\n - 游戏暂停/重启按钮触摸区域 ≥ 44×44px\n - 禁止在游戏主循环中使用 `alert()`，改用页面内自定义弹窗显示胜负信息\n\n **跳跃 / 平台类游戏角色定位规范**（跳一跳、跑酷、马里奥等必须遵守）：\n\n > ⚠️ **已知 Bug 根因**：用 `ph = PLAYER_H / squish` 作为绘制高度来定位头部/身体，当落地弹跳动画触发 `squish ≠ 1` 时，`ph` 变大，角色视觉上\"沉入\"平台下方。\n\n **正确做法**：`py` 始终表示角色**脚底**的 y 坐标（即站在平台顶面），`squish` 只影响**宽度**（身体变宽/变窄），绝不影响高度定位：\n ```js\n // py = 脚底 y（始终贴平台顶面，不受 squish 影响）\n // squish: 落地压缩系数，1=正常，>1=横向压扁（宽变大、高不变）\n function drawPlayer(ctx, px, py, squish) {\n const W = PLAYER_W * squish; // 宽度随 squish 变化\n const H = PLAYER_H; // 高度固定，不除以 squish\n const x = px - W / 2;\n const y = py - H; // 脚底 py 往上量固定 PLAYER_H\n // 绘制身体：rr(ctx, x, y, W, H, radius)\n }\n ```\n - `squish` 动画只修改 `W`（或同时等比缩小 `H` 但必须同步上移 `y = py - H`），确保脚底始终在 `py`\n - 禁止写 `y = py - PLAYER_H / squish`，这会在 squish > 1 时让角色上移，squish < 1 时下沉\n\n\n\n > ⚠️ **强制要求**：所有游戏类应用必须内置难度阶段机制，**默认从简单难度开始**，通过 10 关后自动升级为中等难度，通过 20 关后升级为困难。以飞机大战为参照基准，其他游戏按比例换算。\n\n **难度分级标准**（以飞机大战为基准示例）：\n | 阶段 | 关卡范围 | 敌机坠落速度 | 子弹发射间隔 | 过关目标分 | 每关目标分增量 |\n |------|---------|------------|------------|---------|------------|\n | 简单（Easy） | 第 1~10 关 | 基础速度 × 1/2 | 300ms/发 | 100 分 | +10 分/关 |\n | 中等（Medium）| 第 11~20 关 | 基础速度 × 80% | 200ms/发 | 200 分 | +10 分/关 |\n | 困难（Hard） | 第 21 关起 | 基础速度 | 100ms/发 | 300 分 | +10 分/关 |\n\n - **难度参数必须用变量控制**，根据关卡号计算，禁止魔法数字硬编码：\n ```js\n let level = 1; // 每通关 +1\n\n function getDifficulty(level) {\n if (level <= 10) return {\n speedMul: 1/2, bulletInterval: 300,\n targetScore: 100 + (level - 1) * 10 // 100, 110, 120...\n };\n if (level <= 20) return {\n speedMul: 0.8, bulletInterval: 200,\n targetScore: 200 + (level - 11) * 10 // 200, 210, 220...\n };\n return {\n speedMul: 1, bulletInterval: 100,\n targetScore: 300 + (level - 21) * 10 // 300, 310, 320...\n };\n }\n ```\n - **不设硬性关卡上限**，进入困难阶段后目标分持续增加，让玩家可以持续挑战\n - 关卡信息（当前关卡、当前难度名称、得分 / 目标分、生命）必须在右栏顶部实时显示\n\n **文档/Word/PDF 风格**：\n - 容器使用响应式宽度：`max-width: min(1200px, 92vw); margin: 3vh auto; padding: 4vh 5vw`\n - 在 960px 小屏上内容几乎满宽，在 1920px+ 大屏上居中且不超过 1200px\n - 正文字号 `clamp(14px, 1.8vw, 18px)`，标题 `clamp(20px, 3vw, 32px)`\n - 清晰的标题/段落/列表排版，使用衬线或无衬线字体\n - 页面顶部可显示文档标题和日期\n\n **PPT/演示文稿风格**：\n - 引入 reveal.js：``\n - 引入主题：``\n - 引入 JS：``\n - 内容用 `
...
` 包裹\n - 每个 `
` 是一页幻灯片\n - 初始化：``\n reveal.js 内部会等比缩放到实际视口，960×600 基准保证所有设备文字清晰不溢出\n - 5~15 页为宜\n\n **Excel/表格风格**：\n - 容器 `width:100vw; height:100vh; overflow:auto; box-sizing:border-box; padding:2vh 3vw`\n - HTML `` 宽度 100%，带 border 和交替行色\n - 表头字号 `clamp(12px, 1.6vw, 16px)`，单元格字号 `clamp(12px, 1.4vw, 15px)`\n - 表头点击可排序（内联 JS 实现）\n - 单元格 `contenteditable=\"true\"` 可编辑\n\n **所有类型通用禁止项**：\n - 禁止出现\"导出\"、\"打印\"、\"保存\"功能按钮\n - 禁止 `@media print` 相关样式\n - 禁止 `window.print()`、文件下载等功能\n\n4. 图标生成（icon_base64）：\n - 产出一个 256×256 的 SVG 图标\n - 风格：圆角矩形纯色背景 + 居中的主题图形（用 SVG path/circle/rect 绘制，**禁止使用 `` 或 emoji**）\n - 背景用饱和度高的纯色，中间图形用与背景对比强烈的颜色（可用白色、也可用多色彩搭配，参考 App Store 图标风格）\n - SVG 文本做 base64 编码后传入 icon_base64（不带 `data:image/svg+xml;base64,` 前缀）\n - SVG 原文不超过 3KB，**禁止使用 `` 元素或 emoji**\n\n5. **【必须执行】HTML 自检 — 提交前逐项检查**：\n 生成 html_content 后，**必须**在脑内逐项检查以下条件，任一不通过则必须修改代码后再提交：\n\n **自检项 A — 禁止 AI/电脑对手**（仅游戏/棋类/对战类需检查）：\n - [ ] 代码中是否存在任何\"电脑走棋/出牌/移动\"的函数？（如 `computerMove`, `aiMove`, `makeAIMove`, `botPlay`, `autoPlay`, `cpuTurn`）→ 若有，**删除整个函数及其调用**\n - [ ] 代码中是否存在 `minimax`, `alphaBeta`, `evaluate`, `bestMove`, `getRandomMove`, `Math.random()` 用于选择落子位置？→ 若有，**删除**\n - [ ] 代码中是否存在\"难度选择\"（easy/medium/hard）或\"人机/人人\"模式切换？→ 若有，**删除，只保留双人模式**\n - [ ] 游戏流程是否为：玩家A操作 → 切换到玩家B → 玩家B操作 → 切换回玩家A → 循环？→ 必须是\n - [ ] 是否有任何 `setTimeout`/`setInterval` 用于延迟执行电脑的操作？→ 若有，**删除**\n\n **自检项 B — 禁止导出/打印/保存**（所有类型需检查）：\n - [ ] 是否存在\"导出\"、\"打印\"、\"保存\"、\"下载\"按钮或菜单项？→ 若有，**删除**\n - [ ] 是否存在 `window.print()`, `document.execCommand('SaveAs')`, `URL.createObjectURL`, `download` 属性？→ 若有，**删除**\n\n **自检项 C — Android 8.1 WebView 兼容**（所有类型需检查）：\n - [ ] 是否使用了 Chrome 86+ 才支持的 CSS/JS API（`@property`、`content-visibility`、`structuredClone`、`??=`/`||=`/`&&=` 赋值运算符）？→ 若有，**替换为兼容写法**\n - [ ] 是否使用了 `ctx.roundRect()`？→ Chrome 99+，**必须替换为自定义 `rr()` helper（用 arcTo 实现）**\n - [ ] Canvas 内是否使用了 emoji 字符（fillText 中含 🔥❤️ 等）？→ WebView 字体渲染异常，**必须替换为纯文字或几何图形**\n - [ ] 游戏布局是否为横版左右两栏（左栏游戏区、右栏控制区）？→ **若是竖版堆叠，必须改为横版**\n - [ ] 右栏有 `#game-preview`（下一块/预览区）时，是否已去掉 `#leaderboard` 和 `#instructions`？→ **预览区与排行/说明互斥，有预览时不展示排行和说明**。无预览区的游戏中，排行/说明用 `flex:1 1 0;min-height:0` + h3 固定 + `.sb-inner` 内滚动。`#controls` 始终 `flex:0 0 auto` 固定底部\n - [ ] Canvas CSS 是否用 `position:absolute;top:0;left:0;width:100%;height:100%` 撑满左栏，而非依赖 flex 布局？→ **若只用 `width:100%;height:100%` 而无 `position:absolute`，必须修正**\n - [ ] Canvas 尺寸初始化是否在 `window.load` + 双层 `requestAnimationFrame` 内执行，且用 `offsetWidth` 做兜底（防止 Android 8.1 WebView 初始 `clientWidth` 为 0）？→ **若直接在顶层读 `clientWidth`，必须改为延迟初始化模板**\n - [ ] 需要方向控制的游戏：是否在 Canvas 上绑定了 `touchstart`/`touchmove` 做坐标直接映射（主控），且右下角仍保留方向键 + 暂停按钮（辅助）？→ **若只有方向按钮而无触摸坐标映射，必须补充**\n - [ ] 飞机大战类游戏：子弹是否自动连续发射（`setInterval` 或主循环计时），而非要求玩家手动点击射击？→ **若需要手动触发，必须改为自动发射**\n - [ ] 俄罗斯方块/消除类游戏：①初始下落间隔是否为800ms（经典NES速度）？②贴地后是否立刻lock+spawn（零等待，无LOCK_DELAY缓冲）？③`spawnPiece()`是否将新方块赋值给全局变量（`cur=shape`）？→ **若不符合，按专项规则修正**\n - [ ] 游戏内的开始/结束/暂停遮罩层是否用 `position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center` 居中（**禁止用 `inset:0`，Chrome 85 不支持**）？→ **若用 `inset:0` 或固定像素定位，内容会在智能屏上贴左上角，必须修正**\n - [ ] 游戏是否实现了三段式难度（简单1~10关：速度×1/2、300ms/发、100+10×n分 → 中等11~20关：速度×80%、200ms/发、200+10×n分 → 困难21关起：基础速度、100ms/发、300+10×n分），且第1关使用简单参数？→ **若全程同一难度或开局就很快，必须按难度分级模板修正**\n - [ ] 游戏角色是否有视觉辨识度（蛇头有眼睛、食物有形状等），而不是纯色圆点/方块？→ **若只是纯色几何形，必须改为卡通风格**\n - [ ] 是否使用了原生 `alert()`/`confirm()`/`prompt()`？→ 若有，**改为页面内自定义弹窗**\n - [ ] 游戏容器/Canvas 是否加了 `touch-action:none` 并在 touch 事件中调用 `e.preventDefault()`？→ 若未处理，**补充**\n - [ ] 可点击/可触摸元素的触摸区域是否 ≥ 44×44px？→ 若不足，**调整尺寸**\n - [ ] 跳跃/平台类游戏（跳一跳、跑酷等）：绘制角色时是否用固定常量 `PLAYER_H` 定位脚底坐标（`py` 为脚底 y，头顶为 `py - PLAYER_H`），而非用 `PLAYER_H / squish` 等变形高度定位？→ **`squish`（落地压缩动画）只能影响角色宽度/变窄，绝不能影响脚底 `py` 的计算，否则 squish≠1 时角色视觉上会\"沉入\"平台下方**\n\n ⚠️ 如果自检发现违规代码，**不要提交**，先修正 html_content 再继续下一步。\n\n5.5. **【必须执行】JS 语法验证**（应用类/游戏类必须，文件类可选）：\n 在调用 `myapp_register` 之前，用 `exec` 工具对 html_content 中的 `