用途：该技能用于创建跨设备、跨屏幕尺寸的响应式网页设计，适用于新网站或应用的多端布局、将固定布局改造为响应式、按设备优化图片，以及支持平板、桌面和大屏。
主要能力：提供移动优先的断点写法（默认移动端，使用 min-width 媒体查询）；Flexbox 一维布局与 CSS Grid 二维布局；响应式图片（srcset、picture、CSS 背景图与 image-set）；响应式字体（clamp() 流式尺寸或媒体查询）；容器查询（container-type、@container）按父容器尺寸应用样式。还给出标准断点变量与响应式导航、商品网格等示例。
必要用法：HTML 必须包含 <meta name="viewport" content="width=device-width, initial-scale=1.0">；采用移动优先，使用 @media (min-width: 768px) 这类写法，避免桌面优先的 max-width；尺寸使用 rem、em、%、vw/vh 等相对单位；避免固定宽度，改用 max-width；避免在各断点重复相同样式，公共样式作为默认，媒体查询只写差异。
适用场景：多端布局设计、旧版固定布局改造、按设备优化图片、平板与桌面及大屏适配。
限制：资料未提供具体安装命令、收费、价格或平台支持细节；兼容平台标注为 Claude、ChatGPT、Gemini，版本 1.0.0，最后更新 2025-01-01。容器查询等新特性需注意浏览器支持情况。