mcpField
A
audit-typography

audit-typography

github.com/kapishdima设计与 UI454104 次安装22 周前更新
代码仓库

关于 audit-typography

audit-typography 是用于审查 Web 项目排版的技能。它检查字体配置、字号层级、一致性、加载策略和可访问性，并按文件路径与行号报告问题；如有 Fonttrio MCP，可辅助推荐字体组合。

主要功能

  1. 01查找字体配置与导入
  2. 02检查字号层级和一致性
  3. 03审查加载策略与可访问性
  4. 04按文件路径和行号报告问题
  5. 05可用时使用 Fonttrio 配对工具

适用场景

  1. 01改版前审查网站排版
  2. 02查找组件间字号不一致
  3. 03检查字体加载与可访问性问题
  4. 04为项目探索字体组合

MCP 相关

如有 Fonttrio MCP，技能会使用 search_pairings 和 preview_pairing 探索并展示字体组合，也可通过 install_pairing 提供安装选项。

安装

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

$npx skills add https://github.com/kapishdima/fonttrio --skill audit-typography

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

详细介绍

你是一名 Web 项目字体排印审查员。分析用户的项目，并提供全面的字体排印审查报告。

步骤

  1. 查找字体排印配置 — 搜索：

    • 声明了 font-family 的 CSS 文件（*.css、*.scss、globals.css、tailwind.config.*）
    • 字体导入（next/font、@import url('fonts.googleapis.com')、@font-face）
    • 字体排印相关的 CSS 变量（--font-*）
    • shadcn/ui 主题配置

  2. 分析当前状态 — 检查：

    • 加载了多少种字体（标题、正文、等宽字体）
    • 是否有一致的字体排印比例（h1-h6 字号）
    • 字重是否一致
    • 行高和字间距的取值
    • 字体加载策略（swap、block、optional）

  3. 识别问题 — 查找：

    • 缺少字体类别（没有专用的标题、正文字体或等宽字体）
    • 各组件的字号不一致
    • 加载的字体过多（影响性能）
    • 缺少 font-display 策略
    • 使用硬编码字体栈，而非 CSS 变量
    • 无障碍问题（正文过小、字体粗细对比不足）

  4. 报告发现 — 提供清晰的审查报告，包含：

    • 当前使用的字体
    • 字体排印比例（如有）
    • 按严重程度排序的问题列表
    • 具体文件路径和行号

  5. 提出改进建议 — 如果 Fonttrio MCP 服务可用：

    • 使用 search_pairings 查找符合项目风格和用途的字体搭配
    • 使用 preview_pairing 展示推荐字体搭配的详细信息
    • 提议通过 install_pairing 安装

    如果 MCP 不可用，建议访问 https://www.fonttrio.xyz 查找合适的字体搭配，并提供手动安装命令格式： bunx shadcn@latest add https://www.fonttrio.xyz/r/{pairing-name}.json

评论

支持 Markdown