responsive-mobile-first

该技能聚焦移动优先的响应式实现，主要覆盖以下方面。断点策略基于 Tailwind 默认断点（sm:640px、md:768px、lg:1024px、xl:1280px、2xl:1536px），先写移动端基础样式，再为大屏追加断点。组件模式包括：粘性头部（滚动后加背景、模糊与阴影）、移动端抽屉导航（含遮罩、动画、aria-label）、浮动移动端 CTA（滚动超过阈值后显示）、响应式网格（1-2-3 列、侧边栏、文本加图片）、响应式排版与间距、按断点显示/隐藏元素，以及基于 next/image 的响应式图片与 sizes 属性。触控方面强调最小 44x44px 触控目标和交互元素间距。还提供一个 Container 组件封装（default/narrow/wide 三种宽度）。用法为在 React/Tailwind 项目中按示例模式组织组件；示例使用 TypeScript 与 framer-motion 等依赖。限制：资料未说明安装命令、是否收费、具体支持平台与效果验证，使用前需自行确认依赖版本与项目兼容性。