From powerplatform-bestpractices
Best practices for Power Apps Generative Pages inside model-driven apps. Use when the user is building or modifying a custom page (React + TypeScript + Fluent UI v9) deployed with pac pages push — platform context access, Dataverse data columns, sitemap configuration, or bundle size. Also use when the user mentions "generative page", "custom page in a model-driven app", or "genpage".
How this skill is triggered — by the user, by Claude, or both
Slash command
/powerplatform-bestpractices:ppbp-generative-pagesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
`model-apps:genpage` — creates, updates, and deploys Power Apps Generative Pages for model-driven apps using React v17, TypeScript, and Fluent UI v9. Load this official skill before applying the guidance below. If it is not installed, **strongly recommend the user install it** before proceeding.
model-apps:genpage — creates, updates, and deploys Power Apps Generative Pages for model-driven apps using React v17, TypeScript, and Fluent UI v9. Load this official skill before applying the guidance below. If it is not installed, strongly recommend the user install it before proceeding.
This skill owns the following paths in the canonical repository layout (see ppbp-overview):
<repo-root>/
└── genpages/
└── <model-app-name>/
└── <page-name>/ # One subfolder per Generative Page inside the model-driven app
The intermediate <model-app-name> folder is mandatory — never place page folders directly under genpages/.
@microsoft/powerplatform-mda-page-sdk for all platform interactions — it provides typed access to the form context, navigation, and Dataverse Web API.@fluentui/react-components) — they are the only component library guaranteed to match the shell's theming tokens.context.parameters.entityId, not from the URL — the URL format is an implementation detail that may change.customPage.yml) under dataColumns; the platform pre-fetches them before mounting the page.context.navigation.openForm() / openEntityList() to stay inside the model-driven shell.pac pages push after every change; the page is compiled and embedded in the solution automatically.FluentProvider with webLightTheme at the root only as a local dev fallback — in production the shell injects its own theme tokens.Calling Xrm.Page directly — Xrm.Page is deprecated and unavailable in Generative Pages. Use the SDK context object passed to the page entry point.
Fetching data outside dataColumns — Columns not declared in the manifest are not pre-loaded and require a separate Web API call, adding latency. Declare all needed columns upfront.
Using useState for platform context — The platform context reference is stable; storing it in state causes stale closure bugs. Store it in a useRef or access it directly from the entry point closure.
Forgetting "type": "CustomPage" in the sitemap — Adding the page to the app without the correct sitemap entry type causes the page to render in a plain iframe without SDK access.
Bundle size creep — Generative Pages have a tighter bundle budget than standalone apps. Monitor with pac pages analyze; lazy-load heavy sub-sections with React.lazy.
This skill covers Generative Pages inside model-driven apps only. It does not cover:
ppbp-code-appsppbp-dv-metadatappbp-almSearches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub tchinnin/powerplatform-bestpractices-skills