mcpField
A
audit-typography

audit-typography

github.com/mblode设计与 UI16944 次安装2 天前更新
代码仓库

关于 audit-typography

audit-typography 是一项基于清单的 Web 排版审查技能,聚焦具体问题及修复方法。它帮助开发者按优先级检查变更文件,并报告问题位置。

主要功能

  1. 01涵盖 10 类共 89 条规则
  2. 02限定审查变更文件或进行全面检查
  3. 03按类别加载相关规则说明
  4. 04优先检查严重及高影响问题
  5. 05报告文件路径与具体修复建议

适用场景

  1. 01审查变更 CSS 文件的排版
  2. 02确定 Web 排版问题的处理优先级
  3. 03重跑适用规则以核验修复

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/mblode/agent-skills --skill audit-typography

安装后在 Claude Code 中输入/audit-typography确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

rules/
_sections.md
_template.md
brand-capitalization.md
brand-color.md
brand-cross-medium.md
brand-dark-backgrounds.md
brand-equity.md
brand-identifiable-body.md
brand-licensing.md
brand-logo-typeface.md
display-cuts.md
display-drop-caps.md
display-grid-breaking.md
display-headline-opentype.md
display-headline-spacing.md
display-large-type.md
display-lead-paragraph.md
display-swashes.md
font-body-selection.md
font-condensed-extended.md
font-face-setup.md
font-fallbacks.md
font-monospaced.md
font-optical-sizes.md
font-quality.md
font-true-styles.md
font-variable-fonts.md
font-weight-body.md
hierarchy-body-first.md
hierarchy-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
  1. 除非要求全面检查,否则只审查已更改的文件。
  2. 扫描 CSS 中的 font-family、@font-face、font-feature-settings 以及尺寸和间距属性,以确定相关类别。
  3. 按类别前缀逐步加载规则文件——只读取适用的内容。
  4. 优先处理 CRITICAL 和 HIGH 级别的问题,再处理优先级较低的润色项。
  5. 修复后,在最终定稿前重新检查相关规则。

按优先级划分的规则类别

优先级类别影响前缀规则数
1标点与特殊字符CRITICALpunct-12
2字体选择与字重CRITICALfont-10
3尺寸与行长HIGHsize-7
4间距与节奏HIGHspacing-10
5OpenType 功能MEDIUM-HIGHopentype-8
6层级与比例MEDIUM-HIGHhierarchy-8
7对齐与布局MEDIUMlayout-8
8字体搭配MEDIUMpairing-10
9品牌与身份LOW-MEDIUMbrand-8
10展示文本与标题LOW-MEDIUMdisplay-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 `&ldquo;`/`&rdquo;` entities.

### path/to/clean-file.css
- ✓ pass
  • 按文件归类问题。
  • 有行号时使用 file:line。
  • 说明问题并提出具体的修复方法。
  • 对无问题的文件标记为 ✓ pass。

评论

支持 Markdown