关于 user-preference-respect
面向界面设计与开发者的无障碍设计技能，指导产品依据操作系统的辅助功能偏好调整界面，并提供逐项检查清单。
主要功能
- 01响应减少动态效果偏好
- 02适配高对比度与强制颜色
- 03支持浅色和深色模式
- 04减少透明效果
- 05检查偏好组合下的可用性
适用场景
- 01实现系统减少动态效果设置
- 02确保高对比度模式中的控件可辨识
- 03验证深色与浅色主题内容
- 04检查多项辅助功能偏好同时启用
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/user-preference-respect确认已加载。
详细介绍
尊重用户偏好
操作系统已经了解用户的需求。你的职责是倾听并作出回应。用户是有意设置这些偏好的——忽略它们就等于凌驾于用户自己的无障碍选择之上。
这些偏好
prefers-reduced-motion
含义： 用户会因动态效果感到不适或受到伤害。 应对方式：
- 禁用所有装饰性动画
- 将滑动／淡入淡出过渡替换为即时状态变化
- 保留必要的动态效果（如加载指示器），但应简化
- 禁用视差、滚动触发动画和自动切换
- 绝不要覆盖此偏好
检测方式： @media (prefers-reduced-motion: reduce)
prefers-contrast
含义： 用户需要更明显的视觉区分。 应对方式：
- 提高对比度，使其超过 WCAG 最低要求
- 用实线边框替换不明显的阴影和渐变
- 让焦点指示器更醒目、更明显
- 移除透明效果和模糊效果
- 加粗交互元素的边框
检测方式： @media (prefers-contrast: more)
prefers-color-scheme
含义： 用户偏好浅色或深色界面。 应对方式：
- 提供真正的深色模式（而不只是反转颜色）
- 确保所有内容在两种模式下都清晰易读
- 在两种模式下测试图像、图表、图标和插图
- 深色模式下不要使用纯黑色（#000）——使用深灰色（#1a1a1a）， 以减轻眼睛疲劳
- 请记住，深色模式不只是美观上的选择——它能减轻眼睛疲劳，并帮助部分对光敏感的人群
检测方式： @media (prefers-color-scheme: dark)
forced-colors
含义： 用户启用了 Windows 高对比度模式或类似功能。 应对方式：
- 不要抵触系统颜色覆盖
- 确保边框和轮廓能标明交互元素 （系统会移除你设置的颜色）
- 使用在强制颜色模式下会变为可见的透明边框
- 测试所有交互元素是否仍然清晰可辨
- 不要只依赖背景颜色来指示状态
检测方式： @media (forced-colors: active)
prefers-reduced-transparency
含义： 用户觉得透明元素难以阅读。 应对方式：
- 用纯色背景替换半透明背景
- 移除磨砂玻璃／背景模糊效果
- 确保覆盖层完全不透明
检测方式： @media (prefers-reduced-transparency: reduce)
实施原则
渐进增强
- 首先构建无障碍版本
- 将动态效果、透明效果和视觉点缀作为增强功能添加
- 检测到偏好时，移除的是增强效果，而不是降低使用体验
不要询问——自动检测
- 操作系统已有相关设置时，不要让用户在应用中配置无障碍选项
- 自动检测并作出响应
- 如果提供额外设置，它们应叠加在系统偏好之上，而不是取而代之
测试每项偏好
- 分别启用每项偏好进行测试
- 测试多项偏好组合的情况（减少动态效果 + 高对比度 + 深色模式）
- 确认界面在每种状态下都完整且可用
- 自动化测试可以检查媒体查询是否存在—— 手动测试才能确认它们是否有效
评估清单
- 检测到 prefers-reduced-motion 后，所有装饰性动态效果都会停止
- 检测到 prefers-contrast 后，视觉对比度会提高
- 检测到 prefers-color-scheme 后，主题会切换
- forced-colors 模式不会破坏交互元素
- 多项偏好可以协同生效
- 不会覆盖或忽略任何偏好
评论
支持 Markdown