Mobile Adaptation Auditor

AI Coding Agent Skill — 移动端适配质量审查工具技能

审查任意前端页面（Vue / React / Svelte / Next / Nuxt / Remix / Astro / 原生 HTML）在移动端的适配质量，输出 可复现、可修复、可回归 的结构化诊断报告。

适用场景

• 手机端布局错乱 / 横向滚动溢出
• 按钮点击困难 / 触控目标过小
• Fixed / Sticky 元素遮挡内容
• iOS Safe Area 未适配
• 100vh 在 iOS 动态地址栏下抖动
• 表单输入框被键盘遮挡 / iOS < 16px 自动放大
• 滚动穿透 / 弹窗背景未锁定
• 移动端性能体感差（首屏慢、滚动卡顿）

工作流程

输出报告结构

1) 测试范围（页面 / 设备 / 浏览器）
2) 结论摘要（P0 / P1 / P2 计数 + 总体评价）
3) 问题清单（复现步骤 → 根因 → 修复建议 → 验证方式）
4) 修复优先级建议（Day 0 / Day 1）
5) 统一规范建议（断点 / 容器 / 媒体 / Safe Area / 高度策略）

严重级别

默认抽检矩阵

浏览器：iOS Safari + Android Chrome

🚀 快速开始

使用 npx 安装（推荐）

npx skills add https://github.com/Costany/mobile-adaptation-auditor

手动安装

根据你使用的 AI Coding Agent 选择对应路径：

Claude Code

cd ~/.claude/skills/
git clone https://github.com/Costany/mobile-adaptation-auditor.git mobile-adaptation-auditor

OpenAI Codex CLI

cd ~/.codex/skills/
git clone https://github.com/Costany/mobile-adaptation-auditor.git mobile-adaptation-auditor

Codex CLI 需要 v0.76.0+ 并启用 skills feature flag：codex --enable skills

配置说明

Claude Code

安装后即可使用，支持多种调用方式（下方介绍两种）：

/mobile-adaptation-auditor [url]

或直接描述移动端适配问题，Claude 会根据 description 自动匹配触发。

技能存放位置：

OpenAI Codex CLI

安装后通过以下方式调用：

$mobile-adaptation-auditor [url]

或在对话中描述移动端适配问题，Codex 会自动匹配。

技能存放位置：

如需禁用技能，在 ~/.codex/config.toml 中添加：

[[skills.config]]
path = "~/.codex/skills/mobile-adaptation-auditor/SKILL.md"
enabled = false