bundled-skills/avalonia-layout-zafiro/SKILL.md
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
npx skillsauth add FrancoStino/opencode-skills-antigravity avalonia-layout-zafiroInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Master modern, clean, and maintainable Avalonia UI layouts. Focus on semantic containers, shared styles, and minimal XAML.
Read ONLY files relevant to the layout challenge!
| 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 |
For a real-world example, refer to the Angor project:
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln
HeaderedContainer instead of Border with manual header)axaml files.EdgePanel or generic components.{Icon fa-name} and IconOptions for styling.Interaction.Behaviors for UI-logic.DON'T:
Grid and StackPanel.IValueConverter for simple logic that belongs in the ViewModel.DO:
DynamicResource for colors and brushes.Zafiro.Avalonia specific panels like EdgePanel for common UI patterns.This skill is applicable to execute the workflow or actions described in the overview.
development
Fetch YouTube transcripts, search videos, browse channels, and extract playlists via TranscriptAPI — no yt-dlp, no Google API key, works from any cloud server.
development
Passive income portfolio analysis — activate when user asks about dividend yields, Treasury rates, REIT income, monthly passive income goals, or portfolio yield optimization. Scans 4 asset classes, ranks by risk-adjusted return, and builds allocations targeting a specific monthly income.
devops
End-to-end production QA, build verification, and launch-readiness checklist for fullstack Next.js apps. Covers TypeScript, linting, tests, build, SEO tags, route regression, and sitemap validation.
development
Safe production cleanup and hardening for vibe-coded fullstack apps (Next.js, React, Node.js, etc.). Removes dead imports, unused files, and broken references without breaking routes or APIs.