用途：面向需要为不同视口和设备设计或审查布局的前端工作，包括定义断点、实施移动优先 CSS、响应式图片与媒体、触控优化和响应式排版。
主要能力：以移动优先和内容优先为原则，从最小视口与最重要内容出发逐步增强；断点由内容决定而非设备宽度；采用流式网格（百分比宽度、12 列起步、容器设 max-width），二维布局用 CSS Grid、一维用 Flexbox；用 min-width 媒体查询扩展，避免以 max-width 为主策略；图片用 srcset（至少 3 种尺寸，如 400/800/1200px）、picture 做艺术指导、设置宽高防 CLS、首屏下用 loading="lazy"、压缩为 WebP 或 AVIF；触控目标至少 44x44px、间距至少 8px；排版用 rem、em、clamp()，行宽保持 45–75 字符。
常见模式：流式网格、内容编排、卡片布局、滚动隐藏的粘性页头、桌面完整导航配合移动端汉堡菜单。
使用方式：作为技能/规范参考，按清单审查布局、断点、图片媒体、排版、导航触控与性能测试；在 320px、768px、1024px、1440px 及真机测试，移动端 Lighthouse 分数需高于 90。每个 HTML 文档需包含 viewport meta 标签。
限制：不要在移动端用 display:none 单纯隐藏内容，应调整呈现方式；禁止横向滚动，overflow-x: hidden 仅作最后手段；桌面端不用汉堡菜单；避免针对具体设备宽度设断点、事后给桌面布局套响应式、固定像素布局和缺失 viewport meta。具体代码示例见其 references 文档，此处未提供。