AI skills for Power Apps Canvas Apps - generate paste-ready YAML from mockups, screenshots, or text descriptions
npx claudepluginhub toluvictor/canvas-apps-toolsAI skills for Power Apps Canvas Apps - generate, modify, and integrate.
ToluVictorGenerate paste-ready Power Apps Canvas App YAML from screenshots, mockups, or text — directly inside Claude Code.
This plugin gives Claude Code a single skill — canvas-apps-ui-gen — that acts as a Power Apps Canvas App developer. Point it at a mockup, describe a screen, or paste a screenshot of an existing app and it produces YAML you can paste straight into Power Apps Studio.
canvas-apps-ui-gen-output/ in your current working directory and displays it inline when small (< 400 lines)Choose whichever method fits your workflow. Both end with the same command: /canvas-apps-ui-gen.
Run these commands inside Claude Code:
Add this repo as a marketplace, then install the plugin:
/plugin marketplace add ToluVictor/canvas-apps-tools
Then install the plugin:
/plugin install canvas-apps-ui-gen@ToluVictor/canvas-apps-tools
Open a new Claude Code instance to activate the plugin, then run the skill:
/canvas-apps-ui-gen
If you only want this one skill without installing the full plugin, run this in your terminal:
npx skills add ToluVictor/canvas-apps-tools --skill canvas-apps-ui-gen
Then run the skill inside Claude Code:
/canvas-apps-ui-gen
This uses the skills.sh Agent Skills CLI. The skill is installed into your Claude Code skills folder and is available immediately in any new session.
Once installed, run /canvas-apps-ui-gen and Claude will ask which mode you want:
Pass a file path as an argument:
/canvas-apps-ui-gen C:\path\to\mockup.png
Or paste the image directly into the chat and run /canvas-apps-ui-gen — Claude detects it automatically.
Run /canvas-apps-ui-gen with no arguments, choose Build from scratch, and describe what you want:
"Sales order entry with a search bar, a data grid, and a totals row at the bottom"
Paste a screenshot of your current Power Apps screen into the chat, run /canvas-apps-ui-gen, and choose Improvement. Describe the changes you want and Claude will modernize the layout, controls, and styling.
When generation finishes, Claude shows a link to the output file and paste instructions. The general flow is:
canvas-apps-ui-gen-output/ in your current working directoryCtrl+A then Ctrl+C to copy everythingThe skill runs a multi-agent pipeline internally:
| Symptom | Fix |
|---|---|
/canvas-apps-ui-gen not recognized | Open a new Claude Code instance; verify the install with /plugin → Installed tab |
| No output file appears | Check canvas-apps-ui-gen-output/ in your current working directory; rerun with a clearer description or smaller scope |
| YAML shows errors in Power Apps Studio | Copy from the file directly (do not retype); if errors persist, rerun with a simpler prompt and fewer nested controls |
| PA2105 version warning | Claude will self-heal the version number if you mention the warning in the same session |
| "The function * returned a non-finite number." error banner appears after pasting YAML | This occurs when the app contains a Gallery whose Items property could not be evaluated at paste time. Save the page, then reload Canvas App Studio — the error will clear on reload. |
skills/canvas-apps-ui-gen/MIT — see LICENSE
By Tolu Victor Sanwoolu