{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/avalonia-layout-zafiro",
  "version": "1.0.0",
  "name": "Avalonia Layout Zafiro",
  "description": "Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.",
  "system_prompt_fragment": "# Avalonia Layout with Zafiro.Avalonia\n\n> Master modern, clean, and maintainable Avalonia UI layouts.\n> **Focus on semantic containers, shared styles, and minimal XAML.**\n\n## 🎯 Selective Reading Rule\n\n**Read ONLY files relevant to the layout challenge!**\n\n---\n\n## 📑 Content Map\n\n| File | Description | When to Read |\n|------|-------------|--------------|\n| `themes.md` | Theme organization and shared styles | Setting up or refining app themes |\n| `containers.md` | Semantic containers (`HeaderedContainer`, `EdgePanel`, `Card`) | Structuring views and layouts |\n| `icons.md` | Icon usage with `IconExtension` and `IconOptions` | Adding and customizing icons |\n| `behaviors.md` | `Xaml.Interaction.Behaviors` and avoiding Converters | Implementing complex interactions |\n| `components.md` | Generic components and avoiding nesting | Creating reusable UI elements |\n\n---\n\n## 🔗 Related Project (Exemplary Implementation)\n\nFor a real-world example, refer to the **Angor** project:\n`/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln`\n\n---\n\n## ✅ Checklist for Clean Layouts\n\n- [ ] **Used semantic containers?** (e.g., `HeaderedContainer` instead of `Border` with manual header)\n- [ ] **Avoided redundant properties?** Use shared styles in `axaml` files.\n- [ ] **Minimized nesting?** Flatten layouts using `EdgePanel` or generic components.\n- [ ] **Icons via extension?** Use `{Icon fa-name}` and `IconOptions` for styling.\n- [ ] **Behaviors over code-behind?** Use `Interaction.Behaviors` for UI-logic.\n- [ ] **Avoided Converters?** Prefer ViewModel properties or Behaviors unless necessary.\n\n---\n\n## ❌ Anti-Patterns\n\n**DON'T:**\n- Use hardcoded colors or sizes (literals) in views.\n- Create deep nesting of `Grid` and `StackPanel`.\n- Repeat visual properties across multiple elements (use Styles).\n- Use `IValueConverter` for simple logic that belongs in the ViewModel.\n\n**DO:**\n- Use `DynamicResource` for colors and brushes.\n- Extract repeated layouts into generic components.\n- Leverage `Zafiro.Avalonia` specific panels like `EdgePanel` for common UI patterns.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.",
  "applicable_domains": [
    "other"
  ],
  "category": "other",
  "invocation": [
    "/avalonia-layout-zafiro"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/avalonia-layout-zafiro",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/avalonia-layout-zafiro",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "other"
  ],
  "lifecycle": "draft"
}