mcpField
U
ui-review

ui-review

github.com/srbhrデザイン・UI29.0k69 回インストール今日更新
リポジトリ

ui-review について

フロントエンドの変更が Swiss International Style に沿っているかを確認する、コミット前のレビュー手順です。自動スキャンと手動チェックリストを組み合わせ、定型形式で結果を報告します。

主な機能

  1. 01禁止された角丸・グラデーション・影のスキャン
  2. 02色、書体、境界線、影の確認
  3. 03ボタン、カード、入力欄のレビュー
  4. 04FAIL、WARN、PASS 形式での報告

活用シーン

  1. 01コミット前のフロントエンドスタイル確認
  2. 02Swiss デザイン規則に違反するコードの特定

インストール

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

$npx skills add https://github.com/srbhr/resume-matcher --skill ui-review

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

詳細

UI レビュー

変更をコミットする前に、フロントエンドの変更がスイス・インターナショナル・スタイルに準拠していることを確認します。

ステップ 1：自動チェックを実行する

# Forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden gradients
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden soft shadows
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden blur
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

ステップ 2：手動レビュー

変更した各ファイルについて、次を確認します。

色
  • 背景：キャンバス #F0F0E8 または白
  • テキスト：インク #000000
  • リンク：ハイパーブルー #1D4ED8
  • 成功：シグナルグリーン #15803D
  • エラー：アラートレッド #DC2626
  • スイスのパレット以外の色を使用していない
タイポグラフィ
  • 見出し：font-serif
  • 本文：font-sans
  • ラベル：font-mono text-sm uppercase tracking-wider
枠線とシャドウ
  • すべての要素：rounded-none
  • 枠線：border-2 border-black
  • シャドウ：硬いシャドウ shadow-[Xpx_Xpx_0px_0px_#000000]
  • ホバー：シャドウの領域に移動する
コンポーネント
  • ボタン：角は直角、硬いシャドウ、押下エフェクト
  • カード：白い背景、黒い枠線、硬いシャドウ
  • 入力欄：rounded-none、黒い枠線

アンチパターンのクイックスキャン

変更したファイルに次の項目が見つかった場合は、すぐに指摘します。

アンチパターン理由
rounded-sm/md/lg/xl/full角は直角のみ
bg-gradient-*グラデーションは使用しない
shadow-sm/md/lg/xl硬いシャドウのみ
blur-* / backdrop-blurぼかし効果は使用しない
パステルカラースイスのパレットは鮮やかな色を使用

ステップ 3：報告する

[FAIL] file:line - Description of violation
[WARN] file:line - Potential issue to verify
[PASS] All checks passed

参考資料

デザインシステムの全容：docs/agent/design/style-guide.md

コメント

Markdown 対応