mcpField
M
maui-ui-best-practices

maui-ui-best-practices

github.com/rimblehelmデザイン・UI041 回インストール39 週間前に更新
リポジトリ

maui-ui-best-practices について

.NET MAUI UI Best Practices Skill は、.NET MAUI の XAML と C# を生成するエージェント向けの UI ルール集です。レイアウト、スタイル、アクセシビリティ、パフォーマンスを扱います。

主な機能

  1. 01レイアウトと構造のルール
  2. 02スタイルとテーマ管理の指針
  3. 03レスポンシブ UI レイアウト
  4. 04アクセシビリティとスクリーンリーダー対応
  5. 05パフォーマンスの指針

活用シーン

  1. 01.NET MAUI ページの生成
  2. 02XAML のスタイルと構造の統一
  3. 03デバイスに応じた UI の調整
  4. 04UI のアクセシビリティと性能の改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rimblehelm/.net-maui-skills --skill maui-ui-best-practices

インストール後、Claude Code で/maui-ui-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
test-cases.json
rules/
accessibility-semantic-properties.md
controls-reusable-components.md
layout-avoid-deep-nesting.md
performance-use-compiled-bindings.md
styles-use-app-theme.md

詳細

.NET MAUI — UI のベストプラクティススキル

目的

このスキルでは、.NET MAUI アプリケーションに推奨される UI/UX パターン、レイアウト戦略、スタイル規約、アクセシビリティルール、パフォーマンスガイドラインを定義します。生成されるすべての UI コードの一貫性、保守性、応答性を確保し、最新のクロスプラットフォーム設計の期待に沿うようにします。

このスキルの目的は、Android、iOS、Windows、MacCatalyst に対応した、すっきりとして拡張性が高く、アクセシブルな XAML および C# の UI コードをエージェントが作成できるようにすることです。

基本原則

  1. シンプルさを優先 レイアウトのネストは最小限にし、構造を明確にして、予測可能なパターンを使用します。
  2. 一貫性 スタイル、色、フォントは Resources/Styles に集約します。
  3. 応答性 すべてのデバイスに対応するため、適応型レイアウト（OnIdiom、OnPlatform、Grid、FlexLayout）を使用します。
  4. アクセシビリティ セマンティックプロパティ、適切なコントラスト、スクリーンリーダーへの対応を提供します。
  5. パフォーマンス コンパイル済みバインディング、軽量なコントロール、効率的なレイアウトコンテナーを優先します。

ルールのカテゴリ

  • レイアウトと構造
  • スタイリングとテーマ設定
  • コントロールとコンポーネント
  • アクセシビリティ
  • パフォーマンス

各ルールは rules/ ディレクトリに保存されており、UI コードを生成する際は常に適用してください。

エージェントの使用ガイドライン

  • XAML を生成する際は、レイアウトとスタイリングのルールに従います。
  • 新しいページを作成する際は、一貫した構造を適用します。
    • ルートレイアウトには Grid または VerticalStackLayout を使用します。
    • 深くネストされたレイアウトは避けます。
    • インラインプロパティではなく、スタイルを使用します。
  • コントロールを生成する際は、/Views/Controls に再利用可能なコンポーネントを作成することを優先します。
  • 「UI を応答性の高いものにして」と依頼された場合は、デバイス種別やプラットフォームに応じた条件を適用します。
  • 「パフォーマンスを改善して」と依頼された場合は、パフォーマンスカテゴリのルールを適用します。

対象外

  • ビジネスロジック（他のスキルで扱います）
  • 認証 UI フロー（maui-authentication で扱います）
  • デプロイまたはプラットフォーム向けのパッケージ化

コメント

Markdown 対応