Canvas App
Create or change a Power Apps canvas app from natural-language requirements using the Canvas Authoring MCP sync and compile workflow.
Overview
Canvas App is an agent skill most often used in Build (also Validate for quick prototypes) that creates or edits Power Apps canvas apps via MCP sync, compile, and parallel screen builders.
Install
npx skills add https://github.com/microsoft/power-platform-skills --skill canvas-appWhat is this skill?
- Unified CREATE vs EDIT routing after sync detects empty vs existing app content
- CREATE mode: preferences wizard plus parallel screen builders for new apps
- EDIT mode: simple inline edits or complex planner plus parallel screen builders
- Triggers on create, build, generate, modify, update, or edit canvas app and .pa.yaml files
- Uses Canvas Authoring MCP tools sync_canvas and compile_canvas in the allowed-tools list
- 3 workflow modes: CREATE, EDIT simple, EDIT complex with parallel screen builders
Adoption & trust: 55 installs on skills.sh; 349 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have canvas app requirements or change requests but manual Studio edits and YAML drift make multi-screen updates slow and error-prone.
Who is it for?
Solo builders on Power Platform who describe app changes in chat and want MCP-backed sync and compile instead of solo-clicking every screen.
Skip if: Teams building only custom web frontends outside Power Apps or environments without Canvas Authoring MCP configured.
When should I use this skill?
Requests to create, build, generate, modify, update, change, or edit a Canvas App or .pa.yaml files.
What do I get? / Deliverables
You get a synced, compiled canvas app path—new generation or structured edits—with CREATE or EDIT routing matched to scope.
- Updated canvas app definition and compiled state via MCP
- New or edited screens aligned to stated requirements
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canvas apps are the primary deliverable during Build; substantial edits and greenfield generation both land here after requirements exist. Canvas authoring is low-code UI and screen logic—frontend shelf even when data connections are involved.
Where it fits
Spin up a canvas proof-of-concept from a short requirements paragraph before committing to full Dataverse wiring.
Add three new screens and navigation after sync shows an existing app in EDIT complex mode.
Apply a bounded UI fix pack through simple EDIT mode after user feedback without replanning the whole app.
How it compares
Agent-driven canvas coauthoring with MCP, not a generic React or Next.js UI generator.
Common Questions / FAQ
Who is canvas-app for?
Power Platform builders and citizen developers who create or modify canvas apps and .pa.yaml with Claude Code–class agents and Canvas Authoring MCP.
When should I use canvas-app?
In Validate when you prototype a clickable internal tool on canvas; in Build when you generate a new app or apply simple or complex multi-screen edits after requirements are clear.
Is canvas-app safe to install?
It can read, write, edit, and run Bash against your project—check Security Audits on this page and restrict MCP access to trusted tenants and repos.
SKILL.md
READMESKILL.md - Canvas App
# Create or Edit a Canvas App Create or edit a Power Apps canvas app for the following requirements: $ARGUMENTS ## Overview This skill handles both **creating** and **editing** canvas apps through a unified workflow. It syncs the current app state to detect whether the app has existing content, then routes accordingly: - **CREATE mode** — the app is empty or has no meaningful content; a new app is generated from scratch using a preferences wizard and parallel screen builders. - **EDIT mode (simple)** — the app has existing content and the requested changes are small; edits are applied inline without planning agents. - **EDIT mode (complex)** — the app has existing content and the requested changes are substantial; a planner designs the changes and parallel screen builders execute them. Two specialist agents are used for planned work: 1. **`canvas-app-planner`** — discovers available controls, APIs, and data sources; gathers control property definitions; and writes the shared plan document (`canvas-app-plan.md`) and `App.pa.yaml`. Receives the approved plan from the skill. 2. **`canvas-screen-builder`** — writes or modifies exactly one screen's YAML; multiple builders run in parallel after the plan is approved You (the skill) coordinate the agents, detect mode, design and present the plan for user approval, and own the compilation + error-fixing loop after all screens are written. --- ## Phase 0 — Create App Folder Before syncing or editing, create a subfolder to contain the app's YAML files: 1. Extract the app name or a 2–4 word summary from `$ARGUMENTS` 2. Convert to kebab-case (e.g., "Expense Tracker" → `expense-tracker`, "my travel planner" → `my-travel-planner`) 3. Create the folder using `Bash`: `mkdir -p <folder-name>` 4. Resolve its absolute path — this is the **working directory** for all subsequent phases Pass this absolute path as the working directory in every agent prompt below. --- ## Phase 1 — Sync Call the `sync_canvas` MCP tool targeting the working directory. This pulls the current app state from the coauthoring session into local `.pa.yaml` files. Only proceed after `sync_canvas` completes successfully. --- ## Phase 2 — Detect Mode After `sync_canvas` completes, read the synced `.pa.yaml` files and check whether the app has meaningful content. An app is considered **empty** if: - No `.pa.yaml` files were written, or - The only files present contain no screens, or - Every screen present has no controls (only bare screen-level YAML with no children), or - Every screen's controls consist solely of containers (e.g., `GroupContainer`) with no leaf controls inside them **If the app is empty → CREATE mode.** Proceed to Phase 3. **If the app has meaningful content → EDIT mode.** Skip Phase 3 and proceed to Phase 4. --- ## Phase 3 — Gather Preferences (CREATE mode only) Use `AskUserQuestion` to collect design preferences that cannot be reliably inferred from `$ARGUMENTS`. **Parse `$ARGUMENTS` first** to determine which questions to skip — but a short request like "visitor check-in app" or "expense tracker" leaves most preferences unspecified and you MUST ask. Call `AskUserQuestion` with the applicable questions from the table below (include only the ones