Winui Design

WinUI 3 layout, control choice, theming en XAML-binding ontwerp/review begeleiding

Door microsoft · microsoft/win-dev-skills

Getest · Werkt ★ 8.8/10

Winui Design — WinUI 3 layout, control choice, theming en XAML-binding ontwerp/review begeleiding

Wat het doet

Een ontwerp- en review skill voor WinUI 3 (Windows App SDK): het koppelt vereisten aan platform controls, past Fluent app-shape silhouettes toe, een window-sizing rubric, Light/Dark/High-Contrast theming rules, en vangt veelvoorkomende XAML x:Bind binding landmines. Activeert bij het schrijven of reviewen van WinUI 3 XAML, het migreren van desktop/WPF UI naar WinUI, of het kiezen tussen WinUI controls en patronen. Levert een gebundelde winui-search.exe (alleen Windows) voor het zoeken naar WinUI Gallery/Toolkit/Reactor code samples, plus drie on-demand referentiebestanden.

Testrapport

SKILL.md gevonden op plugins/winui/skills/winui-design/; frontmatter parset met name+description. Steekproefsgewijs alle 3 gerefereerde bestanden gecontroleerd (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) — HTTP 200 — plus winui-search.exe (HTTP 200, 7.9MB; `file` rapporteert PE32+ Windows console binary, niet uitvoerbaar op deze macOS host, dus die stap is alleen Windows). Installatie geverifieerd in een schone temp HOME: SKILL.md landt op ~/.claude/skills/winui-design/SKILL.md. OUTPUT test: schreef een kleine "Rename File" WinUI 3 utility (TextBox + status + button) twee keer — basislijn vs skill-volgend (beide opgeslagen in scratchpad). Het volgen van de body produceerde concreet betere XAML: het ving twee echte stille bugs op die de basislijn verzond — {x:Bind Vm.Status} standaard naar OneTime zodat status nooit updates (skill voegde Mode=OneWay toe), en een TwoWay TextBox zonder UpdateSourceTrigger=PropertyChanged laat de VM verouderd totdat de focus verloren gaat — en paste de window-sizing rubric toe met een DPI-correcte AppWindow.Resize (basislijn liet de oversized ~1024x768 standaard), waarbij een hardcoded "Gray" literal + placeholder-as-label werd verwisseld voor een semantische InfoBar status en een zichtbaar label. winui-search.exe NIET uitgevoerd (verkeerd platform); de inline begeleiding droeg de output zonder dit.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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).

Commando's en voorbeeldprompts

/winui-designWinUI 3 layout, control choice, theming en XAML-binding ontwerp/review begeleiding

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →