关于 responsive-layout-math
面向设计师和开发者的技能，用比例且有边界的公式推导响应式 CSS 布局，并提供实现与调试参考和工作流。
主要功能
- 01推导流式布局公式
- 02设置比例边界
- 03使用 CSS 实现模式
- 04参考示例与检查清单
- 05遵循布局调试工作流
适用场景
- 01用推导值替代任意断点
- 02实现流式响应式布局
- 03审查或重构布局 CSS
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/responsive-layout-math确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/fluid-layouts/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/design-fluid-layout.md详细介绍
响应式布局数学
使用此技能，将固定布局意图转化为成比例、有界且可测试的响应式 CSS。它尤其适用于需要推导公式，而不是随意选择断点值的任务。
快速开始
- 阅读
guidelines.md，选出最精简的相关文件集。 - 加载
references/fluid-layouts/rules.md，以确定实现方案。 - 编辑代码时，加载
references/fluid-layouts/examples.md。 - 对于多步骤推导或调试，使用
workflows/design-fluid-layout.md。
目录
| 资源 | 用途 |
|---|---|
guidelines.md | 将任务指向合适的参考文件 |
references/source-map.md | 书籍来源及章节／小节的对应关系 |
references/fluid-layouts/knowledge.md | 核心概念和术语 |
references/fluid-layouts/rules.md | 实用规则、指南和例外情况 |
references/fluid-layouts/examples.md | 错误／正确示例及重构方法 |
references/fluid-layouts/patterns.md | 可复用的公式和实现模式 |
references/fluid-layouts/checklist.md | 审查清单和警示项 |
workflows/design-fluid-layout.md | 分步工作流 |
来源
改编自 Paul McFedries 所著的 Math for Web Design，第 6 章：响应式设计的数学。
引文记录在 references/source-map.md 中。
评论
支持 Markdown