SuperAPI AI 工具集

responsive-system

设计与创作

查看项目

更新于 10-15 21:48

技能介绍

用途:在实现响应式布局、移动优先设计或自适应组件时使用,覆盖断点、容器查询与流体排版。

主要能力:给出断点表(xs 0-479px 默认、sm 480-719px、md 720-919px、lg 920-1199px、xl 1200px+,对应 Tailwind 前缀);提供移动优先网格、容器查询、流体排版(clamp)、隐藏/显示等代码模式;给出 Tailwind v4 的 @theme 断点配置;附验证清单(移动优先、复杂布局用容器查询、clamp() 流体尺寸、移动端触控目标 44x44px、移动端无横向滚动)与最佳实践(从移动端开始向上增强、组件用容器查询、真实设备测试;避免桌面优先、全部固定断点、忽略触控目标、跳过移动端测试)。

使用方式:资料要求先通过 TeamCreate 启动 3 个 agent,包括 fuse-ai-pilot:explore-codebase 检查现有断点、fuse-ai-pilot:research-expert 研究容器查询支持;实现后运行 fuse-ai-pilot:sniper 进行验证。

适用场景:需要统一断点体系、组件级自适应、流体字号与移动端适配的前端实现。

限制:资料未提供安装命令、依赖版本、平台支持范围、收费信息或效果数据,暂未提供。