[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-6ce76e88-2702-4a2f-b321-54d5159e6717":3,"$fFtq20LmwHraH4Sa-p_G0ZnWcwvbo4aHOl9Iqo7SpCcA":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"6ce76e88-2702-4a2f-b321-54d5159e6717","avalonia-layout-zafiro","现代Avalonia UI布局指南，使用Zafiro.Avalonia，强调共享样式、通用组件和避免XAML冗余。","cat_design_ui","mod_design","sickn33,design","---\nname: avalonia-layout-zafiro\ndescription: \"Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# 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`\u002Fmnt\u002Ffast\u002FRepos\u002Fangor\u002Fsrc\u002FAngor\u002FAvalonia\u002FAngor.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.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,246,858,"2026-05-16 13:04:40",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"a1411ae0-4f69-46e5-856e-caf2250fece3","1.0.0","avalonia-layout-zafiro.zip",5959,"uploads\u002Fskills\u002F6ce76e88-2702-4a2f-b321-54d5159e6717\u002Favalonia-layout-zafiro.zip","6c323697ddc9a4869aa6dc2d1c6a9c1e24a2a87ad07496d1122169e7c897597e","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2756},{\"path\":\"behaviors.md\",\"isDirectory\":false,\"size\":1478},{\"path\":\"components.md\",\"isDirectory\":false,\"size\":1429},{\"path\":\"containers.md\",\"isDirectory\":false,\"size\":1560},{\"path\":\"icons.md\",\"isDirectory\":false,\"size\":1777},{\"path\":\"themes.md\",\"isDirectory\":false,\"size\":1864}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]