avalonia-layout-zafiro
starsforks
How to install avalonia-layout-zafiro?
samarthakv29/antigravity-god-mode/avalonia-layout-zafiro
$npx -y skills add SamarthaKV29/antigravity-god-mode --skill avalonia-layout-zafiroGuidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
SKILL.md
| 1 | # Avalonia Layout with Zafiro.Avalonia |
| 2 | |
| 3 | > Master modern, clean, and maintainable Avalonia UI layouts. |
| 4 | > **Focus on semantic containers, shared styles, and minimal XAML.** |
| 5 | |
| 6 | ## 🎯 Selective Reading Rule |
| 7 | |
| 8 | **Read ONLY files relevant to the layout challenge!** |
| 9 | |
| 10 | --- |
| 11 | |
| 12 | ## 📑 Content Map |
| 13 | |
| 14 | | File | Description | When to Read | |
| 15 | |------|-------------|--------------| |
| 16 | | `themes.md` | Theme organization and shared styles | Setting up or refining app themes | |
| 17 | | `containers.md` | Semantic containers (`HeaderedContainer`, `EdgePanel`, `Card`) | Structuring views and layouts | |
| 18 | | `icons.md` | Icon usage with `IconExtension` and `IconOptions` | Adding and customizing icons | |
| 19 | | `behaviors.md` | `Xaml.Interaction.Behaviors` and avoiding Converters | Implementing complex interactions | |
| 20 | | `components.md` | Generic components and avoiding nesting | Creating reusable UI elements | |
| 21 | |
| 22 | --- |
| 23 | |
| 24 | ## 🔗 Related Project (Exemplary Implementation) |
| 25 | |
| 26 | For a real-world example, refer to the **Angor** project: |
| 27 | `/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln` |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | ## ✅ Checklist for Clean Layouts |
| 32 | |
| 33 | - [ ] **Used semantic containers?** (e.g., `HeaderedContainer` instead of `Border` with manual header) |
| 34 | - [ ] **Avoided redundant properties?** Use shared styles in `axaml` files. |
| 35 | - [ ] **Minimized nesting?** Flatten layouts using `EdgePanel` or generic components. |
| 36 | - [ ] **Icons via extension?** Use `{Icon fa-name}` and `IconOptions` for styling. |
| 37 | - [ ] **Behaviors over code-behind?** Use `Interaction.Behaviors` for UI-logic. |
| 38 | - [ ] **Avoided Converters?** Prefer ViewModel properties or Behaviors unless necessary. |
| 39 | |
| 40 | --- |
| 41 | |
| 42 | ## ❌ Anti-Patterns |
| 43 | |
| 44 | **DON'T:** |
| 45 | - Use hardcoded colors or sizes (literals) in views. |
| 46 | - Create deep nesting of `Grid` and `StackPanel`. |
| 47 | - Repeat visual properties across multiple elements (use Styles). |
| 48 | - Use `IValueConverter` for simple logic that belongs in the ViewModel. |
| 49 | |
| 50 | **DO:** |
| 51 | - Use `DynamicResource` for colors and brushes. |
| 52 | - Extract repeated layouts into generic components. |
| 53 | - Leverage `Zafiro.Avalonia` specific panels like `EdgePanel` for common UI patterns. |
People who liked this also viewed
6 picksType
- paperclip-create-agentCreate new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt/config, and submit a hSkillsJul 2026
- subagent-driven-developmentUse when executing implementation plans with independent tasks in the current sessionSkillsJul 2026
- dispatching-parallel-agentsUse when facing 2+ independent tasks that can be worked on without shared state or sequential dependenciesSkillsJul 2026
- browser-act-skill-forgeForges reusable Skill packages (SKILL.md + scripts) from website exploration via browser-act — no re-exploration later. Use when: user wants a reusable Skill for any website, needs to understand a sitSkillsJul 2026
- wizardGenerate an interactive bash wizard that walks a human through a manual procedure — third-party setup, a one-off migration, an A→B state transition — opening URLs, capturing values, confirming each stSkillsJul 2026
- wonda-cliUsing the Wonda CLI to generate images, videos, music, and audio from the terminal — plus LinkedIn, Reddit, and X/Twitter research and automationSkillsJul 2026
