mcpField
R
responsive-layout-review

responsive-layout-review

github.com/sylphxai设计与 UI153 次安装今天更新
代码仓库

关于 responsive-layout-review

面向设计团队的响应式布局审查技能，按内容和任务检查不同视口状态，并输出断点策略、问题与验收检查，同时关注无障碍使用。

主要功能

  1. 01评估内容层级与主要任务
  2. 02检查紧凑到宽屏布局
  3. 03检查导航、表单与媒体
  4. 04制定断点策略与验收检查
  5. 05保留键盘和缩放可用性

适用场景

  1. 01审查布局在不同视口的表现
  2. 02发现表单和导航问题
  3. 03制定响应式验收检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sylphxai/skills --skill responsive-layout-review

安装后在 Claude Code 中输入/responsive-layout-review确认已加载。

附带文件agents/openai.yamlreferences/responsive-layout-rules.md

详细介绍

响应式布局审查

使用此技能，让布局根据意图而非任意断点进行适配。

工作流

  1. 确定内容层级、主要任务以及支持的视口／设备类别。
  2. 阅读 references/responsive-layout-rules.md。
  3. 审查布局状态：紧凑、中等、宽屏、高密度、键盘操作、缩放和窄屏。
  4. 检查导航、表格、表单、模态框、媒体内容以及空状态／错误状态。
  5. 制定断点策略，列出问题并给出验收检查项。

不适用场景

  • 如果基础模型无需此技能的特定产物规范就能处理一般性建议，则不要使用此技能。

防护措施

  • 断点应根据内容遇到的压力点确定，而不应只依据设备名称。
  • 不要在小屏幕上隐藏关键操作。
  • 保持键盘操作、焦点、缩放和屏幕阅读器的可用性。

输出格式

Surface:
Primary task:

Responsive strategy:
- <layout state> -> <behavior>

Findings:
- <rule id> <issue> -> <fix>

Acceptance checks:
- <viewport/state check>

评论

支持 Markdown