Winui Design

WinUI 3 layout, kontrollval, teman och XAML-bindningsdesign/granskningsvägledning

Testad · Fungerar ★ 8.8/10

Vad den gör

En design- och granskningsfärdighet för WinUI 3 (Windows App SDK): den mappar krav till plattformskontroller, tillämpar Fluent app-form-siluetter, en fönsterstorleksrubrik, Light/Dark/High-Contrast temaregler och fångar vanliga XAML x:Bind-bindningsfallgropar. Utlöses vid författande eller granskning av WinUI 3 XAML, migrering av desktop/WPF UI till WinUI, eller val mellan WinUI-kontroller och mönster. Levereras med en medföljande winui-search.exe (endast Windows) för att söka i WinUI Gallery/Toolkit/Reactor-kodexempel, plus tre on-demand referensfiler.

Testrapport

Hittade plugins/winui/skills/winui-design/; frontmatter parsas med name+description. Punktkontrollerade alla 3 refererade filer (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) — HTTP 200 — plus winui-search.exe (HTTP 200, 7.9MB; `file` rapporterar PE32+ Windows-konsolbinär, ej körbar på denna macOS-värd, så det steget är endast Windows). Verifierade installationen i en ren temp HOME: SKILL.md hamnar på ~/.claude/skills/winui-design/SKILL.md. OUTPUT-test: skrev ett litet "Rename File" WinUI 3-verktyg (TextBox + status + knapp) två gånger — baslinje vs färdighetsföljande (båda sparade i scratchpad). Att följa kroppen producerade konkret bättre XAML: den fångade två verkliga tysta buggar som baslinjen levererade — {x:Bind Vm.Status} standardiseras till OneTime så status uppdateras aldrig (färdigheten lade till Mode=OneWay), och en TwoWay TextBox utan UpdateSourceTrigger=PropertyChanged lämnar VM inaktuell tills fokus förloras — och tillämpade fönsterstorleksrubriken med en DPI-korrekt AppWindow.Resize (baslinjen lämnade den överdimensionerade ~1024x768 standarden), bytte ut en hårdkodad "Gray"-literal + platshållare-som-etikett mot en semantisk InfoBar-status och en synlig etikett. Körde INTE winui-search.exe (fel plattform); den inbyggda vägledningen bar utdata utan den.

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

Kommandon och exempelprompter

/winui-designWinUI 3 layout, kontrollval, teman och XAML-bindningsdesign/granskningsvägledning

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →