docs(skill): add Canvas recipe, document name collision workaround (#292)

* docs(skill): add Canvas recipe, document name collision

The Canvas() factory shadows Canvas.SetLeft(). Document the
correct Reactor pattern: use .Canvas(left, top) fluent modifier
instead. Add complete Canvas recipe with positioning examples.

Fixes #282

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* refactor: move Canvas recipe out of getting-started

Create canvas-positioning.cs recipe in reactor-recipes and
remove inline Canvas section from getting-started SKILL.md.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: sundaramramaswamy

plugins/reactor/skills/reactor-recipes/SKILL.md

@@ -18,6 +18,7 @@ The full recipe content is in `references/<name>.cs`. Read just the recipe(s) th
 | Form with validation + submit gating | `references/form-with-validation.cs` | `UseValidationContext`, `FormField`, `Validate.*`, `ShowWhen` |
 | Fetch data with loading / error / data states | `references/async-fetch-list.cs` | `UseResource`, `AsyncValue<T>.Match` |
 | Themed Win11 card surface | `references/themed-card.cs` | `Theme.*` tokens, `Border`, `FlexColumn`, `.Padding`, `.CornerRadius`, `.WithBorder` |
+| Absolute positioning with Canvas | `references/canvas-positioning.cs` | `Canvas`, `.Canvas(left, top)`, `.CenterAt`, shapes |
 
 See `references/index.md` for the full index.
 

plugins/reactor/skills/reactor-recipes/references/canvas-positioning.cs

@@ -0,0 +1,55 @@
+// Recipe: absolute positioning with Canvas.
+//
+// Pattern: Canvas() factory + .Canvas(left, top) modifier on children.
+// ⚠️ `using static Factories` brings a Canvas() factory that shadows
+// Microsoft.UI.Xaml.Controls.Canvas — do NOT call Canvas.SetLeft()/SetTop(),
+// use the fluent .Canvas(left, top) modifier instead.
+
+// In this clone, run `mur pack-local` once. Bump the version below to match
+// whatever `mur pack-local` printed (default: 0.0.0-local). For a real NuGet
+// consumer, set Version to a published Microsoft.UI.Reactor release.
+#:package Microsoft.UI.Reactor@0.0.0-local
+#:package Microsoft.WindowsAppSDK@2.0.1
+#:property OutputType=WinExe
+#:property TargetFramework=net10.0-windows10.0.22621.0
+#:property UseWinUI=true
+#:property WindowsPackageType=None
+
+using Microsoft.UI.Reactor;
+using Microsoft.UI.Reactor.Core;
+using Microsoft.UI.Xaml;
+using static Microsoft.UI.Reactor.Factories;
+
+ReactorApp.Run<App>("Canvas demo", width: 600, height: 500);
+
+class App : Component
+{
+    public override Element Render()
+    {
+        return Canvas(
+            // Position children with the .Canvas(left, top) extension
+            Border(TextBlock("A").Padding(8))
+                .Background(Theme.CardBackground)
+                .WithBorder(Theme.CardStroke, 1)
+                .CornerRadius(4)
+                .Canvas(left: 50, top: 30),
+
+            Border(TextBlock("B").Padding(8))
+                .Background(Theme.CardBackground)
+                .WithBorder(Theme.CardStroke, 1)
+                .CornerRadius(4)
+                .Canvas(left: 200, top: 100),
+
+            // Center on a point (anchor 0.5, 0.5)
+            Ellipse().Width(20).Height(20)
+                .Fill(Theme.Accent)
+                .CenterAt(x: 150, y: 75),
+
+            // Shapes
+            Line(50, 55, 200, 125).Stroke(Theme.DividerStroke, 1),
+            Rectangle().Width(60).Height(40)
+                .Fill(Theme.SubtleFill)
+                .Canvas(left: 350, top: 50)
+        ) with { Width = 500, Height = 400, Background = Theme.SolidBackground };
+    }
+}

plugins/reactor/skills/reactor-recipes/references/index.md

@@ -22,6 +22,7 @@ component.
 | Form with validation + submit | [`form-with-validation.cs`](form-with-validation.cs) | `UseValidationContext`, `FormField`, `Validate.*` |
 | Fetch data, show loading / error | [`async-fetch-list.cs`](async-fetch-list.cs) | `UseResource`, `AsyncValue<T>.Match` |
 | Themed card with 4px grid spacing | [`themed-card.cs`](themed-card.cs) | `Theme.*`, `Border`, `FlexColumn`, `.Padding`, `.CornerRadius` |
+| Absolute positioning with Canvas | [`canvas-positioning.cs`](canvas-positioning.cs) | `Canvas`, `.Canvas(left, top)`, `.CenterAt`, shapes |
 
 ## How to use a recipe