关于 audit-typography
audit-typography 是一项基于清单的 Web 排版审查技能,聚焦具体问题及修复方法。它帮助开发者按优先级检查变更文件,并报告问题位置。
主要功能
- 01涵盖 10 类共 89 条规则
- 02限定审查变更文件或进行全面检查
- 03按类别加载相关规则说明
- 04优先检查严重及高影响问题
- 05报告文件路径与具体修复建议
适用场景
- 01审查变更 CSS 文件的排版
- 02确定 Web 排版问题的处理优先级
- 03重跑适用规则以核验修复
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ mblode/ agent-skills --skill audit-typography安装后在 Claude Code 中输入/audit-typography确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/_sections.md_template.mdbrand-capitalization.mdbrand-color.mdbrand-cross-medium.mdbrand-dark-backgrounds.mdbrand-equity.mdbrand-identifiable-body.mdbrand-licensing.mdbrand-logo-typeface.mddisplay-cuts.mddisplay-drop-caps.mddisplay-grid-breaking.mddisplay-headline-opentype.mddisplay-headline-spacing.mddisplay-large-type.mddisplay-lead-paragraph.mddisplay-swashes.mdfont-body-selection.mdfont-condensed-extended.mdfont-face-setup.mdfont-fallbacks.mdfont-monospaced.mdfont-optical-sizes.mdfont-quality.mdfont-true-styles.mdfont-variable-fonts.mdfont-weight-body.mdhierarchy-body-first.mdhierarchy-caps-subheads.md详细介绍
审查排版
涵盖 10 个类别的 89 条规则,用于评估网页排版质量。聚焦具体问题,并提供具体的修复方法。
审查工作流
在审查期间复制并跟踪此检查清单:
Audit progress:
- [ ] Step 1: Scope changed surfaces and select relevant categories
- [ ] Step 2: Run CRITICAL checks (punctuation, font setup)
- [ ] Step 3: Run HIGH checks (sizing, spacing)
- [ ] Step 4: Run MEDIUM+ checks for remaining categories in scope
- [ ] Step 5: Report findings with file:line and concrete fixes
- 除非要求全面检查,否则只审查已更改的文件。
- 扫描 CSS 中的 font-family、@font-face、font-feature-settings 以及尺寸和间距属性,以确定相关类别。
- 按类别前缀逐步加载规则文件——只读取适用的内容。
- 优先处理 CRITICAL 和 HIGH 级别的问题,再处理优先级较低的润色项。
- 修复后,在最终定稿前重新检查相关规则。
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 | 规则数 |
|---|---|---|---|---|
| 1 | 标点与特殊字符 | CRITICAL | punct- | 12 |
| 2 | 字体选择与字重 | CRITICAL | font- | 10 |
| 3 | 尺寸与行长 | HIGH | size- | 7 |
| 4 | 间距与节奏 | HIGH | spacing- | 10 |
| 5 | OpenType 功能 | MEDIUM-HIGH | opentype- | 8 |
| 6 | 层级与比例 | MEDIUM-HIGH | hierarchy- | 8 |
| 7 | 对齐与布局 | MEDIUM | layout- | 8 |
| 8 | 字体搭配 | MEDIUM | pairing- | 10 |
| 9 | 品牌与身份 | LOW-MEDIUM | brand- | 8 |
| 10 | 展示文本与标题 | LOW-MEDIUM | display- | 8 |
快速参考
只阅读当前审查范围所需的内容:
- 类别概览与影响说明:
rules/_sections.md - 规则级指导与示例:
rules/<prefix>-*.md
规则文件示例:
rules/punct-smart-quotes.md
rules/font-true-styles.md
rules/size-line-height.md
每个规则文件都包含:
- 规则的重要性说明
- 错误示例
- 正确示例
审查结果格式要求
按以下格式报告问题:
## Typography Audit Findings
### path/to/file.css
- [CRITICAL] `punct-smart-quotes`: Straight quotes used in heading text.
- Fix: Replace `"` with `“`/`”` entities.
### path/to/clean-file.css
- ✓ pass
- 按文件归类问题。
- 有行号时使用
file:line。 - 说明问题并提出具体的修复方法。
- 对无问题的文件标记为
✓ pass。
评论
支持 Markdown