Winui Design
This is the skill to reach for when you're laying out WinUI 3 pages or fixing XAML that doesn't look right. It ships with a search tool that indexes the entire WinUI Gallery and Community Toolkit, so you can ground every control choice in real samples before writing markup. The workflow is deliberate: search upfront for all your features, grab the canonical code, then build. It covers the full design surface: navigation patterns, Fluent Design spacing, theme dictionaries that actually switch at runtime, High Contrast compliance with the eight allowed system brushes, and window sizing math because WinUI 3 has no SizeToContent. The rubric for deriving window dimensions from your layout is worth the price of admission alone. Use it when migrating from WPF or Electron, reviewing pull requests, or debugging why your app looks broken in Dark mode.
- skills.sh installs
- 261
- GitHub stars
- 503
- last updated
- Jun 3, 2026
Install
$ npx -y skills add microsoft/win-dev-skills --skill winui-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
This is the skill to reach for when you're laying out WinUI 3 pages or fixing XAML that doesn't look right. It ships with a search tool that indexes the entire WinUI Gallery and Community Toolkit, so you can ground every control choice in real samples before writing markup. The workflow is deliberate: search upfront for all your features, grab the canonical code, then build. It covers the full design surface: navigation patterns, Fluent Design spacing, theme dictionaries that actually switch at runtime, High Contrast compliance with the eight allowed system brushes, and window sizing math because WinUI 3 has no SizeToContent. The rubric for deriving window dimensions from your layout is worth the price of admission alone. Use it when migrating from WPF or Electron, reviewing pull requests, or debugging why your app looks broken in Dark mode.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/microsoft/win-dev-skills
- Categories
- Frontend Development, Git & Pull Requests, Code Review & Quality, Productivity & Planning, Design & UI/UX, .NET & C#
- License
- MIT
- First seen
- Jun 11, 2026
More from microsoft/win-dev-skills
All 9Recommended
More Frontend Development
magazine-posternexu-io/open-designAn editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbe259skills.sh installs
alpinejsbrettatoms/agent-skillsAlpineJS best practices and patterns. Use when writing HTML with Alpine.js directives to avoid common mistakes like long inline JavaScript strings.258skills.sh installs
scriptwriting-methodologymike-coulbourn/claude-vibesDirect response copywriting frameworks for video scripts. Includes DR formula, PAS, AIDA, hook formulas, CTA best practices, and conversion optimization. Auto-a256skills.sh installscritiquenexu-io/open-designRun a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–255skills.sh installs
vscode-rest-client-generatorpatricio0312rev/skillsGenerates .http files for the VS Code REST Client extension from Express, Next.js, Fastify, or other API routes. Creates organized request files with variables,255skills.sh installs
generate-swagger-docsqodex-ai/ai-agent-skillsGenerate OpenAPI documentation from source code. Analyzes repository to automatically discover API endpoints and create swagger.json and interactive HTML docume255skills.sh installs