技能说明
适合后台、工作台和复杂网页交互的设计与审查，覆盖 Esc/Enter、⌘/Ctrl 快捷键、弹窗焦点、点击遮罩、表单保存状态、菜单、筛选和空状态。技能专注交互机制与可访问性底线，不替代整体视觉设计或信息架构。
关于此技能
为网页和应用补齐键盘快捷键、弹窗、菜单、表单和异步操作的常见交互行为，让用户不必猜测如何操作。
核心能力
弹窗与覆盖层
规范 Esc、关闭按钮、点击遮罩、焦点移动和滚动隔离，降低误关闭与焦点丢失。
键盘操作
覆盖 Enter、⌘/Ctrl 组合键、搜索快捷键和帮助提示，并兼顾 Mac 与 Windows/Linux。
表单与异步状态
要求保存中禁用主按钮、显示错误、保留未保存内容，并为菜单和筛选提供清晰反馈。
适用场景
网页交互审查
检查弹窗、抽屉、菜单、表格和表单是否符合用户熟悉的操作习惯。
后台和工作台设计
为复杂管理界面补齐快捷键、保存状态、筛选、空状态和不可用状态。
交互组件实现
在开发或改造组件时，快速获得可执行的行为清单和无障碍底线。
使用步骤
- 01
第一步：限定交互范围
先明确本次涉及的弹窗、菜单、表单或列表，只应用相关规则，不把它当作整站验收清单。
- 02
第二步：检查关键状态
逐一验证打开、关闭、焦点、保存中、报错、空数据和键盘操作等状态。
- 03
第三步：补反馈与验证
补上可见状态提示、按钮标签和安全退出行为，再用鼠标与键盘走一遍主要路径。
常见问题
它主要解决视觉美化吗？+
不是。SKILL.md 专注交互行为和可访问性底线，不负责整体页面审美、信息架构或可视化质量。
快捷键只需要支持 Mac 吗？+
不需要。技能明确要求同时支持 metaKey 与 ctrlKey，兼顾 Mac 和 Windows/Linux。
所有弹窗都应该点击遮罩关闭吗？+
不是。轻量弹窗可以关闭，带未保存内容或明确确认的表单应避免误关闭，并提供安全的关闭路径。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Codex · Cursor
已提供来源链接
命令可直接复制
2026/09/02
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
git clone https://github.com/swyxio/skills.git ~/Work/skills && ln -sf ~/Work/skills/app-ux-paradigms ~/.claude/skills/app-ux-paradigms