ui-ux-pro-max
UI/UXデザインに関するあらゆる要求に対応するスキルです。スタイル、カラーパレット、フォント選定、UXガイドライン、チャート種別の選択から、アクセシビリティや高パフォーマンスを考慮した実装まで、対応スタック全般をカバーします。「デザイン」「UI」「UX」「カラーパレット」「タイポグラフィ」「アクセシビリティ」「レスポンシブデザイン」「スタイルガイド」などのキーワードが登場した際、またはユーザー向け画面の構築時にトリガーされます。
description の原文を見る
> Use when the user needs full UI/UX design intelligence — styles, palettes, fonts, UX guidelines, chart selection, and accessible, performant implementation across any supported stack. Triggers: user says "design", "UI", "UX", "color palette", "typography", "accessibility", "responsive design", "chart type", "style guide", building any user-facing interface.
SKILL.md 本文
UI/UX Pro Max
概要
デザイン専門知識とエンジニアリング精度を組み合わせた、包括的なUI/UXデザイン知能システムです。このスキルは、スタイル選択、カラーパレット、タイポグラフィ、UXヒューリスティック、データビジュアライゼーション、マルチスタック実装をカバーする、本番環境対応のガイダンスを提供します。すべての推奨事項は厳密な優先度階層を通してフィルタリングされ、アクセシビリティとパフォーマンスが美しさのために決して犠牲にされないことを保証します。
フェーズ 1: 要件の洗い出し
- 製品タイプとターゲットオーディエンスを特定する
- プラットフォーム(Web、モバイル、デスクトップ)を決定する
- 既存のブランドガイドラインまたはデザインシステムを評価する
- アクセシビリティ要件を定義する
- パフォーマンスバジェットを設定する
STOP — デザイン推奨を行う前に、要件をユーザーと確認してください。
優先度階層(変更不可の順序)
これらの優先度をスキップ、または順序を変更しないでください。アクセシビリティは常に最優先です。
- アクセシビリティ — WCAG 2.1 AA以上、AAA推奨
- コントラスト比: 通常テキスト 4.5:1、大きいテキスト 3:1
- キーボードナビゲーション: すべてのインタラクティブ要素がフォーカス可能、ビジブルフォーカスリング
- テキスト以外のコントロールすべてにARIAラベルを付与
- 動的コンテンツのスクリーンリーダー告知
- 減速モーション:
prefers-reduced-motionを尊重
- タッチターゲット — 最小 44x44px(Apple HIG / WCAG 2.5.5)
- ターゲット間隔: 最小 8px
- クリック可能な領域はパディングで視覚的範囲を超えることがあります
- パフォーマンス
- 画像: WebP with AVIF フォールバック、スクロール下部の遅延読み込み
- CLS < 0.1, LCP < 2.5s, FID < 100ms
- フォント読み込み:
font-display: swap、重要フォントのプリロード - バンドル: ルートのコード分割、未使用コンポーネントのツリーシェイク
- スタイル — 1-3が満たされた後のみ適用
- レイアウト — 構成とスペーシングは最後に適用
フェーズ 2: スタイル選択
STOP — 実装に進む前に、根拠とともにスタイル推奨を提示してください。
スタイル選択決定表
| コンテキスト | 推奨スタイル | 理由 |
|---|---|---|
| SaaS ダッシュボード | ミニマリズム、スイス、Material 3 | クリーン、データ中心、プロフェッショナル |
| ポートフォリオ | ブルータリズム、マキシマリズム、グラスモーフィズム | 表現的、記憶に残る |
| Eコマース | クリーン、Material 3、スイス | 信頼、明確性、コンバージョン |
| モバイルアプリ | Material 3、ニューモーフィズム、ミニマリズム | ネイティブ感、親指操作フレンドリー |
| ランディングページ | グラスモーフィズム、ネオブルータリズム、ジャパンディ | ビジュアルインパクト、ヒーロー焦点 |
| エンタープライズ/B2B | スイスデザイン、ミニマリズム | 権威、情報密度 |
| クリエイティブエージェンシー | マキシマリズム、ブルータリズム、サイバーパンク | ユニークさ、ポートフォリオ展示 |
| ヘルス/ウェルネス | ジャパンディ、ミニマリズム | 落ち着き、信頼性 |
| ファイナンス | スイス、Material 3 | 保守的、プロフェッショナル |
| キッズ/ファミリー | クレイモーフィズム、マキシマリズム | 遊び心、引き付け |
スタイル参照(主要カテゴリ)
ガラスと透明性:
- グラスモーフィズム:
backdrop-filter: blur(10px)、半透明背景、微妙なボーダー - フロストガラス: より強いぼかし(20px以上)、低い不透明度、ビジーな背景で機能
- アクリル(Fluent Design): ノイズテクスチャオーバーレイ + ぼかし
ミニマルと清潔:
- ミニマリズム: 最大ホワイトスペース、単一アクセントカラー、限定要素数
- スイスデザイン: グリッドベース、Helvetica/Grotesk、非対称バランス
- ジャパンディ: ウォームニュートラル、有機形状、隠れた複雑性
大胆で表現的:
- ブルータリズム: 生のさらされた構造、システムフォント、ハードなボーダー、border-radius なし
- ネオブルータリズム: ブルータリズム + 明るいアクセントカラー + ドロップシャドウ
- マキシマリズム: レイヤードテクスチャ、混合フォント、情報密度
深さと立体感:
- ニューモーフィズム: 同色背景の柔らかい内側/外側シャドウ
- Material Design 3: エレベーショントークン、トーンサーフェス、ダイナミックカラー
- クレイモーフィズム: 膨らんだ3D外観、パステルカラー、内側シャドウ
暗くて雰囲気的:
- ダークモード: OLED対応(#000背景)、薄めのプライマリ、低い明るさ
- サイバーパンク: 暗いネオン、グリッチエフェクト、モノスペースアクセント
- ノワール: 高コントラスト、グレースケール + 単一アクセント
フェーズ 3: カラーとタイポグラフィ
STOP — コンポーネント構築前に、承認のためパレットとフォントペアリングを提示してください。
カラーパレット選択ルール
| パレットカテゴリ | 製品タイプ | 特性 |
|---|---|---|
| SaaS/B2B(24パレット) | ダッシュボード、管理ツール | プロフェッショナルブルー、ティール、スレート |
| Eコマース(20パレット) | ショップ、マーケットプレイス | ウォーム、信頼構築アンバー、グリーン |
| ヘルス/ウェルネス(18パレット) | ヘルスアプリ、瞑想 | 落ち着きグリーン、ソフトブルー、ラベンダー |
| ファイナンス(15パレット) | バンキング、トレーディング | ディープブルー、ゴールド、保守的ニュートラル |
| クリエイティブ(22パレット) | ポートフォリオ、エージェンシー | 大胆、飽和、予想外の組み合わせ |
| ソーシャル(16パレット) | コミュニティ、ソーシャルアプリ | 活気、エネルギッシック、グラデント対応 |
| エデュケーション(14パレット) | ラーニング、コース | フレンドリー、親しみやすい、中程度の彩度 |
| エンタープライズ(12パレット) | コーポレートツール | 薄め、権威的、高コントラスト |
| キッズ/ファミリー(10パレット) | 子供向けアプリ | 明るいプライマリ、丸い、遊び心 |
| ラグジュアリー(10パレット) | プレミアムブランド | ブラック、ゴールド、ミニマル、高ホワイトスペース |
カラートークンルール
- プライマリ: ブランドアイデンティティカラー、CTA と主要アクション用
- セカンダリ: 補色、セカンダリアクション、アクセント用
- ニュートラル: テキスト、ボーダー、背景用グレースケール(最小9段階)
- セマンティック: success (#22C55E)、warning (#F59E0B)、error (#EF4444)、info (#3B82F6)
- セマンティックトークンとして常に定義:
--color-blue-500でなく--color-action-primary
ダークモードパレットルール
| ルール | 実装 |
|---|---|
| 色を反転しない | ダーク適切な同等品にリマップ |
| 彩度 10-20% 低下 | ダーク背景での目の疲れ防止 |
| エレベーション = より軽いサーフェス | ライトモードのようにシャドウベースではない |
| テキスト階層 | #E2E8F0(プライマリ)、#94A3B8(セカンダリ)、#64748B(ターシャリ) |
フォントペアリング(トップ10)
| ペアリング | 最適用途 |
|---|---|
| Inter + Source Serif 4 | SaaS、ダッシュボード |
| Geist + Geist Mono | 開発者ツール、テクニカル |
| DM Sans + DM Serif Display | マーケティング、エディトリアル |
| Plus Jakarta Sans + Lora | モダンプロフェッショナル |
| Outfit + Newsreader | クリエイティブエージェンシー |
| Manrope + Bitter | エンタープライズアプリケーション |
| Space Grotesk + Space Mono | テックスタートアップ |
| Satoshi + Erode | プレミアム/ラグジュアリー |
| General Sans + Gambetta | エディトリアル/パブリッシング |
| Cabinet Grotesk + Zodiak | 大胆なブランディング |
タイポグラフィスケール(デフォルト)
--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem
フェーズ 4: UX ガイドライン適用
ナビゲーションルール
- プライマリナビゲーション: 最大7項目(Miller の法則)
- 現在地は常に表示(ブレッドクラム、またはアクティブ状態)
- 戻るボタンは常に期待通りに機能する必要がある
- コンテンツが多いアプリではすべてのページで検索可能
フォームルール
- ラベルは入力上、プレースホルダのみでなく
- インライン検証はキーストローク時でなくブラー時
- エラーメッセージ: 具体的、実行可能、フィールド隣接
- ページロード時に最初のフィールドにオートフォーカス
- フォーム有効になるまでサブミットボタン無効化(説明付き)
- マルチステップフォーム用進捗インジケータ
フィードバックルール
- 300ms 以上のアクション用読み込み状態
- スピナーの代わりにスケルトンスクリーンをコンテンツ読み込み用に
- トースト通知: 成功は自動消去(3秒)、エラーは永続化
- タップフィードバック: 80-150ms レスポンスタイム
- 低リスクアクション用のオプティミスティックUI
コンテンツレイアウトルール
- テキスト多いページ用Fパターン
- ランディングページ用Zパターン
- スクロール上部: 価値提案 + プライマリCTA
- ビューポートあたり1つのプライマリCTA
モバイルルール
- プライマリアクション用ボトムナビゲーション(親指ゾーン)
- フィードコンテンツ用プルトゥリフレッシュ
- ビジュアルアフォーダンス付きスワイプジェスチャ
フェーズ 5: 実装
チャートタイプ選択決定表
| データ関係 | チャートタイプ |
|---|---|
| 比較 | バー、グループバー、ロリポップ、ドットプロット |
| 時系列トレンド | ライン、エリア、スパークライン、ステップ |
| 部分対全体 | パイ(最大5スライス)、ドーナツ、ツリーマップ、スタックバー |
| 分布 | ヒストグラム、ボックスプロット、バイオリン、密度 |
| 相関 | スキャッター、バブル、ヒートマップ |
| フロー/プロセス | サンキー、ファネル、ウォーターフォール |
| 地理的 | コロプレス、ドットマップ、カルトグラム |
| 階層的 | サンバースト、アイシクル |
サポートスタック
| スタック | 主要パターン |
|---|---|
| React | JSX コンポーネント、フック、CSS Modules / Tailwind |
| Next.js | App Router、Server Components、画像最適化 |
| Vue | Composition API、<script setup>、Pinia |
| Svelte | リアクティブ宣言、トランジション、SvelteKit |
| SwiftUI | 宣言的ビュー、ViewModifiers、@State/@Binding |
| React Native | Flexbox、Platform.select、SafeAreaView |
| Flutter | ウィジェット、Material/Cupertino、MediaQuery |
| Tailwind CSS | ユーティリティファースト、@apply は控えめに、設定経由デザイントークン |
| shadcn/ui | Radix プリミティブ、Tailwind バリアント、cn() ユーティリティ |
| HTML/CSS | セマンティック HTML5、CSS Grid/Flexbox、カスタムプロパティ |
デザイントークンアーキテクチャ
master.tokens.json -> プリミティブ値(色、スペーシング、フォント)
semantic.tokens.json -> マップされた意味(action-primary、surface-elevated)
component.tokens.json -> コンポーネント固有(button-padding、card-radius)
overrides/
brand-a.tokens.json -> ブランド固有のオーバーライド
dark.tokens.json -> ダークモードのオーバーライド
- マスタートークンは読み取り専用デフォルト
- オーバーライドはランタイムで浅いマージ
- コンポーネントトークンはセマンティックトークンのみを参照
- コンポーネント内でプリミティブトークンを参照しない
クイックウィンチェックリスト
- アイコンとして絵文字を使用しない — Lucide React または Heroicons を使用
- タップフィードバック遅延: 80-150ms
- セマンティックカラートークン(生の16進値でなく)
- 8dp スペーシングリズム(4、8、12、16、24、32、48、64)
- ダークモード用
prefers-color-schemeメディアクエリ - アニメーション用
prefers-reduced-motion -
:focusでなく:focus-visibleをキーボード専用フォーカスに使用 - CLS 防止のため画像アスペクト比を設定
- スクロール上部テキストのフォントプリロード
- スクロール下部画像に
loading="lazy"を付与
アンチパターン / 一般的な間違い
| アンチパターン | 何が悪いのか | 代わりにすること |
|---|---|---|
無効テキストに opacity | 可読性を損なう | 独立した無効カラートークンを使用 |
| 固定ピクセルブレークポイントのみ | コンポーネントコンテキストを無視 | コンポーネント用コンテナクエリを使用 |
| デスクトップのハンバーガーメニュー | プライマリナビゲーションを隠す | デスクトップでビジブルなナビゲーションバー |
| 重要なコンテンツ用カルーセル | ほとんどのユーザーは最初のスライドのみ表示 | 静的レイアウト、またはアコーディオンを使用 |
| URL永続化なし無限スクロール | 位置を共有、またはリターンできない | スクロール位置を URL に永続化 |
| モーダル on モーダル | 混乱、アクセシビリティの悪夢 | ネストされたモーダルを避けるため再設計 |
| オートプレイメディア | うっとうしい、アクセシビリティ違反 | ユーザーインタラクションで再生を要求 |
| 色のみが差別化 | 色盲ユーザーが除外される | 形状/パターン/テキストラベルを追加 |
| プレースホルダのみのラベル | 入力時に消える、アクセシビリティ問題 | ビジブルラベルを入力上に使用 |
| コンポーネント内の生の16進値 | テーマ化不可能 | セマンティックデザイントークンを使用 |
統合ポイント
| スキル | 統合 |
|---|---|
ui-design-system | トークンアーキテクチャ、コンポーネントライブラリ |
canvas-design | データビジュアライゼーション、チャート |
mobile-design | モバイル固有デザインパターン |
ux-researcher-designer | ユーザーリサーチがデザイン決定を知らせる |
artifacts-builder | スタンドアロンプロトタイプ、デモ |
senior-frontend | UI コンポーネント実装 |
accessibility | WCAG コンプライアンス検証 |
スキルタイプ
FLEXIBLE — 優先度階層に従う(アクセシビリティ > タッチ > パフォーマンス > スタイル > レイアウト)。スタイル推奨はコンテキストに適応します。アクセシビリティとパフォーマンスルールは強く推奨され、優先度を低下させてはいけません。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- pixel-process-ug
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/pixel-process-ug/superkit-agents / ライセンス: MIT
関連スキル
nano-banana-2
inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview（Nano Banana 2）で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード：「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」
octocode-slides
洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー（概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー）で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。
gpt-image2-ppt
OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。
nano-banana
Nano Banana PRO（Gemini 3 Pro Image）およびNano Banana（Gemini 2.5 Flash Image）を使用したAI画像生成機能です。以下の場合に活用できます：（1）テキストプロンプトからの画像生成、（2）既存画像の編集、（3）インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、（4）複数画像での人物キャラクターの一貫性保持、（5）正確なテキスト描画を含む画像生成、（6）AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。
oiloil-ui-ux-guide
モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム（Webアプリ）に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP（コントラスト・反復・配置・近接）をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル（クリーン・余白・タイポグラフィ主導）を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。
axiom-hig-ref
Apple Human Interface Guidelines リファレンス — 色（セマンティックカラー、カスタムカラー、パターン）、背景（マテリアル階層、ダイナミック背景）、タイポグラフィ（標準スタイル、カスタムフォント、Dynamic Type）、SF Symbols（レンダリングモード、色、多言語対応）、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。