Toolverse
All skills

avalonia-layout-zafiro

by davila7

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
davila7
Category
Frontend
Views
20

About this skill

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

How to use

  1. Zainstaluj skill w swoim środowisku Claude, wskazując repozytorium davila7/claude-code-templates. Skill będzie dostępny jako narzędzie do odczytywania i edycji plików XAML oraz dokumentacji layoutów.

  2. Przejrzyj mapę zawartości w README, aby zidentyfikować, które pliki dokumentacji są istotne dla Twojego problemu — themes.md dla motywów, containers.md dla struktury widoków, icons.md dla ikon, behaviors.md dla interakcji, components.md dla komponentów generycznych.

  3. Podczas projektowania layoutu sprawdzaj listę kontrolną: czy używasz semantycznych kontenerów (HeaderedContainer, EdgePanel, Card) zamiast ręcznych Border, czy unikasz hardkodowanych kolorów i rozmiarów, czy minimalizujesz zagnieżdżenia Grid i StackPanel.

  4. Implementuj ikony za pomocą IconExtension z notacją {Icon fa-name} i IconOptions do stylizacji, zamiast wstawiać obrazy bezpośrednio do XAML.

  5. Preferuj Interaction.Behaviors do obsługi logiki UI zamiast code-behind, a ViewModel properties zamiast Converters, chyba że są absolutnie konieczne.

  6. Odwołaj się do projektu Angor jako przykładu rzeczywistej implementacji tych wytycznych, aby zobaczyć, jak praktycznie stosować reguły w dużej aplikacji.

Related skills

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037