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. 01Webサイトの改修前にタイポグラフィを監査
  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 対応