Canvas Apps Ui Gen
This one takes UI mockups, screenshots, or plain text descriptions and turns them into paste-ready Power Apps Canvas YAML. It walks you through a structured flow: detects whether you're replicating a design, modernizing an existing screen, or building from scratch, then analyzes the layout, checks against Canvas Apps limitations (some controls just don't exist), and asks targeted questions about Classic vs Modern controls, color schemes, and where the YAML will land. The orchestration is methodical, almost pedantic, which is exactly what you want when you're trying to avoid the usual Canvas Apps trial-and-error. Saves you from manually translating a Figma comp into nested containers at midnight.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 8
- skills.sh installs
- 211
- GitHub stars
- 151
- last updated
- Jun 3, 2026
Install
$ npx -y skills add toluvictor/canvas-apps-tools --skill canvas-apps-ui-gen --agent claude-codeInstalls into .claude/skills of the current project.
Files
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."
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/toluvictor/canvas-apps-tools
- Category
- Frontend Development
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
html-pptnexu-io/open-designFor consulting delivery work: turn diagnosis, frameworks, and project work into a client-adoptable action plan. Built around the core query "consulting-final-de208skills.sh installs
angular-bootstrapoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Bootstrap, ng-bootstrap, Bootstrap components in Angular, or Bootstrap 5 integration.205skills.sh installs
animation-best-practicesmillionco/react-doctorCSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animat200skills.sh installs
new-componentlongbridge/gpui-componentCreate new GPUI components. Use when building components, writing UI elements, or creating new component implementations.197skills.sh installsangular-jestoguzhan18/angular-ecosystem-skillsALWAYS use when testing Angular applications with Jest, configuring Jest, or migrating from Jasmine/Karma to Jest.190skills.sh installsangular-standaloneoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Standalone Components, imports array, bootstrapping, or migrating from NgModules in Angular applications.189skills.sh installs