用途
该技能面向移动优先的响应式界面开发，提供一套可复用的设计模式与代码示例，帮助开发者构建能自适应不同屏幕尺寸的用户界面。
主要能力
断点系统
提供一组标准断点定义：sm 为 640px、md 为 768px、lg 为 1024px、xl 为 1280px、2xl 为 1536px，并给出将其接入 Tailwind 配置（theme.screens）的写法。
移动优先方法
以移动端为基准、向更大屏幕渐进增强。示例展示如何用 flex-col 在移动端纵向堆叠、用 md:flex-row 在平板及以上横向排列，并通过 p-4 md:p-6 lg:p-8 实现渐进式间距，以及用 w-full 与 md:w-1/3、md:w-2/3 控制不同断点下的宽度比例。
流式排版
使用 CSS clamp() 实现字号随视口流式缩放，例如 h1 的 font-size: clamp(1.5rem, 5vw, 3rem)；并给出容器查询（@container）示例，在容器宽度达到 400px 时调整卡片标题字号。
响应式图片
使用 picture 元素配合 source 的 media 与 srcSet 属性，按断点加载不同尺寸的图片（如 hero-large.webp、hero-medium.webp、hero-small.webp），并在 img 上设置 alt 与 loading="lazy"。
触控友好模式
建议最小触控目标为 44x44px，示例通过 min-h-[44px] min-w-[44px] p-3 实现；并提供 useSwipe Hook 示例，基于 touchstart、touchmove、touchend 计算滑动距离，最小滑动距离为 50px，用于触发左滑或右滑回调。
使用方式
资料以代码片段形式呈现各项模式，可直接参考其中的类名、CSS 与 React/TypeScript 写法应用到项目中。文档未提供安装命令或独立运行方式。
适用场景
适用于需要适配手机、平板与桌面等多种设备的 Web 前端界面开发，尤其是采用 Tailwind 与 React 的项目。
限制
资料未说明该技能的版本要求、依赖项、浏览器兼容范围或性能数据，这些信息暂未提供。