用途：为创建或修改需适配手机、平板与桌面的布局提供前端响应式设计规范，指导使用媒体查询、断点样式、流式单位与触控友好设计。
主要能力：强制移动优先开发，先写移动布局再逐级增强；推荐标准断点（Tailwind：sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px；Bootstrap：sm 576px、md 768px、lg 992px、xl 1200px、xxl 1400px），并强调先查现有代码库断点定义；流式布局建议 width:100% 加 max-width、Flexbox、Grid 的 1fr/minmax()/auto-fit，以及容器查询；尺寸优先使用 rem、em、%、vw/vh、ch，而非固定 px；触控目标至少 44x44px；正文不小于 16px（1rem）、行高 1.5，行宽约 45-75 字符，可用 clamp() 实现流式字号；移动端通过 order、hidden 与折叠菜单优先展示核心内容；图片使用 srcset、sizes、picture 及现代格式，Next.js 用 Image 组件；测试覆盖 375、414、768、1024、1440px 等宽度。
使用方式：在编写或调整响应式布局、断点样式、媒体查询、弹性单位与触控目标时调用该技能，按其清单逐项核对。
适用场景：新布局开发、移动端适配改造、网格与侧边栏响应式重排、图像与排版优化、多设备回归测试。
限制：内容为编码规范与清单，不含可执行代码或自动化工具；断点与示例依赖项目实际约定，需先确认现有定义；具体框架版本支持情况资料未提供。