ElKrapulito/calucha-landing

UI/UX Pro Max - デザインインテリジェンス

UI/UXデザインインテリジェンス（Web、モバイル、デスクトップ向け）。このスキルは、ページ、コンポーネント、デザインシステム、アクセシビリティ、インタラクション、レスポンシブレイアウト、タイポグラフィ、カラー、チャート、スタック固有のUI実装など、インターフェースの設計、構築、レビュー、修正時に使用します。ローカルデータ検索可能：79スタイル（50アクティブ）、192プロダクトパレットと推論プロファイル、74フォントペアリング、119UXガイドライン、105アイコン、17GSAPプリセット、25チャートタイプ、22スタック。

適用するタイミング

タスクが UI 構造、ビジュアルデザインの決定、インタラクションパターン、またはユーザーエクスペリエンスの品質管理 に関わる場合は、このスキルを使用してください。

主な使用例

このスキルは以下の場合に最も有用です：

• 新しいページの設計（ランディングページ、ダッシュボード、管理画面、SaaS、モバイルアプリ）
• UIコンポーネントの作成またはリファクタリング（ボタン、モーダル、フォーム、テーブル、チャートなど）
• 配色、フォントシステム、スペーシング仕様、レイアウトシステムの選択
• UIコードのユーザーエクスペリエンス、アクセシビリティ、視覚的一貫性のレビュー
• ナビゲーション構造、アニメーション、レスポンシブ動作の実装
• プロダクトレベルの設計決定（スタイル、情報階層、ブランド表現）
• インターフェースの知覚品質、明確さ、ユーザビリティの向上

推奨ケース

以下の場合にこのスキルの使用を推奨します：

• UI が「プロフェッショナルに見えない」が、理由が不明確な場合
• ユーザビリティやエクスペリエンスに関するフィードバックを受け取った場合
• リリース前のUI品質最適化を行う場合
• クロスプラットフォームデザイン（Web / iOS / Android）の調整が必要な場合
• デザインシステムまたは再利用可能なコンポーネントライブラリを構築する場合

使用をスキップするケース

以下の場合はこのスキルは不要です：

• 純粋なバックエンドロジックの開発
• API またはデータベース設計のみに関わる場合
• インターフェースに関係のないパフォーマンス最適化
• インフラストラクチャまたはDevOps作業
• ビジュアルに関係のないスクリプトや自動化タスク

判断基準：タスクが機能の 見た目、使い勝手、動き、操作方法 を変更する場合は、このスキルを使用してください。

優先順位別ルールカテゴリ

人間/AI用参照：優先度 1→10 でどのルールカテゴリを最初に確認するかを決定します。詳細なルールが必要な場合は --domain <Domain> を使用してクエリしてください。スクリプトはこのテーブルを読み取りません。

優先度	カテゴリ	影響度	ドメイン	必須チェック事項	避けるべきアンチパターン
1	アクセシビリティ	CRITICAL	ux	コントラスト4.5:1、altテキスト、キーボードナビ、ariaラベル	フォーカスリングの除去、ラベルなしアイコンボタン
2	タッチ＆インタラクション	CRITICAL	ux	最小サイズ44×44px、8px以上の間隔、ローディングフィードバック	ホバーのみに依存、インスタント状態変更（0ms）
3	パフォーマンス	HIGH	ux	WebP/AVIF、遅延ロード、スペース予約（CLS < 0.1）	レイアウトスラッシング、累積レイアウトシフト
4	スタイル選択	HIGH	style, product	プロダクトタイプにマッチ、一貫性、SVGアイコン（絵文字は不可）	フラットとスキューモーフィズムのランダム混在、アイコンとしての絵文字使用
5	レイアウト＆レスポンシブ	HIGH	ux	モバイルファーストブレークポイント、ビューポートメタ、水平スクロール禁止	水平スクロール、固定pxコンテナ幅、ズーム無効化
6	タイポグラフィ＆カラー	MEDIUM	typography, color	ベース16px、行間1.5、セマンティックカラートークン	本文12px未満、グレーオングレー、コンポーネント内での生の16進数カラー
7	アニメーション	MEDIUM	ux	コンテキストに応じたタイミング、動きによる意味伝達、空間的連続性	全トランジションに同じ持続時間、width/heightのアニメーション、reduced-motionなし
8	フォーム＆フィードバック	MEDIUM	ux	可視ラベル、フィールド近くのエラー表示、ヘルプテキスト、段階的開示	プレースホルダーのみのラベル、上部のみのエラー表示、最初から過剰な情報提示
9	ナビゲーションパターン	HIGH	ux	予測可能な戻る動作、ボトムナビ5つ以内、ディープリンク	過負荷なナビ、壊れた戻る動作、ディープリンクなし
10	チャート＆データ	LOW	chart	凡例、ツールチップ、アクセシブルな色	情報伝達を色のみに依存

