responsive_design
✓使用流体容器、灵活的单元、媒体查询和适用于所有屏幕尺寸的触摸友好设计来构建响应式、移动优先的布局。在创建或修改 UI 布局、响应式网格、断点样式、移动导航或任何需要适应不同屏幕尺寸的界面时，请使用此技能。适用于处理响应式 CSS、媒体查询、视口设置、Flexbox/网格布局、移动优先样式、断点定义（移动设备、平板电脑、桌面设备）、触摸目标大小、相对单位（rem、em、%）、不同屏幕的图像优化或跨多个设备测试布局。用于涉及多设备支持、响应式设计模式或自适应布局的任何任务。
SKILL.md
Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.
Always start with mobile layout, then enhance for larger screens.
使用流体容器、灵活的单元、媒体查询和适用于所有屏幕尺寸的触摸友好设计来构建响应式、移动优先的布局。在创建或修改 UI 布局、响应式网格、断点样式、移动导航或任何需要适应不同屏幕尺寸的界面时，请使用此技能。适用于处理响应式 CSS、媒体查询、视口设置、Flexbox/网格布局、移动优先样式、断点定义（移动设备、平板电脑、桌面设备）、触摸目标大小、相对单位（rem、em、%）、不同屏幕的图像优化或跨多个设备测试布局。用于涉及多设备支持、响应式设计模式或自适应布局的任何任务。 来源：vuralserhat86/antigravity-agentic-skills。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill responsive_design- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 responsive_design？
使用流体容器、灵活的单元、媒体查询和适用于所有屏幕尺寸的触摸友好设计来构建响应式、移动优先的布局。在创建或修改 UI 布局、响应式网格、断点样式、移动导航或任何需要适应不同屏幕尺寸的界面时，请使用此技能。适用于处理响应式 CSS、媒体查询、视口设置、Flexbox/网格布局、移动优先样式、断点定义（移动设备、平板电脑、桌面设备）、触摸目标大小、相对单位（rem、em、%）、不同屏幕的图像优化或跨多个设备测试布局。用于涉及多设备支持、响应式设计模式或自适应布局的任何任务。 来源：vuralserhat86/antigravity-agentic-skills。
如何安装 responsive_design？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill responsive_design 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/vuralserhat86/antigravity-agentic-skills
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-01