skills.rest
kusutori
kusutoriCOMMUNITY
Explore all skills by this author →
GitHub

reactor-design

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

Updated Jun 14, 2026
Search Tags:#accessibility#React#layout#UI design#themeing#Windows 11
One-click install
npx skills add https://github.com/kusutori/DataViewer --skill reactor-design-kusutori
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reactor-design
Source: https://github.com/kusutori/DataViewer/tree/main/skills/reactor-design
Command: npx skills add https://github.com/kusutori/DataViewer --skill reactor-design-kusutori

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Reactor, WinUI, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps developers ensure that Reactor UI components adhere to the Windows 11 design system, providing guidelines for theming, typography, layout, and accessibility.

Core Features & Use Cases

  • Theming Guidelines: Defines Windows 11 theming rules and provides a reference for themed surfaces and colors.
  • Typography: Outlines semantic typography styles and best practices.
  • Layout and Scaling: Offers rules for 4px grid usage, margin, padding, and corner radius.
  • Data Flow and State: Explains state-driven UI and Reactor hooks.
  • Accessibility: Details how to implement accessibility modifiers and landmarks.
  • Use Case: Use this Skill to design a Reactor UI component that follows Windows 11 guidelines and review a Pull Request for adherence.

Quick Start

Author a Reactor UI component using this Skill's theming, typography, and layout rules, and verify it with the checklist provided.

Frequently Asked Questions about reactor-design

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

FAQPage Schema
How do I ensure my Reactor UI components comply with Windows 11 design standards?▼

Yes, this Skill provides rules for 4px grid layout, margin, padding, and corner radius to ensure your Reactor UI components scale correctly and adhere to Windows 11 visual standards.

What is the best way to handle state management and data flow in a Reactor UI?▼

The best way to handle state management in a Reactor UI is by using Reactor framework best practices and state-driven UI hooks, ensuring your Windows 11 components update predictably based on state changes.

How do I implement accessibility landmarks in WinUI components using Reactor?▼

Implement accessibility landmarks in WinUI components by applying the specific accessibility modifiers and semantic structure detailed in this Skill, ensuring your Reactor UI meets Windows 11 accessibility requirements.

Do I need the WinUI library to use this Skill for Windows 11 UI design?▼

Yes, you need both the Reactor and WinUI libraries installed in your environment, as this Skill relies on their dependencies to enforce Windows 11 theming, typography, and layout compliance.

How can I review a Pull Request for Windows 11 Reactor UI adherence?▼

Review a Pull Request for Windows 11 Reactor UI adherence by checking the submitted components against this Skill's provided checklist, verifying correct theming, typography, layout scaling, and accessibility implementations.

Related Skills

Explore More Software Engineering Skills→
itsmichaelwestitsmichaelwest
1

winui-app

Set up WinUI 3 environments and scaffold C# projects with the Windows App SDK.

Community
Advanced
stoodderstoodder
1

concierge

Audit live apps for design/UX and accessibility compliance and generate a PR.

Community
Advanced
microsoftmicrosoft
609

reactor-design

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

Official
Advanced
imehrimehr

frontend-dev-guidelines

Enforces design-system quality rules for React/Next.js projects with Tailwind, MUI, and Radin.

Community
Advanced