| name | avalonia-funcui |
| description | Use this skill when working on F# applications built with Avalonia.FuncUI and Avalonia, especially when editing `.fs`, `.fsproj`, or Avalonia-related UI code, creating code-first views and components, wiring state or Elmish update loops, translating Avalonia layout or styling guidance into FuncUI DSL, or checking package/version compatibility between FuncUI and Avalonia docs. |
Avalonia FuncUI
Overview
This skill helps Codex build and modify code-first desktop UIs in F# with Avalonia.FuncUI on top of Avalonia. It focuses on practical implementation: project setup, view/component structure, Avalonia layout and styling concepts as expressed through the FuncUI DSL, and version-aware decisions.
When To Use It
Use this skill when the user asks for any of the following:
- Create or edit an Avalonia.FuncUI app, view, component, or custom control wrapper.
- Convert XAML or Avalonia documentation examples into FuncUI DSL.
- Add layout, styling, themes, bindings, events, or MVVM-style data flow in a FuncUI project.
- Set up a new F# desktop app using Avalonia and FuncUI.
- Diagnose package mismatches, target framework problems, or Avalonia 11 vs 12 documentation differences.
- Implement stateful UI using FuncUI components/hooks or an Elmish architecture.
Workflow
- Inspect the project first.
Check the
.fsproj, target framework, package versions, app entrypoint, and whether the app uses plain FuncUI components or Avalonia.FuncUI.Elmish.
- Choose the right UI model.
Use plain views/components for local state and direct composition. Use Elmish only when the project already uses it or the user explicitly wants a message/update architecture.
- Map Avalonia concepts into FuncUI DSL.
Translate controls, properties, layout containers, styles, events, and bindings into
X.create [ ... ] expressions rather than inventing non-idiomatic abstractions.
- Keep the implementation code-first and F#-idiomatic.
Prefer small view functions, explicit domain types, and straightforward composition over heavy helper layers.
- Validate against the actual package line in use.
Avalonia docs may describe v12 behavior, while current FuncUI releases can still target Avalonia 11.x. Read references/compatibility.md before applying newer Avalonia guidance.
- Build or test whenever possible.
After edits, run the narrowest useful verification command such as
dotnet build, dotnet test, or a project-specific command.
Working Rules
- Prefer the existing project structure over introducing a new architecture.
- Keep Avalonia terminology accurate even when writing only FuncUI code: controls, panels, themes, styles, resources, bindings, and application lifetime still come from Avalonia.
- When converting documentation examples, adapt them to the repo's current versions instead of copying old package pins blindly.
- Keep views declarative. Avoid mutating controls after creation unless the existing codebase already depends on imperative patterns.
- When user intent is unclear, infer from existing code whether the project is component-based or Elmish-based and continue in that style.
Quick Patterns
New app or entrypoint work
- Desktop apps typically use an
Application subtype plus an Avalonia desktop lifetime.
- FuncUI content is usually hosted inside a
HostWindow.
- Theme setup belongs in the Avalonia app initialization layer, not inside leaf views.
View construction
- Compose UIs with
Control.create [ ... ] and nested child collections.
- Prefer small functions such as
view model dispatch or view () for reusable UI fragments.
- Keep event handlers close to the control they affect.
Stateful components
- Use components/hooks for local interactive state.
- Keep state minimal and derive display values from it inside the render function.
- Avoid storing duplicate derived state unless it is needed for performance or interop.
Elmish
- Use
Model, Msg, init, update, and view when the project already uses Elmish or when the user asks for message-driven state management.
- Keep
update pure and push UI concerns back into the view.
References
- Read references/funcui.md for FuncUI mental models, components, hooks, and code patterns.
- Read references/avalonia.md when the task involves layout, styles, bindings, themes, controls, app lifetime, or other Avalonia platform concepts.
- Read references/compatibility.md before changing package versions or using features described in Avalonia 12 docs.
Source Notes
This skill is based on:
