---

name: genpage version: 2.3.1 description: Creates, updates, and deploys Power Apps generative pages for model-driven apps using React v17, TypeScript, and Fluent UI V9. Orchestrates specialist agents for planning, entity creation, and code generation. Use it when user asks to build, retrieve, or update a page in an existing Microsoft Power Apps model-driven app. Use it when user mentions "generative page", "page in a model-driven", or "genux". This skill stands alone and does not require /app-builder — but if the user wants a whole app built (tables, forms, views, sitemap) rather than pages for an app that already exists, use /app-builder instead. author: Microsoft Corporation argument-hint: "<page description> | edit" user-invocable: true model: sonnet allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, Task, AskUserQuestion, EnterPlanMode, ExitPlanMode, TaskCreate, TaskUpdate, TaskList, read, edit, execute, search, web, agent, todo

Plugin check: Run node "${PLUGIN_ROOT}/scripts/check-version.js" — if it outputs a message, show it to the user before proceeding.

Power Apps Generative Pages Builder

Triggers: genpage, generative page, create genpage, genux page, build genux, power apps page, model page Keywords: power apps, generative pages, genux, model-driven, dataverse, react, fluent ui, pac cli Aliases: /genpage, /gen-page, /genux

Overview

This skill orchestrates specialist agents across the create and edit flows:

Create flow:

1. genpage-planner — validates prerequisites, gathers requirements, detects what entities and apps exist, and returns a proposed plan for the orchestrator to present. Writes genpage-plan.md once the orchestrator re-invokes it with the approval outcome. May pause and return connector_discovery_required (see 2).
2. genpage-connector-builder — top-level orchestrator dispatch for connector feature-gating and discovery; writes connector-bindings.md + connectors.json. Runs after the planner has resolved create-vs-edit and the target environment (discovery is mutating), then the planner is re-invoked with its contract. genpage-customapi-builder — the same top-level dispatch for server-side Custom API (Action/Function) needs; writes custom-api-bindings.md + actions.json.
3. genpage-entity-builder — creates Dataverse entities (tables, columns, relationships, choices, sample data) via the plugin's Node.js Web API scripts
4. genpage-page-builder — generates one complete .tsx file per page; multiple builders run in parallel for multi-page requests

Edit flow:

5. genpage-connector-builder — top-level orchestrator dispatch when an edit adds, replaces, discovers, removes, or clears connector bindings; preserves unchanged bindings when the edit does not touch them. genpage-customapi-builder — the same top-level dispatch when an edit adds, replaces, discovers, removes, or clears Custom API bindings.
6. genpage-edit-planner — reads the downloaded page artifacts, gathers change requirements, presents an edit plan, writes genpage-edit-plan.md

You (the skill) coordinate the agents and own connector and Custom API dispatch, app creation, RuntimeTypes generation, deployment, browser verification, and the inline application of planned edits.

References

• Code generation rules: rules.md
• Troubleshooting: troubleshooting.md
• Sample pages: samples/

Development Standards

• React 17 + TypeScript — all generated code
• Fluent UI V9 — @fluentui/react-components exclusively (DatePicker from @fluentui/react-datepicker-compat, TimePicker from @fluentui/react-timepicker-compat)
• Single file architecture — all components, utilities, styles in one .tsx file
• No external libraries — only React, Fluent UI V9, approved Fluent icons, D3.js for charts
• Type-safe DataAPI — use RuntimeTypes when Dataverse entities are involved
• Responsive design — flexbox, relative units, never 100vh/100vw
• Accessibility — WCAG AA, ARIA labels, keyboard navigation, semantic HTML
• Complete code — no placeholders, TODOs, or ellipses in final output

---

Instructions

Follow these phases in order for every /genpage invocation.

Every <…> you fill into a command goes in single quotes ('<working-dir>/prompt.txt', '<App Name>'). PowerShell and bash expand nothing inside them — not $name, not $(…), not a backtick — and a space does not split the value. Escape a single quote inside the value the shell's way: in PowerShell double it, the typographic ‘ ’ included ('Bob''s app'); in bash close, escape and reopen ('Bob'\''s app'). Never use double quotes for a value ("Revenue $100" arrived as Revenue ) and never leave one bare (D:\Work Projects\… became two arguments). A value holding a double quote " is not put on a command line at all — Windows PowerShell 5.1 drops it and can split the argument there — so ask for an app or solution name without one. Free text (a prompt, an agent message, a page's display name) never goes into a shell command at all, however it is quoted: even a single-quoted here-string ends at a line that begins with '@, and the rest of that line runs. Write it with your file-writing tool and pass the path (Phase 6).

Phase 0: Create Working Directory

Derive a short folder name from the user's requirements:

1. Extract the page name or a 2-4 word summary from $ARGUMENTS
2. Convert to kebab-case (e.g., "Candidate Tracker" → candidate-tracker)
3. Create the folder: mkdir -p '<folder-name>' (PowerShell or bash, the shells every command in this skill is written for)
4. Resolve its absolute path — this is the working directory for all subsequent phases

