用途：这是一个用于构建响应式布局的技能，适合在创建响应式设计、修复布局问题或搭建移动优先页面时使用。
主要能力：提供布局模式识别（网格、侧边栏、卡片等）、移动优先思路、CSS 技术选择（Grid 与 Flexbox 的取舍）、断点设置与跨视口测试流程。涵盖常见布局模式示例：圣杯布局、响应式卡片网格、侧边栏布局、Hero 区、瀑布流网格、粘性头部。同时介绍容器查询（container-type: inline-size 与 @container）以及 Tailwind 对应的 @container 写法。包含流式排版方案，如 text-[clamp(2rem,5vw,4rem)] 与 text-2xl sm:text-3xl md:text-4xl lg:text-5xl。
必要用法：资料给出 Tailwind 默认断点 sm: 640px、md: 768px、lg: 1024px、xl: 1280px、2xl: 1536px，以及自定义 CSS 的 @media (min-width: 640px)、768px、1024px。构建流程为：识别布局模式、移动优先、选择 Grid 或 Flexbox、为大屏添加断点、跨视口测试。Grid 适用于页面布局、卡片网格、复杂二维布局与重叠元素；Flexbox 适用于导航栏、卡片内容对齐、居中与空间分配。
测试清单：320px、375px、768px、1024px、1280px 以上，并用真实内容及长短内容变化进行验证。
限制：资料未提供安装命令、版本依赖、许可、价格或平台支持信息，暂未提供。