genpage

Name: genpage
Author: microsoft

132installs103forks

How to install genpage?

microsoft/power-platform-skills/genpage

$npx -y skills add microsoft/power-platform-skills --skill genpage

Installs into the current project.

Summary

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 exist

Files · 1

View on GitHub

SKILL.md

1	# Power Apps Generative Pages Builder
2
3	Triggers: genpage, generative page, create genpage, genux page, build genux, power apps page, model page
4	Keywords: power apps, generative pages, genux, model-driven, dataverse, react, fluent ui, pac cli
5	Aliases: /genpage, /gen-page, /genux
6
7	## Overview
8
9	This skill orchestrates four specialist agents across the create and edit flows:
10
11	Create flow:
12	1. `genpage-planner` — validates prerequisites, gathers requirements, detects what
13	entities and apps exist, presents a plan for approval, writes `genpage-plan.md`
14	2. `genpage-entity-builder` — creates Dataverse entities (tables, columns,
15	relationships, choices, sample data) via the plugin's Node.js Web API scripts
16	3. `genpage-page-builder` — generates one complete `.tsx` file per page; multiple
17	builders run in parallel for multi-page requests
18
19	Edit flow:
20
21	4. `genpage-edit-planner` — reads the downloaded page artifacts, gathers change
22	requirements, presents an edit plan, writes `genpage-edit-plan.md`
23
24	You (the skill) coordinate the agents and own app creation, RuntimeTypes generation,
25	deployment, browser verification, and the inline application of planned edits.
26
27	## References
28
29	- Code generation rules: [rules.md](../../references/rules.md)
30	- Troubleshooting: [troubleshooting.md](../../references/troubleshooting.md)
31	- Sample pages: [samples/](../../samples/)
32
33	## Development Standards
34
35	- React 17 + TypeScript — all generated code
36	- Fluent UI V9 — `@fluentui/react-components` exclusively (DatePicker from `@fluentui/react-datepicker-compat`, TimePicker from `@fluentui/react-timepicker-compat`)
37	- Single file architecture — all components, utilities, styles in one `.tsx` file
38	- No external libraries — only React, Fluent UI V9, approved Fluent icons, D3.js for charts
39	- Type-safe DataAPI — use RuntimeTypes when Dataverse entities are involved
40	- Responsive design — flexbox, relative units, never `100vh`/`100vw`
41	- Accessibility — WCAG AA, ARIA labels, keyboard navigation, semantic HTML
42	- Complete code — no placeholders, TODOs, or ellipses in final output
43
44	---
45
46	## Instructions
47
48	Follow these phases in order for every `/genpage` invocation.
49
50	### Phase 0: Create Working Directory
51
52	Derive a short folder name from the user's requirements:
53
54	1. Extract the page name or a 2-4 word summary from `$ARGUMENTS`
55	2. Convert to kebab-case (e.g., "Candidate Tracker" → `candidate-tracker`)
56	3. Create the folder: `mkdir -p <folder-name>`
57	4. Resolve its absolute path — this is the working directory for all subsequent phases
58
59	### Phase 0.5: Initialize Local-Dev Manifest
60
61	Write `package.json` and `genpage.d.ts` into the working directory so the
62	developer can `npm install` and get IntelliSense, type-checking, and "go to
63	definition" in their editor. Versions come from
64	`references/supported-dependencies.md` (single source of truth:
65	`scripts/lib/supported-dependencies.js`).
66
67	```bash
68	node "${PLUGIN_ROOT}/scripts/generate-page-manifest.js" <working-dir> <kebab-slug>
69	```
70
71	- `<kebab-slug>` is the same slug used for the working directory.
72	- Add `--features charts,datepicker,timepicker` (comma-separated) only when
73	the requirements clearly call for them; otherwise omit and keep the
74	manifest lean.
75	- The script is idempotent — it skips files that already exist. Pass
76	`--force` to overwrite (used in regeneration flows when versions drift).
77	- Output is a JSON summary on stdout; pipe to stderr for visibility but do
78	not block the workflow if the script returns non-zero — the manifest is a
79	dev-ergonomics aid, not part of the deployed artifact.
80
81	### Phase 1: Plan
82
83	> **⚠️ CRITICAL — you MUST invoke `genpage-planner` via the `Task` tool. You MUST
84	> NOT inline the planner's questions yourself with `AskUserQuestion`.**
85	>
86	> The planner is not optional or skippable. It runs:
87	> 1. Prerequisite validation (`node --version`, `pac help` version >= 2.7.0)
88	> 2. Auth verification (`pac auth list`, environment selection)
89	> 3. The structured "Create new / Edit existing" question (via `AskUserQuestion`
90	> inside the planner subagent, not here)
91	> 4. Language detection (`pac model list-languages`) — only on new-page path
92	> 5. Entity existence detection (`pac model list-tables --search`)
93	> 6. App detection (`pac model l

People who liked this also viewed

6 picks

Type

genpage

132installs103forks

View on GitHub

How to install genpage?

microsoft/power-platform-skills/genpage

$npx -y skills add microsoft/power-platform-skills --skill genpage

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Power Apps Generative Pages Builder
2
3	Triggers: genpage, generative page, create genpage, genux page, build genux, power apps page, model page
4	Keywords: power apps, generative pages, genux, model-driven, dataverse, react, fluent ui, pac cli
5	Aliases: /genpage, /gen-page, /genux
6
7	## Overview
8
9	This skill orchestrates four specialist agents across the create and edit flows:
10
11	Create flow:
12	1. `genpage-planner` — validates prerequisites, gathers requirements, detects what
13	entities and apps exist, presents a plan for approval, writes `genpage-plan.md`
14	2. `genpage-entity-builder` — creates Dataverse entities (tables, columns,
15	relationships, choices, sample data) via the plugin's Node.js Web API scripts
16	3. `genpage-page-builder` — generates one complete `.tsx` file per page; multiple
17	builders run in parallel for multi-page requests
18
19	Edit flow:
20
21	4. `genpage-edit-planner` — reads the downloaded page artifacts, gathers change
22	requirements, presents an edit plan, writes `genpage-edit-plan.md`
23
24	You (the skill) coordinate the agents and own app creation, RuntimeTypes generation,
25	deployment, browser verification, and the inline application of planned edits.
26
27	## References
28
29	- Code generation rules: [rules.md](../../references/rules.md)
30	- Troubleshooting: [troubleshooting.md](../../references/troubleshooting.md)
31	- Sample pages: [samples/](../../samples/)
32
33	## Development Standards
34
35	- React 17 + TypeScript — all generated code
36	- Fluent UI V9 — `@fluentui/react-components` exclusively (DatePicker from `@fluentui/react-datepicker-compat`, TimePicker from `@fluentui/react-timepicker-compat`)
37	- Single file architecture — all components, utilities, styles in one `.tsx` file
38	- No external libraries — only React, Fluent UI V9, approved Fluent icons, D3.js for charts
39	- Type-safe DataAPI — use RuntimeTypes when Dataverse entities are involved
40	- Responsive design — flexbox, relative units, never `100vh`/`100vw`
41	- Accessibility — WCAG AA, ARIA labels, keyboard navigation, semantic HTML
42	- Complete code — no placeholders, TODOs, or ellipses in final output
43
44	---
45
46	## Instructions
47
48	Follow these phases in order for every `/genpage` invocation.
49
50	### Phase 0: Create Working Directory
51
52	Derive a short folder name from the user's requirements:
53
54	1. Extract the page name or a 2-4 word summary from `$ARGUMENTS`
55	2. Convert to kebab-case (e.g., "Candidate Tracker" → `candidate-tracker`)
56	3. Create the folder: `mkdir -p <folder-name>`
57	4. Resolve its absolute path — this is the working directory for all subsequent phases
58
59	### Phase 0.5: Initialize Local-Dev Manifest
60
61	Write `package.json` and `genpage.d.ts` into the working directory so the
62	developer can `npm install` and get IntelliSense, type-checking, and "go to
63	definition" in their editor. Versions come from
64	`references/supported-dependencies.md` (single source of truth:
65	`scripts/lib/supported-dependencies.js`).
66
67	```bash
68	node "${PLUGIN_ROOT}/scripts/generate-page-manifest.js" <working-dir> <kebab-slug>
69	```
70
71	- `<kebab-slug>` is the same slug used for the working directory.
72	- Add `--features charts,datepicker,timepicker` (comma-separated) only when
73	the requirements clearly call for them; otherwise omit and keep the
74	manifest lean.
75	- The script is idempotent — it skips files that already exist. Pass
76	`--force` to overwrite (used in regeneration flows when versions drift).
77	- Output is a JSON summary on stdout; pipe to stderr for visibility but do
78	not block the workflow if the script returns non-zero — the manifest is a
79	dev-ergonomics aid, not part of the deployed artifact.
80
81	### Phase 1: Plan
82
83	> **⚠️ CRITICAL — you MUST invoke `genpage-planner` via the `Task` tool. You MUST
84	> NOT inline the planner's questions yourself with `AskUserQuestion`.**
85	>
86	> The planner is not optional or skippable. It runs:
87	> 1. Prerequisite validation (`node --version`, `pac help` version >= 2.7.0)
88	> 2. Auth verification (`pac auth list`, environment selection)
89	> 3. The structured "Create new / Edit existing" question (via `AskUserQuestion`
90	> inside the planner subagent, not here)
91	> 4. Language detection (`pac model list-languages`) — only on new-page path
92	> 5. Entity existence detection (`pac model list-tables --search`)
93	> 6. App detection (`pac model l

People who liked this also viewed

6 picks

Type