Winui Design

WinUI 3 layout, kontrollvalg, tema og XAML-binding design-/gjennomgangsveiledning

av microsoft · microsoft/win-dev-skills

Bestått ★ 8.8/10

Winui Design — WinUI 3 layout, kontrollvalg, tema og XAML-binding design-/gjennomgangsveiledning

Hva den gjør

En design- og gjennomgangsferdighet for WinUI 3 (Windows App SDK): den kartlegger krav til plattformkontroller, anvender Fluent app-form silhuetter, en vindusstørrelsesrubrikk, Light/Dark/High-Contrast tema-regler, og fanger vanlige XAML x:Bind binding-fallgruver. Utløses ved forfatting eller gjennomgang av WinUI 3 XAML, migrering av desktop/WPF UI til WinUI, eller valg mellom WinUI-kontroller og mønstre. Leveres med en medfølgende winui-search.exe (kun Windows) for søk i WinUI Gallery/Toolkit/Reactor kodeeksempler, pluss tre on-demand referansefiler.

Testrapport

Fant SKILL.md på plugins/winui/skills/winui-design/; frontmatter tolkes med name+description. Stikkprøvekontrollerte alle 3 refererte filer (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) — HTTP 200 — pluss winui-search.exe (HTTP 200, 7.9MB; `file` rapporterer PE32+ Windows konsollbinær, ikke kjørbar på denne macOS-verten, så det trinnet er kun for Windows). Verifiserte installasjon i en ren temp HOME: SKILL.md lander på ~/.claude/skills/winui-design/SKILL.md. OUTPUT-test: skrev et lite "Rename File" WinUI 3-verktøy (TextBox + status + knapp) to ganger — grunnlinje vs ferdighetsfølgende (begge lagret i scratchpad). Etter kroppen produserte konkret bedre XAML: den fanget to reelle stille feil grunnlinjen sendte ut — {x:Bind Vm.Status} standardiserer til OneTime slik at status aldri oppdateres (ferdigheten la til Mode=OneWay), og en TwoWay TextBox uten UpdateSourceTrigger=PropertyChanged etterlater VM-en utdatert til fokus tap — og anvendte vindusstørrelsesrubrikken med en DPI-korrekt AppWindow.Resize (grunnlinjen etterlot den overdimensjonerte ~1024x768 standarden), byttet ut en hardkodet "Gray"-literal + plassholder-som-etikett for en semantisk InfoBar-status og en synlig etikett. Kjørte IKKE winui-search.exe (feil plattform); den innebygde veiledningen bar utdataene uten den.

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /winui-designWinUI 3 layout, kontrollvalg, tema og XAML-binding design-/gjennomgangsveiledning

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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