A reference distilled from the official Fluent Design guidelines documentation for Windows apps. It is organized into six categories: layout, color and materials, typography/icons, motion, navigation/commands, and usability/accessibility, supporting UI/UX design decisions for WinUI 3 apps. Depending on the user's task, read the appropriate README.md and follow it to the individual files.
Directory structure
skills/windows-design/
SKILL.md
references/
foundations/
README.md
design-overview.md
design-principles.md
guidelines-overview.md
layout-screen-sizes-and-breakpoints.md
layout-responsive-design.md
layout-spacing-and-density.md
alignment-margin-padding.md
geometry.md
elevation-layering.md
titlebar-design.md
color-materials/
README.md
color.md
accessible-color-contrast.md
materials-overview.md
mica.md
acrylic.md
smoke.md
reveal-highlight.md
background-material-selection.md
typography-iconography/
README.md
typography.md
segoe-fluent-icons-font.md
segoe-ui-symbol-font.md
icon-elements.md
icon-composition-modifiers-localization.md
app-icons.md
app-icon-design.md
app-icon-construction.md
visual-studio-asset-generation.md
motion/
README.md
motion-overview.md
motion-principles.md
timing-and-easing.md
directionality-and-gravity.md
content-transition-animations.md
page-transitions.md
connected-animation.md
implicit-animations.md
parallax.md
motion-in-practice.md
reduce-motion.md
navigation-commanding/
README.md
app-silhouette.md
navigation-basics.md
navigation-history-and-backwards-navigation.md
navigationview.md
tab-view.md
list-details.md
commanding.md
command-bar.md
menus.md
menus-and-context-menus.md
keyboard-accelerators.md
access-keys.md
auto-suggest-box.md
usability-accessibility/
README.md
usability-overview.md
accessibility-overview.md
designing-inclusive-software.md
keyboard-accessibility.md
high-contrast-themes.md
accessible-text-requirements.md
touch-target-size.md
screen-sizes-breakpoints.md
responsive-design.md
globalization-localization.md
rtl-layout.md
bidirectional-text.md
date-time-number-formats.md
writing-style.md
app-settings.md
app-help-guidelines.md
in-app-help.md
external-help.md
instructional-ui.md
secondary-tile-pinning.md
widgets-design-fundamentals.md
widgets-principles.md
widgets-states-and-ui.md
widgets-interaction-design.md
widgets-picker-integration.md
signature-experiences/
README.md
haptics.md
Exploration procedure
Derive the category from the task, and identify the target page in the category's README.md:
- Find the category corresponding to the task in the mapping table below
- The category's
references/{category}/README.mdto identify the target page - Read the target page's
.mdto check the details
Task → Category Mapping
| Task | Category | Reference README |
|---|---|---|
| I want to design layout margins, alignment, and breakpoints | foundations | references/foundations/README.md |
| I want to check the principles of geometry (rounded corners, etc.), elevation, and layering | foundations | references/foundations/README.md |
| I want to grasp the overall picture of design principles and guidelines | foundations | references/foundations/README.md |
| I want to apply materials such as Mica / Acrylic / Smoke to the background | color-materials | references/color-materials/README.md |
| I want to satisfy accessibility requirements for color palette design and contrast ratios | color-materials | references/color-materials/README.md |
| I want to implement light effects such as Reveal Highlight | color-materials | references/color-materials/README.md |
| I want to design the font hierarchy and sizes for typography | typography-iconography | references/typography-iconography/README.md |
| I want to use Segoe Fluent Icons and icon elements | typography-iconography | references/typography-iconography/README.md |
| I want to build and generate app icons | typography-iconography | references/typography-iconography/README.md |
| I want to implement page transitions, connected animation, and implicit animation | motion | references/motion/README.md |
| I want to check the principles of motion such as easing, timing, and parallax | motion | references/motion/README.md |
| I want to support reduce motion (motion reduction settings) | motion | references/motion/README.md |
| I want to design top-level navigation with NavigationView / TabView | navigation-commanding | references/navigation-commanding/README.md |
| I want to place commands with CommandBar / menus / context menus | navigation-commanding | references/navigation-commanding/README.md |
| I want to design navigation using keyboard accelerators, access keys, and AutoSuggestBox | navigation-commanding | references/navigation-commanding/README.md |
| I want to satisfy accessibility requirements such as keyboard operation and high contrast themes | usability-accessibility | references/usability-accessibility/README.md |
| I want to support RTL layout, bidirectional text, and globalization | usability-accessibility | references/usability-accessibility/README.md |
| I want to check the design principles, states, and writing style for widgets | usability-accessibility | references/usability-accessibility/README.md |
| I want to check the design guidelines for haptics (haptic feedback) | signature-experiences | references/signature-experiences/README.md |
This skill handles only Fluent Design visual and UX guidelines (layout, color, typography, motion, navigation UX, and accessibility standards). WinUI 3 control API signatures are handled by windows-winui-controls, while app lifecycle, window management, notifications, packaging, etc. are handled by windows-app-sdk.