reactor-advanced

Expose Win2D canvas options for immediate-mode drawing in Reactor.

609|44|Updated Apr 16, 2026
One-click install
npx skills add https://github.com/microsoft/microsoft-ui-reactor --skill reactor-advanced
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reactor-advanced
Source: https://github.com/microsoft/microsoft-ui-reactor/tree/main/plugins/reactor/skills/reactor-advanced
Command: npx skills add https://github.com/microsoft/microsoft-ui-reactor --skill reactor-advanced

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reactor users need high-performance, declarative immediate-mode drawing integrated with WinUI controls, which is hard to achieve with traditional XAML alone.

Core Features & Use Cases

  • Win2DCanvas, Win2DAnimatedCanvas, Win2DVirtualCanvas selection for static, animated, and tiled rendering
  • UseDrawState, UseCanvasResources, UseDrawCommand integration for stateful, resource-managed rendering
  • Threading and device-loss guidance to ensure safe cross-thread operations and robust recovery
  • Use cases include dashboards, visualizers, games, and high-refresh UIs within Reactor

Quick Start

Instantiate a Win2DCanvas with an onDraw callback and drive it from Reactor state to render frames.

Frequently Asked Questions about reactor-advanced

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

FAQPage Schema
How do I render high-performance graphics in a Reactor WinUI app?

You can render high-performance graphics in a Reactor WinUI app using Win2D canvas options for declarative immediate-mode drawing. Choose Win2DCanvas, Win2DAnimatedCanvas, or Win2DVirtualCanvas based on your static, animated, or tiled rendering needs.

What is the best way to handle device loss and threading for Win2D canvases?

Handling device loss and threading for Win2D canvases requires enforcing specific rules for safe cross-thread operations and robust recovery. The Skill enforces UseCanvasResources and threading guidelines to ensure predictable rendering across device resets.

Can I use Win2D for real-time animations and large scrollable canvases in Reactor?

Yes, you can use Win2D for real-time animations and large scrollable canvases in Reactor. Use Win2DAnimatedCanvas for high-refresh UIs and Win2DVirtualCanvas for tiled rendering to handle large visual areas efficiently.

How do I start drawing with a Win2D canvas in Reactor?

To start drawing with a Win2D canvas in Reactor, instantiate a Win2DCanvas with an onDraw callback and drive it from Reactor state to render frames. Integrate UseDrawState and UseDrawCommand for stateful rendering.

Why does my Reactor UI struggle with complex visuals compared to XAML?

Your Reactor UI struggles with complex visuals because traditional XAML alone is hard to achieve high-performance declarative immediate-mode drawing. Win2D canvas integration solves this by exposing direct rendering options for dashboards and visualizers.

Do I need UseDrawState and UseDrawCommand for safe Reactor canvas rendering?

Yes, you need UseDrawState and UseDrawCommand for safe Reactor canvas rendering. The Skill requires and enforces these integrations alongside UseCanvasResources to ensure stateful, resource-managed, and predictable rendering operations.