ReddRadar
Agent skill
html-css-to-avalonia
Port HTML or CSS mental models, layouts, controls, theming, and modern web UI patterns to Avalonia. Use for website-to-desktop translation, CSS-to-Avalonia styling work, responsive layout conversion, custom-element or Shadow DOM mapping, or web-style design-system migration into Avalonia.
Install this agent skill to your Project
npx add-skill https://github.com/wieslawsoltes/development-plugin-for-avalonia/tree/main/skills/html-css-to-avalonia
SKILL.md
HTML/CSS to Avalonia
Start with:
../../references/62-html-css-to-avalonia-modern-ui-conversion-index.md../../references/html-to-avalonia/README.md
Use the detailed lane docs only for the parts the request actually touches:
- layout, responsive sizing, and positioning
- cascade, selectors, tokens, and theme architecture
- forms, navigation, overlays, lists, and command surfaces
- advanced UI patterns such as tabs, split panes, pull-to-refresh, or custom elements
Workflow
- Translate the web mental model first: layout, state, semantics, and styling architecture.
- Map CSS constructs to Avalonia resources, selectors, templates, and control choices explicitly.
- Keep responsive and input behavior intentional instead of copying browser assumptions blindly.
- Validate accessibility, focus, and reduced-motion equivalents after the port.
Rules
- Do not treat Avalonia like a browser with different syntax.
- Convert CSS architecture, not only individual properties.
- Keep HTML semantics and Avalonia control contracts aligned in the explanation.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
wieslawsoltes/development-plugin-for-avalonia
development-plugin-for-avalonia
Repo-local umbrella skill for building, reviewing, designing, porting, and migrating Avalonia applications with modern XAML/C# patterns on Avalonia 11.3.12. Use when working inside this repository and the request is broad Avalonia work; route quickly to the focused plugin skills for startup, bindings, styling, controls, layout, rendering, testing, design systems, or HTML/WinForms/WPF/WinUI/Avalonia 12 migration work.
wieslawsoltes/development-plugin-for-avalonia
avalonia-styling-and-resources
Build or troubleshoot Avalonia styles, themes, resources, property-system usage, theme variants, resource packaging, and custom theme architecture. Use for selector fixes, attached properties, resource lookup problems, theme switching, library resource packaging, or code-only theme work.
wieslawsoltes/development-plugin-for-avalonia
avalonia-design-systems
Design polished Avalonia design systems with reusable tokens, typography, spacing, shell composition, dense workflow UX, motion, and governance rules. Use for professional UI direction, design-token architecture, responsive layout systems, information architecture, or high-quality desktop workflow design.
wieslawsoltes/development-plugin-for-avalonia
avalonia-testing-diagnostics-and-performance
Validate Avalonia applications with headless tests, render or UI tests, diagnostics tooling, troubleshooting workflows, and performance reviews. Use for test strategy, DevTools or profiler usage, performance regressions, rendering investigations, or production hardening passes.
wieslawsoltes/development-plugin-for-avalonia
avalonia-accessibility-and-validation
Design or review Avalonia validation, data-error presentation, accessibility semantics, automation properties, focus order, and testable UI metadata. Use for validation pipelines, screen-reader support, keyboard-only UX, automation-tree issues, or accessibility hardening.
wieslawsoltes/development-plugin-for-avalonia
winui-to-avalonia
Port WinUI or Windows App SDK applications to Avalonia, including shell design, dependency-property patterns, theme resources, composition, commands, dialogs, and platform integration. Use for `NavigationView`, `ContentDialog`, `ThemeResource`, `VisualStateManager`, `ItemsRepeater`, `AppWindow`, or broader WinUI-to-Avalonia migration work.
Didn't find tool you were looking for?