Mandatory skills, conventions, and behavioral rules for Avalonia UI development using the Zafiro toolkit.
✓Works with OpenClaudeThis skill defines the mandatory conventions and behavioral rules for developing cross-platform applications with Avalonia UI and the Zafiro toolkit. These rules prioritize maintainability, correctness, and a functional-reactive approach.
Core Pillars
- Functional-Reactive MVVM: Pure MVVM logic using DynamicData and ReactiveUI.
- Safety & Predictability: Explicit error handling with
Resulttypes and avoidance of exceptions for flow control. - Cross-Platform Excellence: Strictly Avalonia-independent ViewModels and composition-over-inheritance.
- Zafiro First: Leverage existing Zafiro abstractions and helpers to avoid redundancy.
Guides
- Core Technical Skills & Architecture: Fundamental skills and architectural principles.
- Naming & Coding Standards: Rules for naming, fields, and error handling.
- Avalonia, Zafiro & Reactive Rules: Specific guidelines for UI, Zafiro integration, and DynamicData pipelines.
- Zafiro Shortcuts: Concise mappings for common Rx/Zafiro operations.
- Common Patterns: Advanced patterns like
RefreshableCollectionand Validation.
Procedure Before Writing Code
- Search First: Search the codebase for similar implementations or existing Zafiro helpers.
- Reusable Extensions: If a helper is missing, propose a new reusable extension method instead of inlining complex logic.
- Reactive Pipelines: Ensure DynamicData operators are used instead of plain Rx where applicable.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Related Frontend Skills
Other Claude Code skills in the same category — free to download.
Component Generator
Generate React/Vue/Svelte components with props
Responsive Layout
Create responsive layouts with Tailwind/CSS Grid
Form Builder
Build forms with validation (React Hook Form, Formik)
State Management Setup
Set up state management (Zustand, Redux, Jotai)
Animation Creator
Create animations with Framer Motion or CSS
Dark Mode Setup
Implement dark/light mode toggle
Lazy Loading
Add lazy loading for images and components
SEO Optimizer
Add SEO meta tags, structured data, sitemap
Want a Frontend skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.