sunflowermm/responsive-design
.claude/skills/responsive-design/SKILL.md
当需要实现响应式布局（断点、流式排版、容器查询、移动优先）时使用。
$ install --global
skillsauthnpx skillsauth add sunflowermm/XRK-AGT responsive-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 11:57 PM28.4s4 files scanned
SKILL.md
- name:
- responsive-design
- description:
- 当需要实现响应式布局（断点、流式排版、容器查询、移动优先）时使用。
权威入口
.cursor/skills/responsive-design/references/breakpoint-strategies.md.cursor/skills/responsive-design/references/fluid-layouts.md.cursor/skills/responsive-design/references/container-queries.md
适用场景
- 页面需适配手机、平板、桌面等多尺寸设备。
- 组件需要独立响应父容器变化。
- 需要避免硬编码尺寸造成的溢出与断行。
非适用场景
- 不用于替代业务逻辑或接口性能优化。
- 不用于“只做 PC 固定宽度”的单端页面。
执行步骤
- 采用移动优先设计基础布局。
- 定义关键断点与内容重排策略。
- 关键组件启用容器查询与弹性单位。
- 检查表单、表格、导航在窄屏可用性。
- 验证 375/768/1024/1440 等尺寸表现。
常见陷阱
- 仅缩放元素，不重排信息结构。
- 用过多固定像素导致局部溢出。
- 忽略横屏与超宽屏下的阅读体验。
Related Skills
sunflowermm/assistant-core
tools
VerifiedTrustedCommunity
助手向通用“做事/回复”技能：先结论后步骤，给关键路径与验证方法
130SKILL.mdUpdated Apr 27, 2026
sunflowermm/answer-format
development
VerifiedTrustedCommunity
统一“回答格式”约束工具：减少长篇空话，让输出可复制
130SKILL.mdUpdated Apr 27, 2026
sunflowermm/assistant-core
tools
VerifiedTrustedCommunity
助手向通用“做事/回复”技能：先结论后步骤，给关键路径与验证方法
122SKILL.mdUpdated Apr 15, 2026
sunflowermm/answer-format
development
VerifiedTrustedCommunity
统一“回答格式”约束工具：减少长篇空话，让输出可复制
122SKILL.mdUpdated Apr 15, 2026