用途
本技能是一套面向 Tailwind CSS 应用的响应式 UI 改造模式集合，用于指导自动化重构与代码生成。其内容基于 Adam Wathan 与 Steve Schoger 的《Refactoring UI》以及现代响应式设计模式，共包含 8 个类别、49 条规则，并按影响程度划分优先级。
适用时机
在以下情况可参考这些指南：
- 让现有 UI 适配不同屏幕尺寸
- 使用 Tailwind CSS 构建新的响应式布局
- 将仅支持桌面的界面重构为支持移动端
- 审查响应式代码中的断点、间距与排版问题
- 为触屏设备改造导航、表单和数据表格
规则类别与优先级
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 断点策略 | CRITICAL | bp- |
| 2 | 布局转换 | CRITICAL | layout- |
| 3 | 响应式间距 | HIGH | rspac- |
| 4 | 流式排版 | HIGH | fluid- |
| 5 | 导航模式 | MEDIUM-HIGH | nav- |
| 6 | 触控与交互 | MEDIUM | touch- |
| 7 | 响应式媒体 | MEDIUM | rmedia- |
| 8 | 数据适配 | LOW-MEDIUM | data- |
快速参考
1. 断点策略（CRITICAL）
- bp-mobile-first-default - 使用移动优先的断点方向
- bp-content-driven-breakpoints - 在内容出现断裂处设置断点
- bp-avoid-device-widths - 避免使用特定设备的断点值
- bp-consolidate-breakpoints - 将断点合并为三到四个
- bp-min-width-over-max - 断点使用 min-width 而非 max-width
- bp-debug-breakpoints - 开发期间使用可视化断点指示器
2. 布局转换（CRITICAL）
- layout-stack-to-row - 移动端堆叠元素，桌面端改为行排列
- layout-sidebar-collapse - 移动端将侧边栏折叠到顶部或底部
- layout-grid-column-reduction - 在更窄断点减少网格列数
- layout-holy-grail-responsive - 使用 Grid 实现响应式圣杯布局
- layout-sticky-to-static - 移动端将粘性元素转换为静态
- layout-fixed-to-relative - 移动端用相对定位替换固定定位
- layout-aspect-ratio-containers - 使用宽高比实现响应式容器
3. 响应式间距（HIGH）
- rspac-scale-padding-per-bp - 按断点独立缩放内边距
- rspac-responsive-gap - 为网格与弹性布局使用响应式 gap
- rspac-compact-mobile-generous-desktop - 移动端紧凑间距，桌面端宽松间距
- rspac-section-spacing - 随视口缩放区块分隔间距
- rspac-inline-to-stack-spacing - 移动端将行内间距转换为堆叠间距
- rspac-container-padding - 使用响应式容器内边距
4. 流式排版（HIGH）
- fluid-clamp-font-size - 使用 clamp() 实现流式字号
- fluid-responsive-line-height - 字号增大时收紧行高
- fluid-responsive-measure - 将行宽限制在 45-75 个字符
- fluid-scale-headings-independently - 跨断点独立缩放标题字号
- fluid-responsive-letter-spacing - 为响应式标题调整字距
- fluid-type-scale - 使用响应式字号阶梯
5. 导航模式（MEDIUM-HIGH）
- nav-horizontal-to-hamburger - 移动端将水平导航折叠为汉堡菜单
- nav-tab-bar-mobile - 移动端主导航使用底部标签栏
- nav-breadcrumb-collapse - 移动端截断面包屑
- nav-sidebar-drawer - 移动端将侧边栏导航转换为离屏抽屉
- nav-dropdown-to-fullscreen - 移动端将下拉菜单展开为全宽
- nav-sticky-header-compact - 移动端滚动时压缩页头
6. 触控与交互（MEDIUM）
- touch-min-touch-target - 移动端确保最小 44px 触控目标
- touch-hover-to-tap - 用适合点按的替代方案替换悬停交互
- touch-swipe-affordance - 为横向滚动添加可视化滑动提示
- touch-scroll-snap-mobile - 为类轮播移动界面使用滚动吸附
- touch-input-sizing-mobile - 调整表单输入尺寸以防止 iOS 缩放
- touch-focus-visible-touch - 使用 focus-visible 实现适合触控的焦点样式
7. 响应式媒体（MEDIUM）
- rmedia-responsive-images - 使用 object-fit 实现响应式图片尺寸
- rmedia-video-aspect-ratio - 跨断点保持视频宽高比
- rmedia-icon-size-scaling - 按断点缩放图标，而非随字号缩放
- rmedia-avatar-responsive - 按上下文与断点缩放头像尺寸
- rmedia-background-image-bp - 在断点处切换背景图片
- rmedia-embed-responsive - 通过容器约束使嵌入内容响应式
8. 数据适配（LOW-MEDIUM）
- data-table-to-cards - 移动端将表格转换为卡片
- data-horizontal-scroll-table - 对密集数据表格使用横向滚动
- data-responsive-data-grid - 按屏幕尺寸调整数据网格密度
- data-list-density-mobile - 移动端提高列表项密度
- data-truncate-overflow - 移动端截断溢出文本
- data-responsive-form-layout - 移动端堆叠表单字段，桌面端使用网格
使用方式
阅读各个参考文件以获取详细说明与代码示例：
- 章节定义 - 类别结构与影响级别
- 规则模板 - 用于添加新规则的模板
参考文件
| 文件 | 说明 |
|---|---|
| references/_sections.md | 类别定义与排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本与参考信息 |