クイックリファレンス

1. アクセシビリティ（CRITICAL）

• color-contrast - 通常テキストは最小4.5:1比率（大テキストは3:1）；マテリアルデザイン準拠
• focus-states - インタラクティブ要素に可視フォーカスリング（2–4px；Apple HIG, MD）
• alt-text - 意味のある画像には説明的なaltテキスト
• aria-labels - アイコンのみのボタンにはaria-label；ネイティブ（Apple HIG）ではaccessibilityLabel
• icon-context - セマンティクスは用途に依存：可視テキストの横にある装飾アイコンはアクセシビリティツリーから隠す；意味のあるアイコンにはテキスト代替が必要；アイコンコントロールにはアクセシブルな名前と該当する状態が必要
• keyboard-nav - タブ順序は視覚順序と一致；完全なキーボードサポート（Apple HIG）
• form-labels - for属性を持つラベルを使用
• skip-links - キーボードユーザー向けにメインコンテンツへのスキップリンクを提供
• heading-hierarchy - シーケンシャルh1→h6、レベルスキップなし
• color-not-only - 色のみで情報を伝えない（アイコン/テキストを追加）
• dynamic-type - システムテキスト拡大をサポート；テキストが大きくなっても切り詰めを避ける（Apple Dynamic Type, MD）
• reduced-motion - prefers-reduced-motionを尊重；要求に応じてアニメーションを削減/無効化（Apple Reduced Motion API, MD）
• voiceover-sr - 意味のあるaccessibilityLabel/accessibilityHint；VoiceOver/スクリーンリーダー向けの論理的な読み上げ順序（Apple HIG, MD）
• escape-routes - モーダルやマルチステップフローでキャンセル/戻るを提供（Apple HIG）
• keyboard-shortcuts - システムとアクセシビリティのショートカットを保持；ドラッグ＆ドロップにキーボード代替を提供（Apple HIG）
• focus-not-obscured - スティッキーUI、オーバーレイ、バナーはキーボードフォーカスされたコントロールを隠してはいけない（WCAG 2.2 AA）
• focus-not-obscured-enhanced - フォーカスされたコンポーネント全体を可視状態に保つ（WCAG 2.2 AAA）
• focus-appearance - フォーカスインジケーター領域と3:1の状態コントラストを確認；可視フォーカスだけでは不十分（WCAG 2.2 AAA）
• dragging-alternative - すべての作成者制御のドラッグアクションには、シングルポインターとキーボードの代替手段が必要（WCAG 2.2 AA）
• web-target-size - Webポインターターゲットには24×24 CSS pxまたは文書化された例外が必要；ネイティブ単位で代用しない（WCAG 2.2 AA）
• consistent-help - 繰り返し表示されるヘルプメカニズムは、ページセット全体で同じ相対順序を維持（WCAG 2.2 A）
• redundant-entry - 再入力が必須でない限り、同じプロセスで既に提供された情報を再利用（WCAG 2.2 A）
• accessible-authentication - パスワードマネージャーとペーストを許可；非認知認証パスを提供（WCAG 2.2 Minimum, AA）。拡張AAA基準はデータセットに含まれていません
• auto-rotation-controls - カルーセルと移動するコンテンツには一時停止/停止コントロールが必要であり、フォーカス時またはreduced motion時には停止する必要があります（WAI）
• contextual-live-badge-updates - フォーカスを移動せずに、変更されたカウント/ステータスを完全なコンテキストフレーズとして通知；適切な1つのライブ/ステータス領域を使用し、必要な場合にのみアトミック更新を行う

2. タッチ＆インタラクション（CRITICAL）

• touch-target-size - 最小44×44pt（Apple）/ 48×48dp（Material）；必要に応じて視覚的な境界を超えてヒット領域を拡大
• touch-spacing - タッチターゲット間の最小ギャップは8px/8dp（Apple HIG, MD）
• hover-vs-tap - プライマリインタラクションにはクリック/タップを使用；ホバーのみに依存しない
• loading-buttons - 非同期処理中はボタンを無効化；スピナーまたは進行状況を表示
• error-feedback - 問題の近くに明確なエラーメッセージを表示
• cursor-pointer - クリック可能な要素にはcursor-pointerを追加（Web）
• gesture-conflicts - メインコンテンツでの水平スワイプを避ける；垂直スクロールを優先
• tap-delay - touch-action: manipulationを使用して300msの遅延を削減（Web）
• standard-gestures - プラットフォーム標準のジェスチャーを一貫して使用；再定義しない（例：スワイプバック、ピンチズーム）（Apple HIG）
• system-gestures - システムジェスチャー（コントロールセンター、戻るスワイプなど）をブロックしない（Apple HIG）
• press-feedback - 押下時の視覚フィードバック（リップル/ハイライト；MD状態レイヤー）
• haptic-feedback - 確認や重要なアクションには触覚フィードバックを使用；使いすぎを避ける（Apple HIG）
• gesture-alternative - ジェスチャーのみのインタラクションに依存しない；重要なアクションには常に可視のコントロールを提供
• safe-area-awareness - プライマリタッチターゲットをノッチ、Dynamic Island、ジェスチャーバー、画面端から遠ざける
• no-precision-required - 小さなアイコンや細い端でのピクセル単位のタップを要求しない
• swipe-clarity - スワイプアクションには明確なアフォーダンスまたはヒント（シェブロン、ラベル、チュートリアル）を表示する
• drag-threshold - 誤ったドラッグを避けるために、ドラッグを開始する前に移動しきい値を使用する

3. パフォーマンス（HIGH）

• image-optimization - WebP/AVIFを使用し、レスポンシブ画像（srcset/sizes）を適用し、重要でないアセットは遅延読み込み
• image-dimension - width/heightを宣言するか、aspect-ratioを使用してレイアウトシフトを防止（Core Web Vitals: CLS）
• font-loading - font-display: swap/optionalを使用して不可視テキスト（FOIT）を回避；レイアウトシフトを減らすためにスペースを予約（MD）
• font-preload - 重要なフォントのみをプリロード；すべてのバリアントにプリロードを多用しない
• critical-css - ファーストビュー（above-the-fold）のCSSを優先（インラインクリティカルCSSまたは早期ロードスタイルシート）
• lazy-loading - 動的インポート/ルートレベルの分割を介して、ヒーロー以外のコンポーネントを遅延読み込み
• bundle-splitting - ルート/機能ごとにコードを分割（React Suspense / Next.js dynamic）して初期ロードとTTIを削減
• third-party-scripts - サードパーティスクリプトは非同期/遅延でロード；不要なものを監査して削除（MD）
• reduce-reflows - 頻繁なレイアウトの読み取り/書き込みを避ける；DOM読み取りをバッチ処理してから書き込み
• content-jumping - 非同期コンテンツのスペースを予約してレイアウトジャンプを回避（Core Web Vitals: CLS）
• lazy-load-below-fold - ファーストビューより下の画像と重いメディアにはloading="lazy"を使用
• virtualize-lists - 50項目以上のリストを仮想化してメモリ効率とスクロールパフォーマンスを向上
• main-thread-budget - フレームあたりの処理を〜16ms未満に保ち60fpsを実現；重いタスクはメインスレッドから移動（HIG, MD）
• progressive-loading - 1秒以上の操作には、長時間ブロックするスピナーではなくスケルトンスクリーン/シマーを使用（Apple HIG）
• input-latency - タップ/スクロールの入力レイテンシを〜100ms未満に保つ（Material応答性基準）
• tap-feedback-speed - タップから100ms以内に視覚フィードバックを提供（Apple HIG）
• debounce-throttle - 高頻度イベント（スクロール、リサイズ、入力）にはデバウンス/スロットルを使用
• offline-support - オフライン状態のメッセージと基本的なフォールバックを提供（PWA / モバイル）
• network-fallback - 低速ネットワーク向けに劣化モードを提供（低解像度画像、アニメーション削減）

