skills.rest
geekfujiwara
geekfujiwaraCOMMUNITY
Explore all skills by this author →
Website𝕏@geekfujiwaraGitHub

generative-page

Create single-file React components with D3 visualizations for model-driven apps.

56|20|Updated Oct 9, 2025
Search Tags:#d3#generative#fluent-ui#pac-cli#power-apps#generative-page#react-17
One-click install
npx skills add https://github.com/geekfujiwara/CodeAppsDevelopmentStandard --skill generative-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-page
Source: https://github.com/geekfujiwara/CodeAppsDevelopmentStandard/tree/main/.github/skills/generative-page
Command: npx skills add https://github.com/geekfujiwara/CodeAppsDevelopmentStandard --skill generative-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generative Pages lets you rapidly design, debug, and deploy KPI dashboards and UI pages for model-driven apps using a compact single-file React 17 component with Fluent UI V9 and D3, reducing boilerplate and setup time.

Core Features & Use Cases

  • Single-file React components that combine UI and charts with Fluent UI and D3 for KPI dashboards, maps, and data visualizations.
  • End-to-end workflow support: design questions, pattern selection, code authoring, deployment via PAC CLI, and automatic SiteMap updates.
  • Multilanguage and responsive UI with design-system patterns, ready for production-grade power apps integrations.

Quick Start

Create a Generative Page by writing a single React 17 file and deploying it with pac model genpage upload.

Frequently Asked Questions about generative-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom KPI dashboards for Power Apps model-driven apps?▼

Building KPI dashboards for model-driven apps involves creating single-file React 17 components with D3 visualizations and Fluent UI, then deploying them as Generative Pages using the PAC CLI `pac model genpage upload` command.

What is the best way to deploy React components to Power Apps model-driven apps?▼

Deploying React components to model-driven apps is best handled by packaging them as single-file Generative Pages and using the PAC CLI `pac model genpage upload` command, which also manages automatic SiteMap updates for the deployed pages.

Can I use D3 visualizations with Fluent UI in Power Apps?▼

Yes, D3 visualizations work alongside Fluent UI V9 in Power Apps by embedding them within single-file React 17 components to render responsive data charts and maps for model-driven apps.

How do I create data-rich pages for model-driven apps without heavy boilerplate?▼

You create data-rich pages for model-driven apps with minimal boilerplate by using Generative Pages, which enforce single-file React 17 component patterns with Fluent UI and D3 to streamline setup and reduce repetitive code.

Does deploying Generative Pages automatically update the Power Apps SiteMap?▼

Yes, deploying Generative Pages via the PAC CLI `pac model genpage upload` command automatically updates the Power Apps SiteMap, ensuring newly uploaded pages are immediately accessible in the model-driven app navigation.

Related Skills

Explore More Design & Creative Skills→
CrazySwamiCrazySwami

testing

Create Playwright, Vitest, and Storybook tests for TypeScript/React apps.

Community
Intermediate
microsoftmicrosoft
647

genpage

Plan, generate, and deploy Power Apps generative pages via PAC CLI.

Official
Advanced
Kazuya0628Kazuya0628

generative-page-dev

Automate Power Apps Generative Pages development with React 17, Fluent UI V9, and PAC CLI.

Community
Advanced
HouseGarofaloHouseGarofalo
3

power-apps

Develop PCF controls with React and TypeScript for Power Apps.

Official
Advanced