Winui Design

Conseils de conception/révision pour la mise en page, le choix des contrôles, le thème et la liaison XAML de WinUI 3

par microsoft · microsoft/win-dev-skills

Testé · Fonctionne ★ 8.8/10

Winui Design — Conseils de conception/révision pour la mise en page, le choix des contrôles, le thème et la liaison XAML de WinUI 3

Ce que fait

Une compétence de conception et de révision pour WinUI 3 (Windows App SDK) : elle mappe les exigences aux contrôles de la plateforme, applique les silhouettes d'application Fluent, une grille de dimensionnement de fenêtre, les règles de thème Clair/Sombre/Contraste Élevé, et détecte les pièges courants de liaison XAML x:Bind. Se déclenche lors de la création ou de la révision de XAML WinUI 3, de la migration d'interfaces utilisateur de bureau/WPF vers WinUI, ou du choix entre les contrôles et les modèles WinUI. Livré avec un winui-search.exe (Windows uniquement) pour rechercher des exemples de code WinUI Gallery/Toolkit/Reactor, plus trois fichiers de référence à la demande.

Rapport de test

J'ai localisé SKILL.md à plugins/winui/skills/winui-design/; le frontmatter est analysé avec name+description. J'ai vérifié les 3 fichiers référencés (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) — HTTP 200 — plus winui-search.exe (HTTP 200, 7.9MB; `file` rapporte un binaire console Windows PE32+, non exécutable sur cet hôte macOS, donc cette étape est Windows uniquement). J'ai vérifié l'installation dans un HOME temporaire propre : SKILL.md atterrit à ~/.claude/skills/winui-design/SKILL.md. Test de SORTIE : j'ai écrit un petit utilitaire WinUI 3 "Rename File" (TextBox + status + button) deux fois — référence vs suivant la compétence (les deux enregistrés dans le bloc-notes). Suivre le corps a produit un XAML concrètement meilleur : il a détecté deux vrais bugs silencieux que la référence avait livrés — {x:Bind Vm.Status} par défaut à OneTime donc le statut ne se met jamais à jour (la compétence a ajouté Mode=OneWay), et un TextBox TwoWay sans UpdateSourceTrigger=PropertyChanged laisse la VM obsolète jusqu'à la perte de focus — et a appliqué la grille de dimensionnement de fenêtre avec un AppWindow.Resize correct en DPI (la référence a laissé le défaut surdimensionné ~1024x768), échangeant un littéral "Gray" codé en dur + un placeholder-as-label pour un statut InfoBar sémantique et une étiquette visible. Je n'ai PAS exécuté winui-search.exe (mauvaise plateforme); les conseils en ligne ont permis la sortie sans cela.

Testé le: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/microsoft/win-dev-skills.git /tmp/winui-design-src
mkdir -p ~/.claude/skills
cp -R /tmp/winui-design-src/plugins/winui/skills/winui-design ~/.claude/skills/winui-design
# SKILL.md now at ~/.claude/skills/winui-design/SKILL.md
# Optional bundled tool: winui-search.exe is a Windows-only PE32+ binary (~7.9MB, .NET).
#   It runs ONLY on Windows (WinUI's real target platform); NOT usable on macOS/Linux.
#   The skill's design/review guidance works without it — the exe only adds sample lookups.
# Source for the binary is in the same repo at src/tools/winui-search if you want to build/inspect.
# Plugin-marketplace alternative: repo exposes .claude-plugin/marketplace.json (plugin name: winui).

Commandes et exemples de prompts

/winui-designConseils de conception/révision pour la mise en page, le choix des contrôles, le thème et la liaison XAML de WinUI 3

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

Review this XAML page against Fluent Design
Choose the right WinUI control for this layout
Fix dark theme contrast in this WinUI screen

Rapport complet →