バージョン: 2.0.0
UI/UX Pro Max スキル
これは nextlevelbuilder/ui-ux-pro-max-skill の Codex アダプターです。タスクがインターフェースの見た目、感触、動き、応答、またはユーザーの理解方法を変更する場合に使用します。
コアワークフロー
- ユーザーの製品、オーディエンス、ワークフロー、UIサーフェス、ブランドトーン、実装スタックを分析します。
- 主要なデザイン選択を行う前に、ローカルの UI/UX Pro Max データをクエリします。
- 結果を既存のプロジェクトデザインパターンと Codex フロントエンドガイダンスと統合します。
- UIを実装またはレビューし、レスポンシブレイアウト、アクセシビリティ、コントラスト、インタラクション状態、視覚的な洗練度を確認します。
検索スクリプト
このスキルディレクトリからパスを解決します：
python3 src/ui-ux-pro-max/scripts/search.py "<クエリ>" --design-system -p "<プロジェクト名>"
python3 src/ui-ux-pro-max/scripts/search.py "<クエリ>" --domain <ドメイン> -n 3
python3 src/ui-ux-pro-max/scripts/search.py "<クエリ>" --stack <スタック> -n 3
新しいページ、新しいアプリ、ランディングページ、ダッシュボード、またはスタイルの方向性が不明確な場合は、最初に --design-system を使用します。
詳細を絞り込むには、ドメイン検索を使用します：
| ドメイン | 使用用途 |
|---|---|
product | 製品カテゴリのパターンと推奨スタイル方向性 |
style | ビジュアルスタイル、エフェクト、実装キーワード |
color | 製品を考慮したパレットとセマンティックカラー選択 |
typography | フォントペアリングとタイプのムード |
landing | ランディングページの構造とコンバージョンパターン |
chart | データビジュアライゼーションの選択 |
ux | アクセシビリティ、モーション、レイアウト、フォーム、ナビゲーション、フィードバック |
react | React および Next.js のパフォーマンスガイダンス |
web | Web およびアプリインターフェースのアクセシビリティ詳細 |
icons | アイコンスタイルとライブラリの提案 |
google-fonts | フォントの発見 |
利用可能なスタックには、react、nextjs、vue、svelte、astro、swiftui、react-native、flutter、nuxtjs、nuxt-ui、html-tailwind、shadcn、jetpack-compose、threejs、angular、laravel が含まれます。
参考資料
- アップストリームメタデータ:
skill.json - アップストリーム README:
README.md - 元の Claude スキル:
.claude/skills/ui-ux-pro-max/SKILL.md - 検索データとスクリプト:
src/ui-ux-pro-max/ - アップストリームからの Codex プラットフォームテンプレート:
src/ui-ux-pro-max/templates/platforms/codex.json
必要な場合のみこれらのファイルをロードしてください。README と元のスキルは大きいため、対象を絞った結果には検索スクリプトを優先してください。
品質チェック
UI作業の最終納品前に、以下を確認します：
- テキストのコントラスト、フォーカス状態、セマンティックラベル、キーボードナビゲーション。
- 小さい幅でのモバイルレイアウトと、一般的なブレークポイントでのデスクトップレイアウト。
- タッチターゲットサイズ、ホバー/プレス/無効/ローディング状態、およびエラー状態。
- ツールバー、カード、グリッド、チャート、メディアの安定した寸法。
- モーションの持続時間、 reduced-motion の動作、レイアウトシフトの回避。
- 一貫性のあるアイコンライブラリ、タイポグラフィスケール、スペーシングスケール、セマンティックカラートークン。