mcpField
G
gate

gate

github.com/plugin87テスト・品質3.0k143 回インストール1 日前に更新
リポジトリ

gate について

gateは、プロジェクトのUI品質チェックを実行し、実際の結果を報告するClaudeスキルです。不合格項目を修正して再確認し、対象のHTMLでは状態やレスポンシブ表示も検証します。

主な機能

  1. 01accuracy reportを実行
  2. 02実際の合格数と失敗項目を報告
  3. 03問題を修正して再実行
  4. 04状態とレスポンシブ表示を検証

活用シーン

  1. 01プロジェクト規則に沿ってUI成果物を確認
  2. 02アクセシビリティやトークンの問題を発見
  3. 03描画後のHTMLの状態とレイアウトを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill gate

インストール後、Claude Code で/gateを入力して読み込まれたか確認します。

詳細

ステップ 0 — キットはありますか？ このスキルはキットのファイルを読み込みます。一度確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされたのはスキルのフォルダーだけです。これは npx skills add の実行時に起こります。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの 内容を推測してはいけません。

品質ゲートをすべて実行し、実際の出力を報告してください。記憶や推論に基づく数値を報告してはいけません。

  1. 実行します：node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs （tokens + contrast + spec + no-hardcode + theme-refs + no-emoji + real-render WCAG + state-aware、ライトとダークの両方 — すべて合格が必須）。
  2. 出力された N/N の行をそのまま報告します。
  3. すべてに合格していない場合：
    • 失敗した各チェックを原文どおりに列挙します。
    • 原因を修正します（チェックを抑制してはいけません）。
    • 合格するまで再実行します。失敗が残っている間は、成功したと報告してはいけません。
  4. このセッションでレンダリングされた HTML に変更を加えた場合は、ゲートでは証明できないピクセル単位の正確性も確認してください。
    • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark] を実行します
    • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file> を実行します
    • レンダリングして目視確認します：ハーネスのスクリーンショットを撮り、ポインターをハーネスの外に置いて、すべての状態を確認し、各コントロールをクリックして状態が変わることを確認します。

確認範囲についての誠実さ：これらのゲートで証明できるのは、客観的な正確性（トークン、アクセシビリティ、ドリフトがないこと）です。 デザインの良さは証明できません。node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs と人によるレビューを併用してください。 美的品質について、自動チェックで 100％だと主張してはいけません。

コメント

Markdown 対応