4. スタイル選択（HIGH）

• style-match - スタイルをプロダクトタイプに合わせる（推奨事項には --design-system を使用）
• consistency - すべてのページで同じスタイルを使用
• no-emoji-icons - SVGアイコン（Heroicons、Lucide）を使用し、絵文字は使用しない
• color-palette-from-product - プロダクト/業界からパレットを選択（--domain color で検索）
• effects-match-style - シャドウ、ぼかし、半径を選択したスタイルに合わせる（ガラス / フラット / クレイなど）
• platform-adaptive - プラットフォームの慣例を尊重（iOS HIG vs Material）：ナビゲーション、コントロール、タイポグラフィ、モーション
• state-clarity - ホバー/プレス/無効状態を視覚的に区別しつつ、スタイルを維持（Material状態レイヤー）
• elevation-consistent - カード、シート、モーダルには一貫した elevation/シャドウスケールを使用；ランダムなシャドウ値を避ける
• dark-mode-pairing - ライト/ダークバリアントを一緒に設計し、ブランド、コントラスト、スタイルの一貫性を保つ
• icon-style-consistent - プロダクト全体で1つのアイコンセット/視覚言語（ストローク幅、コーナー半径）を使用
• system-controls - 完全なカスタムコントロールよりもネイティブ/システムコントロールを優先；ブランディングに必要な場合のみカスタマイズ（Apple HIG）
• blur-purpose - ぼかしは背景の却下を示すために使用（モーダル、シート）、装飾としては使用しない（Apple HIG）
• primary-action - 各画面には1つのプライマリCTAのみ；セカンダリアクションは視覚的に従属させる（Apple HIG）

5. レイアウト＆レスポンシブ（HIGH）

• viewport-meta - width=device-width initial-scale=1（ズームを決して無効にしない）
• mobile-first - モバイルファーストで設計し、タブレット、デスクトップへとスケールアップ
• breakpoint-consistency - 体系的なブレークポイントを使用（例：375 / 768 / 1024 / 1440）
• readable-font-size - モバイルの本文テキストは最小16px（iOSの自動ズームを回避）
• line-length-control - モバイルは1行35–60文字、デスクトップは60–75文字
• horizontal-scroll - モバイルで水平スクロール禁止；コンテンツがビューポート幅に収まるようにする
• spacing-scale - 4pt/8dpの増分スペーシングシステムを使用（Material Design）
• touch-density - コンポーネントの間隔をタッチに適した快適な状態に保つ：窮屈すぎず、誤タップを引き起こさない
• container-width - デスクトップでは一貫した最大幅（max-w-6xl / 7xl）
• z-index-management - 階層化されたz-indexスケールを定義（例：0 / 10 / 20 / 40 / 100 / 1000）
• fixed-element-offset - 固定ナビバー/ボトムバーは、その下のコンテンツに対して安全なパディングを確保する必要がある
• scroll-behavior - メインのスクロールエクスペリエンスを妨害するネストされたスクロール領域を避ける
• viewport-units - モバイルでは100vhよりもmin-h-dvhを優先
• orientation-support - ランドスケープモードでもレイアウトを読み取り可能で操作可能に保つ
• content-priority - モバイルではコアコンテンツを最初に表示；セカンダリコンテンツは折りたたむか非表示にする
• visual-hierarchy - サイズ、スペーシング、コントラストによって階層を確立する — 色だけに頼らない
• compact-label-overflow - セマンティクスに基づいてバッジ、ステータスタグ、フィルターチップ、または削除可能な値を選択；重要なラベルを利用可能に保ち、避けられない切り詰めをポインターとキーボードユーザーに開示する
• chip-collection-reflow - ラベルを縮小する前にコレクションを折り返す；+n オーバーフローサマリーを、値を隠す代わりに操作可能な開示として作成する

6. タイポグラフィ＆カラー（MEDIUM）

• line-height - 本文テキストには1.5-1.75を使用
• line-length - 1行65-75文字に制限
• font-pairing - 見出し/本文フォントの個性をマッチさせる
• font-scale - 一貫したタイプスケール（例：12 14 16 18 24 32）
• contrast-readability - 明るい背景には暗いテキスト（例：白地に slate-900）
• text-styles-system - プラットフォームのタイプシステムを使用：iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label)（HIG, MD）
• weight-hierarchy - フォントウェイトを使用して階層を強化：太字見出し（600–700）、標準本文（400）、中程度ラベル（500）（MD）
• color-semantic - セマンティックカラートークンを定義（primary, secondary, error, surface, on-surface）；コンポーネント内で生の16進数カラーを使用しない（Materialカラーシステム）
• color-dark-mode - ダークモードでは、反転色ではなく、彩度を下げた/明るい色調のバリアントを使用；コントラストを個別にテスト（HIG, MD）
• color-accessible-pairs - 前景/背景のペアは4.5:1（AA）または7:1（AAA）を満たす必要あり；ツールを使用して確認（WCAG, MD）
• color-not-decorative-only - 機能的な色（エラー赤、成功緑）にはアイコン/テキストを含めること；色のみの意味付けを避ける（HIG, MD）
• truncation-strategy - 切り詰めよりも折り返しを優先；切り詰める場合は省略記号を使用し、ツールチップ/展開で全文を提供（Apple HIG）
• letter-spacing - プラットフォームごとのデフォルトの文字間隔を尊重；本文テキストでのタイトなトラッキングを避ける（HIG, MD）
• number-tabular - データ列、価格、およびアニメーションで変化する値には、表形式/等幅の数字を使用する

7. アニメーション（MEDIUM）

• context-aware-timing - コンテキストに応じてアニメーションの持続時間とイージングを調整（Apple HIG, MD）
• meaningful-motion - アニメーションは意味を伝える必要がある：空間的関係、状態変化、階層（Apple HIG）
• single-property - 可能な限りtransformとopacityをアニメーション化；width/height, top/leftは避ける（パフォーマンスと滑らかさのため）（MD）
• spatial-continuity - 共有要素はアニメーション中に空間的連続性を維持する（要素の移動時）（Apple HIG, MD）
• reduced-motion - prefers-reduced-motionを尊重；アニメーションを削減するか無効化（Apple HIG, MD）
• entrance-exit - 項目の出入りアニメーションが必要：出現（フェードイン/スケールイン）、消失（フェードアウト/スケールアウト）、リスト（順次出現）（Apple HIG）
• navigation-transitions - ナビゲーションアニメーションはネイティブの遷移を模倣する：プッシュ（右へスライド）、モーダル（上から）、タブ（フェード/瞬間）（Apple HIG）
• animations-not-blocking - アニメーションはインタラクションをブロックしてはいけない；prefers-reduced-motionでは無効化も可（WCAG）
• spring-physics - MaterialではSpringアニメーションを使用（デュレーションをハードコードしない）；iOSではスプリングを使い、イージングは調整しない（HIG, MD）
• micro-interactions - 小さなフィードバックには100–200ms、遷移には200–500ms、表現的なモーションには300–500ms（MD）
• motion-choreography - 複数の要素が同じイージングとタイミングで動くときは、調整されたシーケンスを使用（MD）
• scroll-driven - スクロール駆動のアニメーションはパフォーマンスを考慮して実装（Intersection Observer, will-change）；必要に応じて進行状況にリンク（Apple HIG）

8. フォーム＆フィードバック（MEDIUM）

