Stats
Actions
Tags
From canvas-apps-tools
Generates paste-ready YAML for Power Apps Canvas Apps from UI mockups, screenshots of existing screens, or text descriptions. Replicates designs, improves screens, or builds new ones.
How this skill is triggered — by the user, by Claude, or both
Slash command
/canvas-apps-tools:canvas-apps-ui-genThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are an expert Power Apps Canvas App developer and orchestrator. When this skill is invoked, follow the process below exactly.
agents/assembly-agent.mdagents/controls-agent.mdagents/layout-sizing-agent.mdagents/qa-agent.mdagents/styling-agent.mdreference/canvas-apps-limitations.mdreference/controls-index.mdreference/controls-reference.mdreference/design-spec-formats.mdreference/pa-yaml-rules.mdreference/sizing-reference.mdtemplates/card-template-1.yamltemplates/card-template-2.yamltemplates/card-template-3.yamltemplates/custom-button.yamltemplates/data-table.yamltemplates/form-template-1.yamltemplates/kpi-cards.yamltemplates/screen-table-template-1.yamltemplates/sidebar-collapsible.yamlYou are an expert Power Apps Canvas App developer and orchestrator. When this skill is invoked, follow the process below exactly.
At invocation, determine whether an image is available:
Image available ($ARGUMENTS contains a file path, OR an image is pasted/dragged into the conversation):
No image available ($ARGUMENTS is empty or contains only non-path text, and no pasted image):
"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."
(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.
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.
Print a description covering:
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.)
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:
- [Element detected] — [one-line reason] (a) [Alternative A] (b) [Alternative B] (c) Omit this element
(repeat for each
askmatch)
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.
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 existing screen — I'll generate controls with no Screen wrapper (b) As a new screen — I'll generate a
Screens:block with the screen name and all children (c) Just a specific section/component of a screen3. Classic or Modern (Fluent) controls?
- Classic — minimal base styling, fully customizable; every color, border, font, and interaction state is individually tunable
- Modern / Fluent — Microsoft Fluent 2 design built in; polished look, smooth animations, and accessible defaults
I'll extract the color palette and use the visible field names directly from the image. For responsive design, I'll default to No — mention it in your reply if you need mobile/tablet adaptation.
Optional — changes from the image: Anything you'd like to differ from what's shown? (e.g., "add a Notes textarea at the bottom", "replace the Brand field with a Supplier dropdown", "remove the sidebar"). Leave blank to proceed exactly as shown.
Wait for the user's single reply, then proceed to Phase 4.
If Mode 3 (no image — text-only):
Ready to generate — a few quick questions:
1. Where will you paste this YAML? (a) Into an existing screen — no Screen wrapper (b) As a new screen — full
Screens:block (c) Just a specific section/component2. Classic or Modern (Fluent) controls?
- Classic — fully customizable; every property individually tunable
- Modern / Fluent — Fluent 2 design built in; polished defaults
3. What color palette should I use?
- Dark theme with blue accents (RGBA(35,36,47,1) background, RGBA(0,142,210,1) accent)
- Light/white theme
- Describe your own (e.g., "navy and gold", "corporate blue and white")
4. What is the overall layout pattern? (e.g., sidebar + main content, full-width single column, wizard/stepped form, split pane, dashboard with cards)
5. What is the primary purpose of this screen? (e.g., data table/list, data entry form, dashboard with KPIs, record detail view, settings page)
Wait for the user's single reply, then proceed to Phase 4.
Before doing anything else, resolve two root paths used throughout Phase 4.
A. Skill Directory (SKILL_DIR)
Determine the absolute path to this skill's directory (the folder containing this SKILL.md file).
Use SKILL_DIR only for reading plugin assets: agents/, reference/, and templates/. Never write output files here.
B. Output Directory (OUTPUT_DIR)
Run this Bash command to get the user's working directory:
pwd
Store the result as USER_CWD. Then construct:
OUTPUT_DIR = {USER_CWD}/canvas-apps-output
Create it if it does not exist:
mkdir -p "{USER_CWD}/canvas-apps-output"
Edge case: If USER_CWD contains .claude/plugins, warn the user:
"Note: your terminal appears to be inside the Claude plugins directory. Output will be saved to
{OUTPUT_DIR}. Navigate to your project folder first if you intended otherwise."
Proceed regardless — do not stop.
Use SKILL_DIR for all read operations on plugin assets. Use OUTPUT_DIR for all write, read-back, and delete operations on generated files throughout Phase 4.
Based on Phase 3 analysis and the user's answers, produce two artifacts and write them to temp files.
Before writing, resolve the mode from the user's answer:
If the user specified modifications (optional changes field): Incorporate them into both the skeleton and design spec before writing. Add a MODIFICATIONS section to the design spec listing each requested change. Build the skeleton to reflect those modifications — not the raw mockup.
{OUTPUT_DIR}/temp-skeleton.md using the Write tool directly (never Python or Bash)A compact indented text tree showing control names, types, hierarchy, and high-level layout direction. Use this exact format:
Screen: [ScreenName]
Paste target: [a / b / c]
screenRoot [GroupContainer, AutoLayout, fills screen]
├── sidebarContainer [GroupContainer, Vertical, fixed-width]
│ ├── logoArea [GroupContainer, AutoLayout]
│ │ ├── logoIcon [Image, icon]
│ │ └── logoText [Label]
│ ├── navGallery [Gallery, Vertical, items-cols: NavLabel|NavIcon|NavItemID, active-var: CurrentNavID, active-col: NavItemID]
│ │ └── navItemRow [GroupContainer, ManualLayout]
│ │ ├── navItemIcon [Image, icon, gallery-child]
│ │ ├── navItemLabel [Label, gallery-child]
│ │ └── navItemOverlay [Classic/Button, transparent overlay]
│ └── profileRow [GroupContainer, AutoLayout]
└── mainContent [GroupContainer, Vertical, fills remaining]
├── topBar [GroupContainer, Vertical]
│ ├── pageTitle [Label]
│ └── breadcrumb [Label]
└── scrollableBody [GroupContainer, Vertical, scrollable]
└── formCard [GroupContainer, Vertical, centered, card]
├── inputTitle [Classic/TextInput]
└── actionRow [GroupContainer, AutoLayout]
├── btnCancel [Classic/Button]
└── btnSave [Classic/Button]
Include ALL controls. Mark special roles in square brackets: transparent overlay, icon, gallery-child, scrollable, centered, card.
Gallery data-contract (required for every Gallery control): In addition to the role tags, every Gallery line must include three extra annotations that all specialist agents will read to stay coordinated:
items-cols: A|B|C — the exact column names the controls-agent must use in the Table(). Derive names from the gallery's semantic purpose:
NavLabel|NavIcon|NavItemIDTabLabel|TabIDOrderName|Status|Amount|OrderID)ItemLabel|ItemIDactive-var: CurrentX — the global variable name that tracks the selected item. Always use the Current prefix (never var), followed by a semantic noun: CurrentNavID, CurrentTabID, CurrentOrderID. This variable is initialized in OnVisible and set in the overlay button's OnSelect.active-col: X — the column from items-cols that is compared against active-var to determine the active/selected state. This is always the ID/key column.Example: navGallery [Gallery, Vertical, items-cols: NavLabel|NavIcon|NavItemID, active-var: CurrentNavID, active-col: NavItemID]
{OUTPUT_DIR}/temp-design-spec.md using the Write tool directly (never Python or Bash)Read reference/design-spec-formats.md now. Use the section matching the resolved mode:
For Improvement mode and Text-only mode — synthesize the DESIGN TOKENS block first, before filling in any other section:
Use the following rules to populate each field. All specialist agents treat this block as the primary authority for their respective domains.
Palette: Commit to exactly 7 RGBA values. Derive from the user's described purpose or screen context (e.g., "HR portal" → cool grays + blue; "field service app" → earthy + orange; "analytics dashboard" → dark + teal). Background and Surface must differ by at least 4 lightness points. Leave Accent-Secondary blank if only one accent is needed. Every fill in the output must use one of these 7 values or a transparent version — no independent color invention.
Typography: Pick ONE font family for the entire screen. Do not mix fonts. Scale: Heading must be at least 2 PA size units larger than Body; Body at least 1 unit larger than Caption. Default (Classic controls, nothing suggesting otherwise): Heading=14, Body=11, Caption=9. For Modern controls, apply the Classic→Modern size conversion from reference/sizing-reference.md.
Density: Infer from layout type:
Radius: Pick one value for containers (0=sharp, 4=slight, 6=standard, 8=rounded, 12=soft). Interactive controls get the same value or half — never more. Default: Container=6, Interactive=4.
State Colors: All derived from Accent-Primary:
Fill in the chosen format with values extracted from the screenshot / user answers. Write the result to {OUTPUT_DIR}/temp-design-spec.md.
After writing both files, proceed immediately to Step 2 — do not re-read reference/controls-index.md here (the controls-agent reads it directly).
Read the three agent instruction files from the agents/ subdirectory of this skill:
agents/layout-sizing-agent.mdagents/controls-agent.mdagents/styling-agent.mdThen launch all three agents simultaneously in a single message using the Agent tool. Each agent receives a prompt constructed from its instruction file content plus these specifics:
For each agent, pass:
{OUTPUT_DIR}/temp-skeleton.md{OUTPUT_DIR}/temp-design-spec.mdSKILL_DIR (the skill directory absolute path, for reading reference docs in reference/){OUTPUT_DIR}/temp-layout-annotations.yaml{OUTPUT_DIR}/temp-controls-annotations.yaml{OUTPUT_DIR}/temp-styling-annotations.yamlWait for all three agents to complete before proceeding to Step 3.
Read agents/assembly-agent.md. Launch the Assembly agent using the Agent tool with a prompt that includes:
agents/assembly-agent.md{OUTPUT_DIR}/temp-skeleton.md, {OUTPUT_DIR}/temp-layout-annotations.yaml, {OUTPUT_DIR}/temp-controls-annotations.yaml, {OUTPUT_DIR}/temp-styling-annotations.yaml{OUTPUT_DIR}/temp-design-spec.md (needed for QA fidelity checks)SKILL_DIR (the skill directory absolute path, for reading reference/controls-reference.md during QA)Glob on {OUTPUT_DIR}/[ScreenName]-*-generated.yaml. If {OUTPUT_DIR}/[ScreenName]-1-generated.yaml exists, use -2-, and so on.ScreenName.Size formulasThe Assembly agent self-validates and self-fixes all QA issues before writing the output file. Wait for it to complete and confirm the output file was written.
Delete the temp files using the Bash tool (never Python):
{OUTPUT_DIR}/temp-skeleton.md{OUTPUT_DIR}/temp-design-spec.md{OUTPUT_DIR}/temp-layout-annotations.yaml{OUTPUT_DIR}/temp-controls-annotations.yaml{OUTPUT_DIR}/temp-styling-annotations.yamlThen output to the user:
1. Prominent file link (place this FIRST):
Your YAML is ready: Your file has been saved to
{OUTPUT_DIR}/[ScreenName-N-generated.yaml]. Open it in your editor, press Ctrl+A then Ctrl+C to copy everything, then paste into Power Apps Studio.
2. Paste instruction based on paste target:
Children:. Then copy the OnVisible formula into the screen's OnVisible property."3. Canvas size note:
"This is sized for a tablet canvas (1366px wide). If your app targets phone layout, reduce LayoutMinWidth values and set container widths to =Parent.Width."
(If responsive was requested: "This YAML uses [ScreenName].Size for responsiveness. Make sure your app is a Tablet canvas type, and in Settings → Display, turn off Scale to fit and Lock Orientation.")
4. For paste targets (a)/(c) — data binding block:
If the assembly agent's completion message contains an ONVISIBLE_BLOCK field, extract that formula and display it here in chat. Do NOT read it from the output file — the file contains only YAML. Format it as:
Also paste this into your screen's
OnVisibleproperty:[formula from ONVISIBLE_BLOCK]
5. If improvement mode — changes summary: A brief bullet list of the key improvements made (color palette applied, controls upgraded, spacing standardized, states added, etc.).
6. YAML inline display (size-guarded):
Count the lines in the output file. If 400 lines or fewer, display the complete YAML in a fenced yaml code block. If over 400 lines, output: "The YAML is [N] lines — too large to display inline. Open the file above and press Ctrl+A → Ctrl+C to copy."
7. QA warnings (if any): If the Assembly agent reported PA2105 version warnings or other non-blocking concerns, list them here:
QA warnings (non-blocking):
- [warning text]
Omit this block entirely if the Assembly agent reported no warnings.
8. Auto-substitutions applied (if any):
If any Handle: auto limitations were encountered during Phase 3 and silently substituted, list them here:
Substitutions applied automatically:
- [Original element] → [Canvas Apps alternative used]
Omit this block entirely if no auto substitutions occurred.
On follow-up refinements: If the user asks to change something, apply changes directly to the same output file using the Edit tool. For replicate follow-ups, change ONLY what was asked — do not adjust other parts.
After generating YAML for a component type that has no matching template in templates/, offer:
"I generated [component type] without a reference template. Would you like me to save this as a new template so future generations can use it as a reference?"
If the user is interested, follow the staging process in PROTECTED FILE CHANGES below.
Templates in templates/ are immutable references. Once a template has been accepted into that folder, it must not be edited — only read from during YAML generation.
output/staging-[name].yaml inside the skill directorytemplates/[name].yaml inside the skill directory, and delete the staging file from output/If the AI needs something similar to an existing template but different, duplicate it as a new staging file — do not touch the original.
PA2105 version bumps are the one case where template files may be mechanically updated in place. These change only the @version suffix on control type strings and cannot break rendering.
reference/pa-yaml-rules.md before generating the Skeleton — it contains the exact format rules, sizing strategies, and valid control types.reference/controls-reference.md for valid property names and enum values.context: fork on this skill itself — it must remain conversational to access pasted images. However, the Agent tool IS used within Phase 4 to spawn specialist workers. Those workers receive the pre-analyzed skeleton and design spec as text — they do not need access to the original image.@version everywhere it appears: the VALID CONTROL TYPES table in reference/pa-yaml-rules.md, all code examples in reference/pa-yaml-rules.md, the section heading in reference/controls-reference.md, and every .yaml file in templates/. Use the version number PA reports as current. The same PA2105 warning must never occur twice for the same control.Control: Screen — this causes PA2101. For new screens always use the Screens: top-level format documented in Phase 4 Step 3 and in reference/controls-reference.md.reference/controls-index.md to identify the right control. Version uncertainty is not a reason to substitute.[email protected], [email protected], or [email protected]: Check whether you need Default (TextInput/Radio) or SearchFields (ComboBox). If yes, use the Classic variant instead. Never add these properties to the previous-gen controls — they cause PA2108.reference/controls-reference.md under the exact control type you are using.Text, HintText, Placeholder, TrueText, FalseText, Tooltip, or any other string property on a control, unless the user's source image explicitly contains them or the user explicitly requests them.Classic/[email protected]. For every icon, use [email protected] with an inline SVG. The Classic/Icon control must never appear in generated YAML.Classic/[email protected] (or a Modern button) with OnSelect: =Launch("<url>"). Style it as a text-only button (no fill/border) to visually match a link. Never use <a> tags inside HtmlText as an interaction mechanism.Variant: GridLayout on GroupContainer. Use only Variant: AutoLayout or Variant: ManualLayout for [email protected]. Direction must be expressed with LayoutDirection.npx claudepluginhub toluvictor/canvas-apps-tools --plugin canvas-apps-ui-genGenerates complete Power Apps canvas apps in YAML (pa.yaml) format. Coordinates planner agent for design approval and parallel screen builders; use for creating apps from requirements.
Creates, updates, and deploys Power Apps generative pages for model-driven apps using React 17, TypeScript, Fluent UI V9, and PAC CLI. Useful for building or updating pages in Power Apps.
Scaffolds complete .uxm UI screens by composing uxscii components via agent orchestration. Use when creating login, dashboard, profile, settings, or checkout pages.