fec-responsive-layout SKILL.md skillA
fec-responsive-layout from bovinphang/frontend-craft is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add bovinphang/frontend-craft/fec-responsive-layout@git:20260611.9d7f5e4Pins git:20260611.9d7f5e4 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- bovinphang/frontend-craft
- Path
localized/zh-CN/skills/fec-responsive-layout/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260611.9d7f5e4, committed Jun 11, 2026
- Size
- 2,338 bytes
- Repository stars
- 22
- License
- MIT
用于设计、实现或审查响应式前端布局、移动优先断点、容器查询、流式网格、数据密集表格、触摸目标、安全区域、横竖屏变化、视口溢出或跨设备 UI 行为；中文触发词包括 响应式布局、移动端适配、断点、容器查询、横竖屏、触摸目标。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 响应式布局 适用于需要让页面、工具界面、表格、仪表盘或组件在多设备上稳定工作的前端任务。需要布局模式和检查清单时加载 [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md)。 ## 用途 用内容优先、移动优先和容器感知的方式设计响应式布局，避免只靠固定断点修补溢出。 ## 流程 1. 明确信息优先级：小屏先保留核心任务、关键操作和反馈；次要信息折叠、延后或移入详情层。 2. 选择布局策略：简单页面用 mobile-first 断点；嵌套组件、卡片网格和侧栏优先考虑 container query。 3. 设计流式尺寸：用 `minmax()`、`clamp()`、`aspect-ratio`、`max-width`、`min-width: 0` 和稳定网格轨道控制伸缩。 4. 处理数据密集界面：表格、列表、看板和编辑器需要明确横向滚动、列优先级、冻结列或移动端摘要视图。 5. 保证触摸与键盘：触摸目标、焦点路径、hover 替代、虚拟键盘、安全区域和横竖屏切换都要复核。 6. 关联性能与资源：移动端减少首屏大图、重型图表、同步动画和不必要列渲染。 7. 验证断点之间：检查 375px、768px、1024px、1440px，以及断点中间值是否溢出、遮挡或跳变。 ## 约束 - 不把桌面版缩小当作移动端设计。 - 不让关键功能只依赖 hover 或宽屏侧栏。 - 不用固定高度掩盖内容变化；需要固定格式时用稳定约束和可滚动区域。 - 不用 viewport 字体缩放替代真实排版层级。 - 不让移动端横向溢出成为默认解决方案；只有数据表、画布或编辑器等明确场景可以局部横滚。 ## 预期输出 输出响应式信息优先级、断点或容器策略、关键组件布局模式、触摸/键盘要求、数据密集区域处理方案和验证结果。完成后页面在常见视口和输入方式下不溢出、不遮挡、可操作。
Read the whole file at its exact version.
How to install
mdr add bovinphang/frontend-craft/fec-responsive-layout@sha256:d519e38df42d99f3The line at the top of this page pins the label git:20260611.9d7f5e4, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_hsnxyzvzcxlzu6vn)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jun 11, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (2338 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
bovinphang/frontend-craft · 22 stars · license MIT · pushed 2026-09-26 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_hsnxyzvzcxlzu6vn GET https://markdownregistry.com/api/v1/resolve?ref=bovinphang/frontend-craft/fec-responsive-layout GET https://markdownregistry.com/api/v1/blob/d519e38df42d99f3350df5a479ba12015b514f7e4c66bb1944a68685a19caa7c
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from bovinphang/frontend-craft
Every file in bovinphang/frontend-craft