Menu
Use when working with built-in Avalonia controls. Routes to the correct sub-subskill for the control category needed.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when the user wants to see and choose between visual design alternatives for an Avalonia app before implementation — generates 3 design variants as real .axaml files, renders each to PNGs at multiple viewport sizes (compact/wide × light/dark) using Avalonia.Headless, and serves an HTML comparison gallery via a local web server. The user reviews in their browser and tells the agent which variant to build.
Use when designing or polishing the visual quality of an Avalonia app — choosing themes, building a design system, crafting beautiful screens, improving accessibility, motion, layout, or before shipping a UI. Routes to focused sub-skills for tokens, themes, components, motion, accessibility, layout patterns, icons, and pre-delivery review.
Use when working with Avalonia UI framework — building, styling, binding, animating, or deploying Avalonia apps with .NET.
Use when adding or auditing accessibility in an Avalonia app — AutomationProperties, focus order, keyboard navigation, contrast, screen reader (Narrator/NVDA/VoiceOver/Orca) support, dynamic text scaling, reduced motion. Maps WCAG 2.2 AA to Avalonia APIs.
Use when building production-quality Avalonia screens — copy-paste XAML recipes for cards, primary/secondary/icon buttons, dialogs, sidebar nav, command bar, settings page, forms with validation, empty states, toasts, badges, skeletons. All recipes use semantic tokens from the design-system sub-skill.
Use when establishing or refactoring an Avalonia app's design system — semantic color tokens, theme-variant dictionaries (light/dark), typography scale, spacing rhythm, radius and elevation tokens. Produces production-ready Resources/Tokens.axaml.
| name | avalonia-controls |
| description | Use when working with built-in Avalonia controls. Routes to the correct sub-subskill for the control category needed. |
Avalonia ships 60+ built-in controls organized by category. Load the sub-subskill for the relevant control category.
| Controls | Load sub-subskill |
|---|---|
| Button, ToggleButton, RadioButton, CheckBox, TextBox, ComboBox, Slider, Calendar, DatePicker, NumericUpDown | avalonia-controls/input |
| TextBlock, Label, ListBox, DataGrid, TreeView, Carousel, MarkdownViewer | avalonia-controls/data-display |
| Border, ScrollViewer, Grid, StackPanel, WrapPanel, DockPanel, UniformGrid, SplitView, Expander | avalonia-controls/layout |
| TabControl, Menu, ContextMenu, CommandBar, TrayIcon | avalonia-controls/navigation |
| Image, DrawingImage, MediaPlayerControl, WebView | avalonia-controls/media |
For controls beyond the built-ins, these libraries are widely used:
| Library | NuGet | Highlights |
|---|---|---|
| FluentAvalonia | FluentAvalonia | WinUI3-style controls (NavigationView, InfoBar, TeachingTip, etc.) |
| Ursa.Avalonia | Irihi.Ursa | Full-featured cross-platform UI control set |
| SukiUI | SukiUI | Flat-design controls and dialogs |
| AvaloniaEdit | AvaloniaEdit | Code editor with syntax highlighting (port of AvalonEdit) |
| DialogHost.Avalonia | DialogHost.Avalonia | Managed async overlay dialogs |
| MessageBox.Avalonia | MsgBox.Avalonia | Simple message box dialogs |
| AvaloniaColorPicker | AvaloniaColorPicker | RGB/HSB/CIELAB color picker |
| PanAndZoom | PanAndZoom | Pan and zoom container control |
| AvaloniaHex | AvaloniaHex | Hex editor control |
| RangeSlider | Avalonia.RangeSlider | Dual-handle range slider |
| Tabalonia | Tabalonia | Draggable tab control |
| AvaloniaAutoGrid | AvaloniaAutoGrid | Auto-sizing Grid replacement |
| AvaloniaProgressRing | AvaloniaProgressRing | Circular progress ring |
| Paginator.Avalonia | AvaloniaUtils.Paginator | Pagination control |
| NodifyAvalonia | GitHub: BAndysc/nodify-avalonia | Node-based editor controls |
| Dock | Dock.Avalonia | VS-style docking layout |
| LiveCharts2 | LiveChartsCore.SkiaSharpView.Avalonia | Interactive charts and gauges |
| OxyPlot | OxyPlot.Avalonia | Scientific/engineering plots |
| ScottPlot | ScottPlot.Avalonia | Fast interactive data plots |
| Markdown.Avalonia | Markdown.Avalonia | Markdown renderer control |
| GMap.NET | GMap.NET.Avalonia | Maps (Google, OpenStreetMap, etc.) |
| CherylUI | GitHub: kikipoulet/CherylUI | Mobile-focused control library |
