Tooluck logoTooluck
SKILL.md

dsh-client-ui-ux

Agent skill fromqufei1993/skills-hub

设计、实现或审查客户端 UI、响应式布局、交互状态、焦点或失败反馈时使用,结合真实运行界面验证用户体验。

How to install dsh-client-ui-ux

install dsh-client-ui-ux
# install the skills-hub pack with the skills CLI
npx skills add qufei1993/skills-hub

# or add only this skill to Claude Code: copy the folder

skills/dsh-client-ui-ux/

# into

~/.claude/skills/dsh-client-ui-ux/ (all projects)

.claude/skills/dsh-client-ui-ux/ (one project)

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

MITFull file
1# 构建和审查易用的客户端界面
2
3阅读[项目上下文](references/project-context.md)和[UI 规则](references/ui.md)。运行验证使用[验证证据](references/evidence.md)。审计任务保持只读;视觉审查本身不授权重新设计。
4
51. 明确用户任务、已有组件和设计变量体系、语言资源维护位置及平台。改变呈现方式前,先追踪状态和用户操作。
62. 梳理适用的加载、空内容、已编辑、保存中、成功、失败和取消状态。反馈的持续时间应匹配尚未完成的工作。失败时保留草稿与选择,并提供用户能找到的恢复操作。
73. 检查交互责任:禁用和等待行为、重复触发、键盘与焦点、弹窗进入退出及焦点返回。保证背景内容与浮层顺序一致。不绕过语言资源管理,把产品文字直接写在其他位置。
84. 使用目标项目的组件和设计变量实现响应式布局。按项目无障碍要求,检查窄屏、桌面、长内容及缩放状态。
95. 按项目文档启动或识别当前构建。确认实际运行的产物,再使用可用浏览器工具操作真实控件并查看截图。检查失败反馈和键盘行为,不能只看 DOM 元素存在。缺少浏览器或运行环境访问时,标明视觉验证受阻。
10
11报告受影响的用户状态、视口和交互证据,以及剩余缺口。仅凭静态代码检查,不能认定视觉或响应式验收完成。

Excerpt shown under the repository's MIT license.

More skills in skills-hub

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates