UI/UX Pro Max

UX Pro Max は何をしますか？

選択的読み取りルール

以下から始めてください。

• references/usage-routing.md
• references/quality-checklist.md

次に、ユーザーの実際のタスクに一致する継承済みドキュメント、スクリプト、アセット、または例のみをロードします。

選択的読み取りルール

以下から始めてください。

• references/senior-master-standard.md
• references/stack-routing.md
• references/design-review-checklist.md

最初に references/stack-routing.md を使用して最も関連性の高いスタックデータファイルを選択し、無関係なフレームワークガイダンスをロードしないようにします。

目的

あいまいなUIリクエストを、実際のフロントエンドスタックに合わせた意図的なデザインシステムと実装ガイダンスに変換します。

このスキルを使用するタイミング

• ユーザーが任意のページ、コンポーネント、ダッシュボード、ランディングページ、リデザイン、ポリッシュ作業、デザインシステム、またはフロントエンドのビジュアル方向性を依頼したとき
• タスクにタイポグラフィ、カラー、スペーシング、階層、モーション、アクセシビリティ、またはスタック固有のUI実装が含まれる場合
• 一般的なAIらしいフロントエンド出力を避けつつ、実用的なものを出荷する必要がある場合

データカバレッジ

このスキルには、16スタックに対する厳選された検索可能なガイダンスが含まれています。

• html-tailwind
• react
• nextjs
• remix
• astro
• vue
• nuxtjs
• nuxt-ui
• svelte
• sveltekit
• shadcn
• expo-router
• react-native
• flutter
• swiftui
• jetpack-compose

ワークフロー

1. UIジョブを分類します。
   • ランディングページ、ダッシュボード、アプリシェル、機能サーフェス、コンポーネントシステム、またはリデザイン
2. スタックを選択します。
   • スタックが暗黙的に指定されているが明示されていない場合は、references/stack-routing.md を使用します。
3. デザインシステムを生成します。
   • バンドルされた検索ツールを --design-system フラグ付きで実行します。
4. スタック固有のガイダンスを取得します。
   • フレームワークとプロダクトタイプに対してスタック検索を実行します。
5. 最終確認の前にレビューします。
   • references/design-review-checklist.md を使用します。

コマンド

リポジトリルートから：

python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit

すでにスキルフォルダ内にいる場合は、python scripts/search.py ... を使用してください。

ルール

• デフォルトでは、実際のプロダクトコンテキストに基づき、流行りのスタイルに従わないようにします。
• パターンを発明する前に、使用中のフレームワークにスタックガイダンスを合わせます。
• きれいだけど壊れやすいデモよりも、アクセシブルでレスポンシブな本番グレードのUIを優先します。
• 既存のデザインシステム内で作業する場合は、新しい方向性を導入する前に確立されたパターンを維持します。