sunflowermm/responsive-design
.cursor/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/answer-format
development
VerifiedTrustedCommunity
统一回复版式：短、结构化、可复制；减少空话
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-tools
tools
VerifiedTrustedCommunity
MCP 工具地图：默认工作流、web_search、何时启用 desktop/browser/memory
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-search
development
VerifiedTrustedCommunity
检索栈：web_search（13 提供商 + parallel-free 免费通道）、web_fetch、与 office-research 分工
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-memory
data-ai
VerifiedTrustedCommunity
工作区 Markdown 记忆 + memory 工作流向量记忆的使用边界
145SKILL.mdUpdated Jun 12, 2026