gholtzap/lintapple

lintapple – 開発者向けUIリンティングツール

概要 – lintapple は、Nodeベースのコマンドラインユーティリティで、ui-policy.json ファイルで定義した視覚デザインルールのセットに対してWebアプリのユーザーインターフェースをチェックします。AIが生成する可能性のあるUIの問題を検出し、「AIが悪いUIを作ることは不可能であるべき」ことを保証することを目的としています。

使い方

1. 開発依存関係としてインストールします（Node 22以上）。init コマンドは ui-policy.json ファイルをスキャフォールドし、lint:ui npmスクリプトを追加します。
2. アプリが提供されている間にスクリプトを実行します（デフォルトは http://localhost:3000）。ツールはページをクロールし、フォント、コントラスト、コントロールサイズ、間隔、配置、角の半径などを測定し、結果のリストを出力します。
3. 各結果は、違反したルール、関連する要素、測定値、および推奨される修正を示します。終了コードは、CIが実行が成功したか（0）、問題が見つかったか（1）、または完了に失敗したか（2）を認識できるようにします。
4. JSONレポートを出力するか（--json）、ツールを異なるURLに向けることができます。
5. 非同期で読み込まれるページの場合、CSSセレクター（--ready）でページの準備ができたタイミングをlintappleに指示できます。

Playwrightとの統合 – 小さなヘルパー（expectUI）をPlaywrightテストでインポートできます。ページの準備ができたら、await expectUI(page, testInfo) を呼び出します。UI違反があるとテストが失敗し、JSONレポートがテスト出力に添付されます。

マークアップヘルパー – ほとんどのチェックは追加のマークアップなしで機能しますが、データ属性を追加してリンターにより多くのレイアウトコンテキストを提供できます：

• data-ui-stack、data-ui-actions、data-ui-container – 間隔チェック用のグループ。
• data-ui-number – 等幅数字が必要な数値。
• data-ui-content – テキストが境界内に収まる必要があるコンテナ。
• data-ui-align / data-ui-align-item – 配置グループ。
• data-ui-radius / data-ui-radius-inner – 一貫した角の半径とインセット関係を強制します。

ポリシーファイルで controlContainers を設定して、既存のボタンコンテナをターゲットにすることもできます。

重要性 – UIの一貫性を手動で強制するのは難しく、特にUIコードがAIツールによって生成または変更される場合に困難です。lintappleは、コードが出荷される前に視覚基準（フォントサイズ、コントラスト比、ボタンサイズ、配置など）が尊重されているかを自動的に検証する方法を開発者に提供し、既存のテストパイプラインに直接接続します。

ライセンス – MIT。

---

すべての詳細はリポジトリのREADMEから直接取得されています。