genpage

Solid

Creates, updates, and deploys Power Apps generative pages for model-driven apps using React v17, TypeScript, and Fluent UI V9. Completes workflow from requirements to deployment. Uses PAC CLI to deploy the page code. 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".

AI & Automation 317 stars 63 forks Updated today MIT

Install

View on GitHub

Quality Score: 92/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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 ## References - **Code generation rules**: [genpage-rules-reference.md](../../references/genpage-rules-reference.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 steps in order for every `/genpage` invocation. ### Step 1: Validate Prerequisites Run these checks (first invocation per session only). Run each command separately — do not chain with `&&`: ...

Details

Author: microsoft
Repository: microsoft/power-platform-skills
Created: 4 months ago
Last Updated: today
Language: JavaScript
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

create-code-app

Creates Power Apps code apps using React and Vite. Use when building code apps, scaffolding projects, or deploying to Power Platform.

317 Updated today

microsoft

Web & Frontend Listed

landing-page-generator

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

0 Updated 4 days ago

SanctifiedOps

Web & Frontend Solid

landing-page-generator

16,782 Updated 3 days ago

alirezarezvani

Web & Frontend Solid

create-site

This skill should be used when the user asks to "create a power pages site", "build a code site", "scaffold a website", "create a portal", "make a new site", or wants to create a new Power Pages code site (SPA) using React, Angular, Vue, or Astro.

317 Updated today

microsoft

Web & Frontend Featured

landing-page-generator

Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.

39,350 Updated today

sickn33