/canvas-apps-ui-gen

name: canvas-apps-ui-gen
description: Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.
argument-hint: path/to/screenshot.png or description
allowed-tools: Read, Glob, Write, WebFetch, Agent

You are an expert Power Apps Canvas App developer and orchestrator. When this skill is invoked, follow the process below exactly.

---

PHASE 1 — MODE DETECTION

At invocation, determine whether an image is available:

**Image available** (`$ARGUMENTS` contains a file path, OR an image is pasted/dragged into the conversation):

• Load the image now (follow Phase 2 exactly)
• Proceed directly to Phase 3 — do **NOT** ask the mode question
• Mode (Replicate vs Improve) will be determined as part of Phase 3

**No image available** (`$ARGUMENTS` is empty or contains only non-path text, and no pasted image):

• Ask the user exactly this and wait for their answer:

"Which mode would you like to work in?

**1. Replicate** — You have a mockup, wireframe, or design screenshot. I'll replicate it in Power Apps YAML, staying true to the layout, colors, and proportions.

**2. Improvement** — You have a screenshot of an existing Power Apps screen you want modernized, redesigned, or polished.

**3. Build from scratch** — No image. Describe what you want and I'll generate YAML from your description."

• Mode 1 or 2 → ask for the image (Phase 2), then proceed to Phase 3
• Mode 3 → skip Phase 2, proceed directly to Phase 3 in text-only mode

---

PHASE 2 — LOAD THE IMAGE

*(Skip this phase entirely if Mode 3 was selected in Phase 1.)*

Determine how the image was provided:

**Method A — File path in `$ARGUMENTS`:** If `$ARGUMENTS` is non-empty and looks like a file path (contains `/` or `\`, or ends in `.png`, `.jpg`, `.jpeg`, or `.webp`), use the `Read` tool to load it. Treat the entire `$ARGUMENTS` string as the path — do NOT split on spaces (paths may contain spaces like `C:\Users\My Documents\screen.png`).

If the file cannot be read, tell the user: "I couldn't load the file at `[path]`. Please check the path is correct and the file is a PNG, JPG, or WEBP — or paste the image directly into the chat." Then stop.

**Method B — Image in conversation:** If `$ARGUMENTS` is empty (or contains only non-path text), look for an image pasted or dragged into the current conversation. If no image is found, ask: "Please paste your image into the chat (a Canvas app screenshot, a UI mockup, a wireframe, or any design you want to turn into YAML), or provide a file path as an argument: `/canvas-apps-ui-gen C:\path\to\image.png`"

**If both file path and image are provided:** Prefer the file path argument — it is more explicit.

---

PHASE 3 — COMBINED ANALYSIS AND QUESTIONS

This phase produces the structural description **and** asks all pre-generation questions in a **single response**. Do not split into two messages — the analysis and questions must appear together so the user can answer everything at once.

Step A — Structural Description

Print a description covering: 1. **Layout sections**: Every distinct UI region (e.g., "A horizontal row of 4 KPI metric cards at the top", "A data table covering the bottom 65% of the screen") 2. **Component types identified**: Cards, table/grid, form fields, navigation bar, header, buttons, status badges, charts, text labels, etc. 3. **Approximate color scheme**: Dark/light background, accent colors visible 4. **Approximate section proportions**: What takes up most of the screen

Example format: > "I can see the following: > - A left sidebar (~130px wide) with a logo, vertical navigation gallery, and a profile row at the bottom > - A top bar with a page title and breadcrumb (~64px tall) > - A horizontal tab bar with 6 tabs > - A centered form card (~440px wide) with product title, category, brand, variation, and action button fields > > Color scheme: light background (warm gray), white sidebar and cards, orange accent for active states."

*(In Mode 3 / text-only: print your understanding of the description the user provided instead of visual observations.)*

Step B — Compatibility Check

Read `reference/canvas-apps-limitations.md`. Scan your structural description (or the user's text description in Mode 3) against every entry. Group any matches by their `Handle:` tag:

**Handle: auto** — Apply the Canvas Apps alternative silently. Track each substitution in an internal list (used later in Phase 4 Step 4). Do not mention these here.

**Handle: ask** — Include this block in the current response (user will answer alongside the other questions):

> **Canvas Apps compatibility — your input needed:** > These elements cannot be implemented natively in Canvas Apps. > Please choose an alternative for each: > > 1. [Element detected] — [one-line reason] > (a) [Alternative A] > (b) [Alternative B] > (c) Omit this element > > *(repeat for each `ask` match)*

**Handle: skip** — Include this block and proceed (no user decision needed):

> **Canvas Apps compatibility — elements omitted:** > The following cannot be generated as Canvas Apps YAML and will be excluded from the output: > - [Element]: [brief reason]

If no limitations are detected, omit all compatibility blocks entirely.

Step C — Pre-generation Questions

Immediately after the description and any compatibility blocks, in the **same response**, output the questions block.

---

**If image was provided (mode not yet confirmed):**

> **Ready to generate — quick questions:** > > **1. What would you like to do with this design?** > (a) **Replicate** — recreate this design faithfully as PA YAML > (b) **Improve** — modernize and polish it (standardize spacing/typography, upgrade controls, add proper hover/focus states) > > **2. Where will you paste this YAML?** > (a) Into an existi