关于 css-grid-math
帮助将 CSS Grid 作为坐标与轨道尺寸系统来分析的技能。它通过参考资料和工作流指导布局计算、实现决策与调试。
主要功能
- 01计算项目位置与轨道尺寸
- 02解释弹性轨道的尺寸分配
- 03按任务定位相关参考资料
- 04提供调试流程与示例
适用场景
- 01推算网格项目的放置位置
- 02排查弹性轨道宽度异常
- 03编辑布局时应用网格规则
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/css-grid-math确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/grid-layout/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-grid-layout.md详细介绍
CSS Grid 数学
当需要将网格视为坐标和尺寸系统进行推理时，请使用此技能。它有助于计算元素的位置、轨道如何分配空间，以及为什么弹性轨道有时无法产生预期的宽度。
快速开始
- 阅读
guidelines.md，选择最精简的相关文件集合。 - 加载
references/grid-layout/rules.md，以确定实现方案。 - 编辑代码时，加载
references/grid-layout/examples.md。 - 对于多步推导或调试，使用
workflows/debug-grid-layout.md。
内容
| 资源 | 用途 |
|---|---|
guidelines.md | 将任务指向合适的参考文件 |
references/source-map.md | 书籍来源及章节/节追溯信息 |
references/grid-layout/knowledge.md | 核心概念和术语 |
references/grid-layout/rules.md | 实用规则、指南和例外情况 |
references/grid-layout/examples.md | 错误/正确示例和重构方法 |
references/grid-layout/patterns.md | 可复用的公式和实现模式 |
references/grid-layout/checklist.md | 审查清单和警示项 |
workflows/debug-grid-layout.md | 分步工作流 |
来源
内容改编自 Paul McFedries 所著的 Math for Web Design，第 4 章：CSS Grid 数学。
引用信息记录在 references/source-map.md 中。
评论
支持 Markdown