skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

reactor-design

Enforce Windows 11 design rules for Reactor-powered WinUI 3 apps.

609|44|Updated Apr 16, 2026
Search Tags:#typography#theming#accessibility#design-system#reactor#winui
One-click install
npx skills add https://github.com/microsoft/microsoft-ui-reactor --skill reactor-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reactor-design
Source: https://github.com/microsoft/microsoft-ui-reactor/tree/main/plugins/reactor/skills/reactor-design
Command: npx skills add https://github.com/microsoft/microsoft-ui-reactor --skill reactor-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Windows users expect a cohesive Windows 11 design language; this skill defines how Reactor UI should align with theme tokens, typography, surfaces, accessibility, and design checks to ensure consistency across apps.

Core Features & Use Cases

  • Enforces Windows 11 design system rules: theming, typography, spacing, 4px grid, acrylic surfaces, and accessible controls for Reactor.
  • Provides clear usage patterns, review checklists, and migration guidance to help authors, reviewers, and fixers of Reactor UI code.
  • Use Case: when authoring or reviewing Reactor UI code, apply the Windows 11 design guidelines to ensure a native and accessible user experience.

Quick Start

Review Reactor UI code against Windows 11 design rules and apply token usage, typography, spacing, and accessibility guidelines.

Frequently Asked Questions about reactor-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align WinUI 3 app styling with the Windows 11 design system?▼

Align WinUI 3 app styling with the Windows 11 design system by enforcing token-based theming, typography rules, a 4px grid, acrylic surfaces, and accessibility checks across authoring and reviewing workflows.

What typography and spacing rules apply to Reactor UI components?▼

Reactor UI components require adherence to specific typography rules and a 4px spacing grid to ensure visual consistency and native Windows 11 alignment across all application interfaces.

How do I review Reactor UI code for Windows 11 accessibility compliance?▼

Review Reactor UI code for Windows 11 accessibility compliance by applying defined accessibility checks and review checklists to verify that all visual styling meets functional requirements.

Can I use acrylic surfaces and theme tokens in Reactor-powered apps?▼

Yes, you can codify acrylic surfaces and token-based theming in Reactor-powered apps to satisfy Windows 11 visual styling requirements and ensure a cohesive user experience.

What's the best way to migrate existing WinUI 3 visual styling to Reactor?▼

Migrate existing WinUI 3 visual styling to Reactor by following provided migration guidance to apply Windows 11 design rules, ensuring theme tokens and motion guidelines are correctly implemented.

Related Skills

Explore More Design & Creative Skills→
jaypatrickjaypatrick

winui-app

Scaffold WinUI 3 app projects and bootstrap the development environment.

Community
Intermediate
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
kusutorikusutori

reactor-design

Review Reactor UI components for Windows 11 design and accessibility compliance.

Community
Advanced
curtiv3curtiv3

frontend-governance

Enforce semantic tokens and anti-slop protocols in React UI generation.

Community
Advanced