/genpage

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, TaskCreate, TaskUpdate, TaskList

> **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, presents a plan for approval, writes `genpage-plan.md`. 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. 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, or clears connector bindings; preserves unchanged bindings when the feature gate is OFF 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 dispatch, app creation, RuntimeTypes generation, deployment, browser verification, and the inline application of planned edits.

References

• **Code generation rules**: [rules.md](../../references/rules.md)
• **Troubleshooting**: [troubleshooting.md](../../references/troubleshooting.md)
• **Sample pages**: [samples/](../../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.

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>` (bash/PowerShell; on cmd use `mkdir <folder-name>`, which has no `-p` and errors if the folder exists) 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 is **idempotent** — it skips files that already exist. Pass

`--force` to overwrite (used in regeneration flows when versions drift).

• Output is a JSON summary on stdout; pipe to stderr for visibility but do

not block the workflow if the script returns non-zero — the manifest is a dev-ergonomics aid, not part of the deployed artifact.

Phase 1: Plan

> **⚠️ CRITICAL — you MUST invoke `genpage-planner` via the `Task` tool. You MUST > NOT inline the planner's questions yourself with `AskUserQuestion`.** > > The planner is not optional or skippable. It runs: > 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 (via `AskUserQuestion` > inside the planner subagent, not here) > 4. Language detection (`pac model list-languages`) — only on new-page path > 5. Entity existence detection