From ui-design-grounding
UI Design Grounding プラグインの全コマンド一覧をカテゴリ別に表示する。コマンドの意味・使い分けが分からないとき、どのコマンドを使うべきか迷ったときに使用する。「UIコマンド一覧」「どのコマンドを使えばいい？」「スキル一覧」と聞かれたときにも使用する。
npx claudepluginhub nextscape/ns-plugins --plugin ui-design-groundingThis skill uses the workspace's default tool permissions.
ユーザーに UI Design Grounding プラグインのコマンド一覧を提示する。
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
ユーザーに 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 評価）は、上記一覧から該当するコマンドだけを抽出して表示する。キーワードはカテゴリ名・コマンド名・「こんなとき」列のいずれかにマッチさせる。