该技能名为 Frontend Responsive Design Standards，属于 sarfraznawaz2005/agent-skills-collection 技能集合，来源地址为 https://www.skills.sh/sarfraznawaz2005/agent-skills-collection/frontend-responsive-design-standards。它面向 Codex，提供在编写前端响应式相关代码时应遵循的规范指导。
用途 该技能用于在创建或修改需要在移动端、平板和桌面端正常工作的布局时提供规范约束，包括实现移动优先设计模式、编写媒体查询或断点样式、使用弹性单位替代固定像素、实现流式布局、确保触摸目标尺寸、针对不同屏幕与移动网络优化图片资源、跨设备尺寸测试、维持可读排版、在较小屏幕上优先展示内容，以及在 CSS 框架（如 Tailwind、Bootstrap）中使用响应式工具类。
主要能力与规范要求
- 移动优先开发（强制）：始终先编写移动端布局，再为大屏增强。文档给出反面示例（桌面优先：固定 1200px 宽度、4 列网格，再用 max-width 媒体查询覆盖）与正面示例（移动优先：默认 100% 宽度、单列，再用 min-width 媒体查询逐步扩展为 2 列、4 列）。理由包括强制内容优先级排序、移动端性能更好（无需覆盖）、属于渐进增强而非优雅降级。
- 标准断点：要求识别并一致使用项目断点。列出常见断点系统：Tailwind 为 sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px；Bootstrap 为 sm 576px、md 768px、lg 992px、xl 1200px、xxl 1400px。创建新断点前应检查现有代码库，除非明确要求，否则不要使用 850px、1150px 等任意断点。
- 流式布局：使用自适应容器，给出固定宽度（.container 1200px、.sidebar 300px、.content 900px）的反面示例与 width: 100% + max-width + padding、grid-template-columns: 1fr 再媒体查询扩展的正面示例；模式包括 Flexbox（flex: 1、flex-grow、flex-shrink）、Grid（1fr、minmax()、auto-fit、auto-fill）、百分比宽度，以及容器查询 @container。
- 相对单位替代固定像素：字体、间距、布局尺寸使用 rem/em，并说明各适用场景——rem 用于字号、间距、布局尺寸；em 用于组件相对尺寸；% 用于相对父级的宽高；px 用于边框（1px）、阴影和极小值；vw/vh 用于视口尺寸与 hero 区块；ch 用于文本宽度（如 max-width: 65ch）。
- 触摸友好设计：最小触摸目标 44x44px（iOS）/ 48x48px（Android），给出通过 padding 或 min-width/min-height 达标的方式，并附触摸目标清单（按钮 44x44px、文本链接间距充足、表单输入高度至少 44px、图标按钮有 padding、交互元素间距至少 8px）。
- 可读排版：正文最小 16px（1rem），小字最小 14px（0.875rem），正文行高 1.5、标题 1.2，行长 45-75 字符（max-width: 65ch），对比度至少 WCAG AA（普通文本 4.5:1）；响应式排版可用媒体查询逐步增大字号，或用 clamp(2rem, 5vw, 3rem) 实现流式字号。
- 移动端内容优先级：先展示最重要内容，隐藏或折叠次要内容，策略包括移动端隐藏非必要元素、使用汉堡菜单、折叠手风琴/标签页、纵向堆叠布局、用 order 属性重排内容。
- 图片优化：避免直接加载超大图，使用 srcset 与 sizes、picture 加 AVIF/WebP 现代格式，并给出 Next.js Image 组件的用法示例（width、height、sizes）。
- 跨设备测试：提供测试清单（移动 375px、大屏移动 414px、平板 768px、笔记本 1024px、桌面 1440px）、测试方法（DevTools 响应式模式、真机、浏览器扩展、自动化视觉回归测试）与常见问题检查项（横向滚动、文本溢出或截断、元素重叠、字号不可读、触摸目标过小、图片加载失败或变形）。
- 常见响应式模式：给出导航（移动端汉堡、桌面端横向）、网格布局、侧边栏布局的示例代码。
使用方式 该技能以规范文档形式提供给 Codex，用于在生成或修改前端代码时对照执行。文档中包含 CSS、Tailwind 类名、HTML/JSX 的示例代码，以及完成前的核对清单（从移动端布局开始、使用项目标准断点、实现流式布局、使用相对单位、触摸目标至少 44x44px、正文 16px 以上、移动端内容优先级、图片优化、测试所有关键断点、移动端无横向滚动、无重叠或截断内容）和快速参考表（不同情景对应的操作）。
适用场景 适用于创建或修改多端布局、实现移动优先模式、编写媒体查询与断点样式、选用弹性单位、实现流式布局、确保触摸目标尺寸、优化响应式图片、跨设备测试、维护可读排版、在移动端调整内容展示优先级，以及使用 Tailwind/Bootstrap 等框架的响应式工具类等场景。
限制 该技能为编码规范指导，本身不包含自动化测试或构建工具；具体项目的断点定义、框架选型与工具链需以实际代码库为准，文档要求先检查现有代码库的断点定义。文档未提供适用范围之外的功能说明、收费或价格信息。