ui-ux-suite

English · 简体中文 · 日本語 · Español · Français

デザインのためのESLintです。正確な行、測定された誤った値、そして正確な修正方法を見つけます。

できること · インストール · 使い方 · 得られるもの · エディターでの動作 · 知っておくとよいこと

claude plugin marketplace add Aboudjem/10x
claude plugin install ui-ux-suite@10x

できること

ほとんどのデザインレビューでは、コントラストを改善するように指摘されます。このツールは、src/styles.css の14行目にある .hero-subtitle の色が #ffffff に対して #fbfbfb で、コントラスト比が1.03対1であること、そして #767676 なら基準を満たすことを示します。リンターエラーと同じ形式を、デザインに適用します。

CSS、JSX、HTML、Tailwindクラスを読み取ります。デフォルトでは何も実行されず、情報がマシンの外に送信されることもなく、キーも一切必要ありません。検出結果は2種類あります。大半を占める、場所を特定した検出結果には次の3つが含まれます。

• 場所を特定。 ファイル、行、セレクターを示します。
• 測定値を表示。 形容詞ではなく、実際の誤った値を示します。
• 修正方法を提示。 正確な before から after への変更と、その根拠となるWCAG基準または名前の付いたUX法則を示します。

残りは、「フォントファミリーが5種類あります。1〜2種類にしましょう」のような、プロジェクト全体に関するものです。問題を評価して名称を示しますが、指摘できる単一の行はありません。

インストール

claude plugin marketplace add Aboudjem/10x
claude plugin install ui-ux-suite@10x

これはClaude Code向けです。Agent Skills形式を読み取る他のエージェントには、このリポジトリから14個のスキルを直接インストールできます。

npx skills add Aboudjem/ui-ux-suite

コマンドラインツールはインストール不要です。npx ui-ux-suite . で実行できます。

npm install -D ui-ux-suite

{ "scripts": { "design-audit": "ui-ux-suite . --fail-under 7" } }

使い方

1. プロジェクトを指定します。

npx ui-ux-suite .

12の評価軸にわたる、重み付けされた10点満点のスコアと、優先順位付きの検出結果が表示されます。設定ファイルもセットアップ手順も不要です。

2. 検出結果を確認します。 これは、このリポジトリに含まれる問題を仕込んだフィクスチャの実際の出力です。本来のスコアは3.7点ですが、その理由は次のとおりです。

- **Where:** `src/styles.css:14` · selector `.hero-subtitle`
- **Measured:** 1.03:1 (APCA Lc 0) (needs 4.5:1)
- **Why:** Text `#fbfbfb` on `#ffffff` measures 1.03:1 (APCA Lc 0). WCAG 2.2 §1.4.3 requires ≥ 4.5:1 for normal text.
- **Fix:** Change `color` on `.hero-subtitle` from `#fbfbfb` to `#767676` (meets 4.5:1 on `#ffffff`), or darken further.
- **Cites:** WCAG 1.4.3 Contrast (Minimum) (AA)

チェックアウトしたリポジトリで npx ui-ux-suite test/fixtures/planted-ux-problems を実行して確認できます。

3. CIに組み込みます。 パイプラインに合った出力形式とゲートを選びます。

npx ui-ux-suite . --json | jq              # machine-readable, banner goes to stderr
npx ui-ux-suite . --html report.html       # standalone HTML report
npx ui-ux-suite . --sarif ui-ux.sarif      # SARIF 2.1.0 for GitHub code scanning
npx ui-ux-suite . --fail-under 7           # exit 1 when the score drops below 7
npx ui-ux-suite . --write-baseline .uiux-baseline.json   # freeze today's debt
npx ui-ux-suite . --baseline .uiux-baseline.json --fail-on-regression
npx ui-ux-suite . --tags dimension:accessibility --exclude-tags severity:nice-to-have

すべてのフラグはdocs/cli.mdに記載されています。

得られるもの

• 順位付きレポート。Markdown、JSON、HTML、SARIFのいずれかで出力でき、読み手が機械でも人でも利用できます。
• 12の加重ディメンションにわたる10点満点のスコア。アクセシビリティが最も大きな比重を占めます。
• --fail-underを使った絶対基準、または新しい指摘やスコア低下で失敗するベースラインを設定できるCIゲート。
• エージェントが呼び出せる14のスキルと16のツール。チャットで「このプロジェクトのデザインを監査して」と依頼できます。

エディターで使えます

Claude Code、Cursor、Codex、Copilot、Gemini CLI、およびnpx skills addを通じて70以上の他のエージェントで利用できます。 スキルはMarkdownなので、エディターが指定するどのモデルでも動作します。

claude mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp
codex mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp

知っておくとよいこと

重要

監査は行いますが、編集は一切行いません。指定したプロジェクトのソースファイルを変更することはなく、修正案は適用できるようbeforeからafterへの変更として表示されます。書き込むのはレポートファイルとベースラインファイルのみで、指定した場合に限ります。

• データがマシンの外に送信されることはありません。 Nodeの組み込み機能のみを使用し、APIキーもテレメトリーも不要です。静的監査ではネットワークに接続せず、ディープモードでは指定されたURLのみを確認します。
• デフォルトではソースを静的に解析します。 ディープモードはオプトイン方式で、playwright-coreと@axe-core/playwrightが必要です。これらがない場合は、ソースから得られる指摘のみを返します。
• 数値にはゲートが設けられています。 npm testでは356件のテストを実行します。また、同梱の不具合を含むフィクスチャでは、ファイル、行、修正方法を含む指摘が引き続き出力される必要があります。

詳細はこちら

• docs/cli.md：すべてのフラグ、終了コード、使用例
• docs/editors.md：エディターごとのインストール方法とMCP設定
• docs/scoring.md：12の重みとスコアの算出方法
• docs/science.md：指摘の根拠となるWCAG基準とUX法則
• docs/faq.mdおよびdocs/comparison.md
• CHANGELOG.md、CONTRIBUTING.md、LICENSE

_{MIT · Adam Boudjemaaが制作}