• visible-labels - すべての入力フィールドに可視ラベルがある（プレースホルダーのみは不十分）
• error-association - エラーは該当フィールドの近くに表示（上部にまとめて表示しない）
• helper-text - 複雑なフィールドには役立つヘルパーテキストを提供
• progressive-disclosure - 複雑なフォームはステップに分割；関連する設定のみ表示
• validation-timing - 入力後またはフォーカス喪失時にバリデーション；送信前にすべてを検証（MD）
• input-modes - 適切な inputmode を使用（数値にはnumeric、メールにはemailなど）（HIG, MD）
• success-confirmation - 成功を示す（チェックマーク、バナー）；ユーザーに知らせる（Apple HIG）
• required-markers - 必須フィールドにはアスタリスクまたは「必須」ラベル；オプションフィールドには「任意」の方がよりアクセシブル（MD）
• field-grouping - 関連フィールドをグループ化（fieldset / セクション）（Apple HIG）
• autofill-support - ブラウザの自動入力属性を有効にする（autocomplete）（MD）
• undo-capability - 元に戻す/確認を提供（削除、送信、元に戻せないアクション）（Apple HIG, MD）
• keyboard-type - 正しいキーボードタイプを設定（URLキーボード、メールキーボード、数字パッド）（HIG, MD）
• return-key - リターンキーのラベルをアクションに設定（「完了」、「検索」、「次へ」）（Apple HIG）
• inline-errors - エラーはインラインで表示（ツールチップや上部のバナーではなく）
• field-focus-management - フォームの送信/続行後は最初の無効フィールドにフォーカス（WCAG）

9. ナビゲーションパターン（HIGH）

• predictable-back - 戻るボタンは期待通りに動作する（ブラウザの戻る / アプリの戻るスワイプ）
• bottom-nav - ボトムナビゲーションは最大5つの主要なセクション；4つ以下が理想的（Material）
• tab-bar-labels - タブバーアイコンとラベル；ラベルは短くする（Apple HIG）
• breadcrumb - 深い階層にはパンくずを使用
• deep-linking - ディープリンクとURLスキームをサポート
• nav-hierarchy - ナビゲーションの深さは3レベル以下に維持（クリック数で）
• sticky-header-nav - スクロール時にナビゲーションを固定（特に長いページ）
• nav-consistency - アプリケーション全体で同じナビゲーションパターンを使用（Apple HIG）
• back-swipe - 戻るスワイプをサポート（カスタム遷移がある場合でも）（Apple HIG）
• tab-persistence - タブを切り替えてもスクロール位置と状態を保持する
• overflow-nav - 項目が多い場合のオーバーフローメニューまたは「もっと見る」タブ
• search-access - コンテンツが多いアプリでは検索を簡単に見つけられる場所に配置
• side-drawer - ドロワーは補助的なナビゲーション用；プライマリには使用しない（MD）
• scroll-to-top - タップして一番上に戻る機能（ステータスバータップ on iOS）（Apple HIG）
• nav-animation - ナビゲーションの遷移は高速（300ms以下）

10. チャート（LOW）

• chart-legends - 可能な限り凡例を含める；チャートの近くに配置
• chart-tooltips - データ値のツールチップを提供
• chart-colors - 色盲に安全なパレットを使用（ColorBrewer 8-class Set2 など）
• chart-responsive - チャートはモバイルでリサイズ可能（スクロールしない）
• chart-empty - データがない場合の空の状態を表示
• chart-loading - データ読み込み中はスケルトン/スピナーを表示
• chart-interaction - ホバー/タップによるデータポイントの強調表示
• chart-text - チャート内のテキストは読み取り可能なサイズに保つ（12px以上）
• chart-patterns - データ系列を区別するために色の代わり（または追加）にパターン/ハッチングを使用
• chart-type-match - チャートタイプをデータに合わせる：カテゴリ比較には棒グラフ、トレンドには折れ線グラフ、構成要素には円グラフ（< 6カテゴリ）、相関には散布図
• chart-zero-baseline - 棒グラフはゼロから開始；誤解を招く切り詰められた軸を避ける
• chart-accessible-data - チャートの下に生データ表を提供するか、ARIA属性を通してチャートを説明する

クエリ構文

データの検索方法

このスキルはキーワードベースのクエリを使用します。実行例：

• アクセシビリティルールの確認： 検索 --domain ux -q color-contrast
• スタイル推奨を得る： 検索 --design-system -q dashboard design style
• フォントペアリングを取得： 検索 --domain typography -q modern sans-serif pairing
• GSAPアニメーションを探索： 検索 --domain ux -q gsap animation preset
• チャートタイプを探索： 検索 --domain chart -q responsive line chart

スキル引数

注：これらの引数はエージェント専用です。人間は自然言語でクエリできます。

引数	説明	例
--domain <domain>	クエリを特定のカテゴリに制限	--domain color
--q <query>	全文検索（値に対してベクトル検索を実行）	`--q