avalonia-layout-zafiro
Zafiro.Avaloniaを活用したモダンなAvalonia UIレイアウトのガイドラインを提供し、共有スタイルや汎用コンポーネントの活用、XAMLの冗長記述の排除を重点的にサポートします。
description の原文を見る
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
SKILL.md 本文
Avalonia Layout with Zafiro.Avalonia
Avalonia UI レイアウトを、モダンで、クリーンで、メンテナンスしやすい状態にマスターしましょう。 セマンティックなコンテナ、共有スタイル、最小限の XAML に焦点を当てます。
🎯 選択読書ルール
レイアウトの課題に関連するファイルのみを読んでください！
📑 コンテンツマップ
| ファイル | 説明 | 読むべきとき |
|---|---|---|
themes.md | テーマの整理と共有スタイル | アプリのテーマを設定またはリファインするとき |
containers.md | セマンティックなコンテナ (HeaderedContainer, EdgePanel, Card) | ビューとレイアウトを構成するとき |
icons.md | IconExtension と IconOptions を使用したアイコンの使用方法 | アイコンを追加・カスタマイズするとき |
behaviors.md | Xaml.Interaction.Behaviors とコンバーターの回避方法 | 複雑な操作を実装するとき |
components.md | ジェネリックコンポーネントとネストの回避方法 | 再利用可能な UI 要素を作成するとき |
🔗 関連プロジェクト (実装例)
実例として、Angor プロジェクトを参照してください:
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln
✅ クリーンなレイアウトのためのチェックリスト
- セマンティックなコンテナを使用した？ (例: 手動でヘッダーを作成する代わりに
HeaderedContainerを使用) - 冗長なプロパティを避けた？
axamlファイル内の共有スタイルを使用する。 - ネストを最小化した？
EdgePanelまたはジェネリックコンポーネントを使用してレイアウトをフラット化する。 - 拡張機能でアイコンを使用した？
{Icon fa-name}とIconOptionsを使用してスタイルを指定する。 - コードビハインドより Behaviors を使用した？ UI ロジックに
Interaction.Behaviorsを使用する。 - コンバーターを避けた？ 必要な場合を除き、ViewModel プロパティまたは Behaviors を優先する。
❌ アンチパターン
してはいけないこと:
- ビューにハードコードされた色またはサイズ (リテラル値) を使用する。
GridとStackPanelの深いネストを作成する。- 複数の要素にわたって視覚的プロパティを繰り返す (スタイルを使用する)。
- 単純なロジックに
IValueConverterを使用する (ViewModel に属するべき)。
すべきこと:
- 色とブラシに
DynamicResourceを使用する。 - 繰り返されるレイアウトをジェネリックコンポーネントに抽出する。
EdgePanelなどのZafiro.Avalonia固有のパネルを、よくある UI パターンのために活用する。
使用するべき場合
このスキルは、上記の概要で説明されたワークフローまたはアクションを実行するときに適用できます。
制限事項
- このスキルは、タスクが上記で説明されたスコープと明らかに一致する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、または専門家による確認の代替として扱わないでください。
- 必要な入力、権限、セキュリティ境界、または成功基準が不足している場合は、停止して説明を求めてください。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- sickn33
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/sickn33/antigravity-awesome-skills / ライセンス: 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（レンダリングモード、色、多言語対応）、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。