Agent Skills › qufei1993/skills-hub › dsh-client-ui-ux

dsh-client-ui-ux

GitHub

指导客户端 UI/UX 的设计、实现与审查，涵盖响应式布局、交互状态及无障碍检查。强调结合真实运行环境验证用户体验，确保反馈机制合理且符合设计规范。

skills/dsh-client-ui-ux/SKILL.md qufei1993/skills-hub

设计或审查客户端界面检查响应式布局验证交互状态与焦点管理评估用户体验与无障碍性

npx skills add qufei1993/skills-hub --skill dsh-client-ui-ux -g -y

更多选项

不安装直接使用

npx skills use qufei1993/skills-hub@dsh-client-ui-ux

指定 Agent (Claude Code)

npx skills add qufei1993/skills-hub --skill dsh-client-ui-ux -a claude-code -g -y

安装 repo 全部 skill

npx skills add qufei1993/skills-hub --all -g -y

预览 repo 内 skill

npx skills add qufei1993/skills-hub --list

Frontmatter

{
    "name": "dsh-client-ui-ux",
    "description": "设计、实现或审查客户端 UI、响应式布局、交互状态、焦点或失败反馈时使用，结合真实运行界面验证用户体验。"
}

构建和审查易用的客户端界面

阅读项目上下文和UI 规则。运行验证使用验证证据。审计任务保持只读；视觉审查本身不授权重新设计。

明确用户任务、已有组件和设计变量体系、语言资源维护位置及平台。改变呈现方式前，先追踪状态和用户操作。
梳理适用的加载、空内容、已编辑、保存中、成功、失败和取消状态。反馈的持续时间应匹配尚未完成的工作。失败时保留草稿与选择，并提供用户能找到的恢复操作。
检查交互责任：禁用和等待行为、重复触发、键盘与焦点、弹窗进入退出及焦点返回。保证背景内容与浮层顺序一致。不绕过语言资源管理，把产品文字直接写在其他位置。
使用目标项目的组件和设计变量实现响应式布局。按项目无障碍要求，检查窄屏、桌面、长内容及缩放状态。
按项目文档启动或识别当前构建。确认实际运行的产物，再使用可用浏览器工具操作真实控件并查看截图。检查失败反馈和键盘行为，不能只看 DOM 元素存在。缺少浏览器或运行环境访问时，标明视觉验证受阻。

报告受影响的用户状态、视口和交互证据，以及剩余缺口。仅凭静态代码检查，不能认定视觉或响应式验收完成。