Phase 0.5: Initialize Local-Dev Manifest

Write package.json and genpage.d.ts into the working directory so the developer can npm install and get IntelliSense, type-checking, and "go to definition" in their editor. Versions come from references/supported-dependencies.md (single source of truth: scripts/lib/supported-dependencies.js).

node "${PLUGIN_ROOT}/scripts/generate-page-manifest.js" '<working-dir>' '<kebab-slug>'

• <kebab-slug> is the same slug used for the working directory.
• Add --features charts,datepicker,timepicker (comma-separated) only when the requirements clearly call for them; otherwise omit and keep the manifest lean.
• The script keeps an existing package.json (no --force) only when it already lists every package the requested features need. A package present at a version the user changed is kept and listed as versionDrift in the JSON summary — mention it, since local type-checking then differs from the versions pages are written for. Pass --force to overwrite (used in regeneration flows when versions drift).
• Output is a JSON summary on stdout. Continue only on exit 0.
  • Exit 2 — halt and show the user the error line. When it names packages a requested feature needs that the existing package.json lacks, ask whether they will merge them into it or want a rerun with --force (which replaces the file), and rerun until it exits 0 before Phase 1 — continuing would leave a --features charts run on a manifest without d3, the stale state this check exists to stop. Exit 2 also reports a working directory that is a link or not a directory: never write through it.
  • Any other non-zero exit is a usage error in the command above: fix it and rerun.

Phase 1: Plan

⚠️ CRITICAL — the interactive steps run HERE, in the main conversation loop. You MUST NOT dispatch them to a Task subagent.

A Task subagent is headless: AskUserQuestion, EnterPlanMode and ExitPlanMode never reach the user from inside one. A flow that specifies them there cannot complete — the question is never answered and the approval never given. This is the same rule /app-builder follows, and the reason its subagents are headless workers only.

genpage-planner is therefore a headless discovery agent. It runs the read-only work and returns what it found; you ask the questions and present the plan.

Run in the main loop (never delegated):

1. Prerequisite validation (node --version, pac help version > 2.10.0)
2. Auth verification (pac auth list, environment selection)
3. The structured "Create new / Edit existing" question (AskUserQuestion)
4. Language detection (pac model list-languages) — only on new-page path
5. Entity existence detection (pac model list-tables --search)
6. App detection (pac model list) with proper selection prompts
7. Plan-mode presentation and approval (EnterPlanMode / ExitPlanMode)
8. Telling genpage-planner the approval outcome — it writes genpage-plan.md itself — and confirming the file exists before Phase 2

Steps 1, 2, 4, 5, 6 are read-only discovery and may be delegated to genpage-planner; steps 3, 7 and 8 never can. Delegating the discovery is an optimisation, not a requirement — running it inline is equally correct, but genpage-plan.md is still written by the planner either way (see step 6 of the Steps list): its section headings are a machine-readable contract every downstream phase parses by name, so it has exactly one author. If you ran the discovery inline, dispatch the planner once with what you found, so it has the context to produce the plan without repeating your reads.

Never skip the prereq/auth steps, even when $ARGUMENTS already states the intent. A stated intent lets you skip question 3; it does not establish that the CLI is present, authenticated, or pointed at the right environment.

Whoever runs a step records it in workflow-log.md in the documented format — AskUserQuestion: <question> → <answer>, EnterPlanMode called followed by the response. The log is the contract the eval harness reads, and it does not care which loop made the call.

Unattended runs (Copilot autopilot / Claude auto-accept)

Copilot CLI autopilot and Claude Code auto-accept drive this skill with no user watching. Every gate below is written as "ask the user", and in those modes there is nobody to answer: the run either stalls on a question no one sees or, worse, records an answer nobody gave. Resolve the mode once, at the start of Phase 1, and carry it through every gate:

node "${PLUGIN_ROOT}/scripts/resolve-interaction-mode.js"

One JSON line, always exit 0 — "there is no user" is a fact about the run, not a failure of it:

{ "ok": true, "interactive": false, "reason": "POWER_PLATFORM_SKILLS_NONINTERACTIVE is set" }

A run is unattended when --non-interactive is passed or POWER_PLATFORM_SKILLS_NONINTERACTIVE is 1/true — the same switch /app-builder already uses, so one setting covers both skills.

When interactive is false, do not call AskUserQuestion, EnterPlanMode or ExitPlanMode at all. Take the documented default and record it in workflow-log.md as Unattended default: <question> → <answer> (<reason>), so the log still shows what decided the run:

| Gate | Attended | Unattended | | --- | --- | --- | | Recording the resolved mode | Nothing to record | Write the mode itself as Unattended default: interaction mode → unattended (<reason>) before the first gate. Record it with this marker, not as free prose such as Interaction mode: unattended — the evaluator keys on the marker, and prose forms are indistinguishable from an attended log that merely mentions the word (Mode: unattended = false, not unattended). | | Create new / edit existing (step 2) | AskUserQuestion | Whatever $ARGUMENTS states. With nothing stated, create new — the only additive choice.