diff --git a/skills/avalonia-layout-zafiro/SKILL.md b/skills/avalonia-layout-zafiro/SKILL.md new file mode 100644 index 00000000..e1848984 --- /dev/null +++ b/skills/avalonia-layout-zafiro/SKILL.md @@ -0,0 +1,59 @@ +--- +name: avalonia-layout-zafiro +description: Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy. +allowed-tools: Read, Write, Edit, Glob, Grep +--- + +# Avalonia Layout with Zafiro.Avalonia + +> Master modern, clean, and maintainable Avalonia UI layouts. +> **Focus on semantic containers, shared styles, and minimal XAML.** + +## 🎯 Selective Reading Rule + +**Read ONLY files relevant to the layout challenge!** + +--- + +## πŸ“‘ Content Map + +| File | Description | When to Read | +|------|-------------|--------------| +| `themes.md` | Theme organization and shared styles | Setting up or refining app themes | +| `containers.md` | Semantic containers (`HeaderedContainer`, `EdgePanel`, `Card`) | Structuring views and layouts | +| `icons.md` | Icon usage with `IconExtension` and `IconOptions` | Adding and customizing icons | +| `behaviors.md` | `Xaml.Interaction.Behaviors` and avoiding Converters | Implementing complex interactions | +| `components.md` | Generic components and avoiding nesting | Creating reusable UI elements | + +--- + +## πŸ”— Related Project (Exemplary Implementation) + +For a real-world example, refer to the **Angor** project: +`/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln` + +--- + +## βœ… Checklist for Clean Layouts + +- [ ] **Used semantic containers?** (e.g., `HeaderedContainer` instead of `Border` with manual header) +- [ ] **Avoided redundant properties?** Use shared styles in `axaml` files. +- [ ] **Minimized nesting?** Flatten layouts using `EdgePanel` or generic components. +- [ ] **Icons via extension?** Use `{Icon fa-name}` and `IconOptions` for styling. +- [ ] **Behaviors over code-behind?** Use `Interaction.Behaviors` for UI-logic. +- [ ] **Avoided Converters?** Prefer ViewModel properties or Behaviors unless necessary. + +--- + +## ❌ Anti-Patterns + +**DON'T:** +- Use hardcoded colors or sizes (literals) in views. +- Create deep nesting of `Grid` and `StackPanel`. +- Repeat visual properties across multiple elements (use Styles). +- Use `IValueConverter` for simple logic that belongs in the ViewModel. + +**DO:** +- Use `DynamicResource` for colors and brushes. +- Extract repeated layouts into generic components. +- Leverage `Zafiro.Avalonia` specific panels like `EdgePanel` for common UI patterns. diff --git a/skills/avalonia-layout-zafiro/behaviors.md b/skills/avalonia-layout-zafiro/behaviors.md new file mode 100644 index 00000000..7ba82158 --- /dev/null +++ b/skills/avalonia-layout-zafiro/behaviors.md @@ -0,0 +1,35 @@ +# Interactions and Logic + +To keep XAML clean and maintainable, minimize logic in views and avoid excessive use of converters. + +## 🎭 Xaml.Interaction.Behaviors + +Use `Interaction.Behaviors` to handle UI-related logic that doesn't belong in the ViewModel, such as focus management, animations, or specialized event handling. + +```xml + + + + + +``` + +### Why use Behaviors? +- **Encapsulation**: UI logic is contained in a reusable behavior class. +- **Clean XAML**: Avoids code-behind and complex XAML triggers. +- **Testability**: Behaviors can be tested independently of the View. + +## 🚫 Avoiding Converters + +Converters often lead to "magical" logic hidden in XAML. Whenever possible, prefer: + +1. **ViewModel Properties**: Let the ViewModel provide the final data format (e.g., a `string` formatted for display). +2. **MultiBinding**: Use for simple logic combinations (And/Or) directly in XAML. +3. **Behaviors**: For more complex interactions that involve state or events. + +### When to use Converters? +Only use them when the conversion is purely visual and highly reusable across different contexts (e.g., `BoolToOpacityConverter`). + +## 🧩 Simplified Interactions + +If you find yourself needing a complex converter or behavior, consider if the component can be simplified or if the data model can be adjusted to make the view binding more direct. diff --git a/skills/avalonia-layout-zafiro/components.md b/skills/avalonia-layout-zafiro/components.md new file mode 100644 index 00000000..a1bca9ce --- /dev/null +++ b/skills/avalonia-layout-zafiro/components.md @@ -0,0 +1,41 @@ +# Building Generic Components + +Reducing nesting and complexity is achieved by breaking down views into generic, reusable components. + +## 🧊 Generic Components + +Instead of building large, complex views, extract recurring patterns into small `UserControl`s. + +### Example: A generic "Summary Item" +Instead of repeating a `Grid` with labels and values: + +```xml + + + + + +``` + +Create a generic component (or use `EdgePanel` with a Style): + +```xml + + +``` + +## πŸ“‰ Flattening Layouts + +Avoid deep nesting. Deeply nested XAML is hard to read and can impact performance. + +- **StackPanel vs Grid**: Use `StackPanel` (with `Spacing`) for simple linear layouts. +- **EdgePanel**: Great for "Label - Value" or "Icon - Text - Action" rows. +- **UniformGrid**: Use for grids where all cells are the same size. + +## πŸ”§ Component Granularity + +- **Atomical**: Small controls like custom buttons or icons. +- **Molecular**: Groups of atoms like a `HeaderedContainer` with specific content. +- **Organisms**: Higher-level sections of a page. + +Aim for components that are generic enough to be reused but specific enough to simplify the parent view significantly. diff --git a/skills/avalonia-layout-zafiro/containers.md b/skills/avalonia-layout-zafiro/containers.md new file mode 100644 index 00000000..27c59115 --- /dev/null +++ b/skills/avalonia-layout-zafiro/containers.md @@ -0,0 +1,50 @@ +# Semantic Containers + +Using the right container for the data type simplifies XAML and improves maintainability. `Zafiro.Avalonia` provides specialized controls for common layout patterns. + +## πŸ“¦ HeaderedContainer + +Prefer `HeaderedContainer` over a `Border` or `Grid` when a section needs a title or header. + +```xml + + + + + +``` + +### Key Properties: +- `Header`: The content or string for the header. +- `HeaderBackground`: Brush for the header area. +- `ContentPadding`: Padding for the content area. + +## ↔️ EdgePanel + +Use `EdgePanel` to position elements at the edges of a container without complex `Grid` definitions. + +```xml + +``` + +### Slots: +- `StartContent`: Aligned to the left (or beginning). +- `Content`: Fills the remaining space in the middle. +- `EndContent`: Aligned to the right (or end). + +## πŸ“‡ Card + +A simple container for grouping related information, often used inside `HeaderedContainer` or as a standalone element in a list. + +```xml + + + +``` + +## πŸ“ Best Practices + +- Use `Classes` to apply themed variants (e.g., `Classes="Section"`, `Classes="Highlight"`). +- Customize internal parts of the containers using templates in your styles when necessary, rather than nesting more controls. diff --git a/skills/avalonia-layout-zafiro/icons.md b/skills/avalonia-layout-zafiro/icons.md new file mode 100644 index 00000000..057b6b26 --- /dev/null +++ b/skills/avalonia-layout-zafiro/icons.md @@ -0,0 +1,53 @@ +# Icon Usage + +`Zafiro.Avalonia` simplifies icon management using a specialized markup extension and styling options. + +## πŸ› οΈ IconExtension + +Use the `{Icon}` markup extension to easily include icons from libraries like FontAwesome. + +```xml + +