---
name: ui-help
description: UI Design Grounding プラグインの全コマンド一覧をカテゴリ別に表示する。コマンドの意味・使い分けが分からないとき、どのコマンドを使うべきか迷ったときに使用する。「UIコマンド一覧」「どのコマンドを使えばいい？」「スキル一覧」と聞かれたときにも使用する。
user-invocable: true
argument-hint: "[カテゴリやキーワードで絞り込み（省略可）]"
---

# ui-help

ユーザーに UI Design Grounding プラグインのコマンド一覧を提示する。

## 出力

引数なしの場合は全コマンド一覧を、引数ありの場合は該当カテゴリ/キーワードに絞り込んで表示する。

以下の内容を**そのままユーザーに表示する**（追加の読み込みや分析は不要）:

---

## UI Design Grounding — コマンド一覧

### 設計

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/design-ui` | 要件からUI構造・画面設計を整理。画面遷移・情報階層・UI状態（初期/ローディング/成功/エラー/空）を設計 | 新しい画面を設計したい |
| `/implement-ui` | デザインをコンポーネント分解（Atomic Design）・責務整理・状態マトリックスに翻訳 | デザインから実装プランへ落としたい |
| `/init-design` | DESIGN.md を生成・更新。既存CSS/トークンから自動抽出対応。Google Stitch互換9セクション構成 | デザインシステムの基盤を定義したい |

### 評価

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/audit-ui` | a11y・パフォーマンス・トークン準拠・レスポンシブ・アンチパターンの5軸で監査（各0-4点、/20点）。問題を対応スキルへ自動マッピング | 技術品質を一括チェックしたい |
| `/score-ui` | ニールセン10原則で採点（/40点）＋ 5種ペルソナ（初回/熟練/a11y/モバイル/ストレス）でレッドフラグテスト＋認知負荷アセスメント。課題を対応スキルへ自動マッピング | UX品質を構造的に評価したい |

### ビジュアル調整

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/boost-ui` | タイポ・色・空間・モーション・視覚効果の5軸で個性度を評価し、1-2軸に集中して増幅。AI slop チェック付き | 地味・退屈・テンプレ感がある |
| `/calm-ui` | 色・装飾・タイポ・モーション・レイアウトの過剰度を診断。60-30-10配色、OKLCH彩度調整で洗練化 | うるさい・ごちゃごちゃ・派手すぎる |
| `/arrange-ui` | 4ptグリッド準拠、スペーシングリズム、スクイントテスト、光学的調整でレイアウトを整える | 余白がバラバラ・階層が不明確 |
| `/typeset-ui` | モジュラースケール、Fluid Type（`clamp()`）、垂直リズム、OpenType機能でタイポグラフィを最適化 | 文字が読みにくい・フォント階層が不明確 |
| `/animate-ui` | Hero→Feedback→Transition→Delightのレイヤード設計。イージング体系、`prefers-reduced-motion` 対応 | インタラクションを気持ちよくしたい |

### コンテンツ

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/clarify-ui` | ボタンラベル（動詞+目的語化）、エラーメッセージ（何→なぜ→どう直す）、用語辞書の統一、トーン適応 | 文言が分かりにくい・用語がバラバラ |

### 堅牢化・最適化

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/guard-ui` | オーバーフロー処理、国際化膨張率（独+30%等）、CSS論理プロパティ、エッジケース体系チェック | i18n・エラー耐性・境界値を強化 |
| `/adapt-ui` | コンテンツドリブンなブレイクポイント、コンテナクエリ、入力方式検出（pointer/hover）、セーフエリア | モバイル対応・マルチデバイス適応 |
| `/optimize-ui` | Core Web Vitals（LCP/INP/CLS）、レンダリング最適化、レスポンシブ画像（WebP/AVIF）、フォント最適化 | 表示が遅い・CWV改善 |

### 整理・抽出

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/slim-ui` | Cowanの限界（同時4項目）基準で要素を棚卸し。段階的開示へ変換。認知負荷Before/After比較 | 複雑すぎる・情報過多・簡素化したい |
| `/extract-ui` | 3回以上出現パターンを抽出。Primitive→Semantic→Componentの3階層トークン設計。段階的移行計画 | 繰り返しパターンをトークン化・再利用可能にしたい |

### 仕上げ

| コマンド | 何をするか | こんなとき |
|---------|-----------|-----------|
| `/polish-ui` | 10カテゴリ・50+項目をチェックリスト駆動で検証。インタラクション8状態すべて確認。問題は即修正 | 出荷前に全体を仕上げたい |

---

### 典型的なワークフロー

**新規設計**: `/design-ui` → `/init-design` → `/implement-ui` → `/audit-ui`
**既存UIの改善**: `/init-design` → `/audit-ui` or `/score-ui` → 推奨アクションのN番を実行
**リリース前**: `/polish-ui` → `/score-ui`

### 迷ったら

- **何から始める？** → `/init-design`（デザイン基盤）→ `/audit-ui`（現状把握）
- **全体的に良くしたい** → `/polish-ui`（チェックリスト駆動で網羅的に）
- **印象を変えたい** → `/boost-ui`（強める）or `/calm-ui`（抑える）
- **デザインシステムを整えたい** → `/init-design` → `/extract-ui`

---

## 絞り込み対応

ユーザーが引数やキーワードを付けた場合（例: `/ui-help レイアウト`、`/ui-help 評価`）は、上記一覧から該当するコマンドだけを抽出して表示する。キーワードはカテゴリ名・コマンド名・「こんなとき」列のいずれかにマッチさせる。