Skip to content

README.md

Latest commit

 

History

History
234 lines (155 loc) · 9.56 KB

README.md

File metadata and controls

234 lines (155 loc) · 9.56 KB

Power Pages Plugin

Create and deploy Power Pages code sites using modern frontend frameworks. This plugin provides a complete workflow — from scaffolding a new site to deploying it, setting up data models, authentication, and Web API integrations — all through conversational AI skills.

Supported frameworks: React, Angular, Vue, Astro (static SPAs)

Installation

From the marketplace

/plugin marketplace add microsoft/power-platform-skills
/plugin install power-pages@power-platform-skills

From a local clone

claude --plugin-dir /path/to/power-platform-skills/plugins/power-pages

Hook behavior

The plugin centralizes Claude Code hook registration in hooks/hooks.json.

  • PostToolUse hooks match the Skill tool so validation runs when a tracked Power Pages skill completes.
  • Command validators and checklist verification are maintained centrally instead of in per-skill frontmatter.

This keeps hook behavior in one place and avoids relying on skill-frontmatter hook registration.

Prerequisites

Prerequisite Required for Install
Node.js (LTS) All skills winget install OpenJS.NodeJS.LTS
PAC CLI Deploy, activate, data model dotnet tool install -g Microsoft.PowerApps.CLI.Tool
Azure CLI Data model, sample data, activation winget install Microsoft.AzureCLI

Skills

The plugin provides 9 skills that cover the full lifecycle of a Power Pages code site. Each skill is invoked conversationally — just describe what you want to do.

/create-site

"Create a Power Pages site with React for a job board"

Scaffolds a complete code site from a framework template, applies your design direction (fonts, colors, layout), builds out pages and components, and provides a live preview in the browser throughout development.

  • Choose from React, Vue, Angular, or Astro
  • Real images from Unsplash (no placeholders)
  • Live browser preview during development
  • Git commits at each milestone

/deploy-site

"Deploy my site to Power Pages"

Builds your project and uploads it to your Power Pages environment using pac pages upload-code-site. Handles common blockers like JavaScript attachment restrictions.

  • Verifies PAC CLI installation and authentication
  • Confirms target environment before deploying
  • Creates .powerpages-site folder with deployment artifacts

/activate-site

"Activate my site"

Provisions a website record in your Power Platform environment so your site is accessible at a public URL.

  • Generates a subdomain suggestion (you choose the final name)
  • Polls provisioning status until the site is live
  • Provides the final site URL

/setup-datamodel

"Create Dataverse tables for my site"

Analyzes your site's requirements and creates Dataverse tables, columns, and relationships via OData API calls.

  • Spawns a Data Model Architect agent that proposes tables based on your site's code
  • Alternatively, you can upload an ER diagram
  • Generates a .datamodel-manifest.json used by downstream skills
  • Visualizes the data model as a Mermaid ER diagram

/add-sample-data

"Add sample data to my tables"

Populates your Dataverse tables with realistic, contextually appropriate records.

  • Reads table definitions from .datamodel-manifest.json or queries OData metadata
  • Generates values that match column types and names (emails, dates, currencies, etc.)
  • Inserts records in dependency order (parent tables first)

/integrate-webapi

"Connect my site to the Dataverse tables"

Orchestrates the full Web API integration lifecycle — from analyzing your site's code to identify where data is needed, through generating typed API code for each table, to configuring table permissions and site settings so the APIs work in production.

The skill first scans your codebase to find components using mock data, placeholder fetch calls, or hardcoded arrays, then maps them to your Dataverse tables. It processes each table sequentially, spawning a dedicated Web API Integration agent that creates the integration code. After all tables are wired up, a Table Permissions agent proposes CRUD permissions and scopes, and a Web API Settings agent proposes site settings with case-sensitive validated column names queried directly from Dataverse — or you can upload your own permissions diagram instead.

What gets created:

  • Shared powerPagesApi.ts client with anti-forgery token management, OData URL builder, and exponential backoff retry logic
  • TypeScript entity types and domain mappers per table
  • CRUD service layer per table using /_api/ endpoints with dual token headers and @odata.bind for lookups
  • Framework-specific patterns: React hooks, Vue composables, Angular injectable services
  • Table permission YAML files and site setting YAML files (with explicit validated column lists by default; use * only for aggregate OData scenarios that otherwise 403)

What gets updated:

  • Existing components are refactored to use real API calls (mock data and placeholder fetches are replaced)
  • .powerpages-site/table-permissions/ and .powerpages-site/site-settings/ directories are populated for deployment

/setup-auth

"Set up authentication for my site"

Adds login/logout functionality and role-based authorization to your site.

  • Auth service with anti-forgery token handling
  • Login/logout UI component
  • Role-based UI patterns (show/hide elements by role)
  • Framework-specific implementation (hooks, composables, services)

/create-webroles

"Create web roles for my site"

Generates web role YAML files in your .powerpages-site directory for managing user access.

  • Discovers existing roles before creating new ones
  • Generates proper UUIDs for each role
  • Enforces uniqueness constraints (one anonymous role, one authenticated role)

/add-seo

"Add SEO to my site"

Adds search engine optimization artifacts: robots.txt, sitemap.xml, and meta tags (Open Graph, Twitter Cards).

  • Auto-discovers routes from your framework's router
  • Generates sitemap with production URLs
  • Adds viewport, charset, description, and social sharing meta tags

Agents

The plugin includes 4 specialized agents that are spawned automatically by skills when needed:

Agent Purpose Triggered by
Data Model Architect Analyzes your site and proposes a Dataverse data model with an ER diagram /setup-datamodel
Web API Integration Creates typed API client, services, and hooks for a Dataverse table /integrate-webapi
Table Permissions Proposes table permissions (web roles, CRUD flags, scopes) with a visual Mermaid diagram /integrate-webapi
Web API Settings Proposes Web API site settings with case-sensitive validated column names from Dataverse /integrate-webapi

The Data Model Architect, Table Permissions, and Web API Settings agents are read-only — they analyze and propose but never create or modify resources directly. You review and approve their proposals before any changes are made.

Typical Workflow

A common end-to-end workflow looks like this:

1. /create-site       →  Scaffold + design + build pages
2. /deploy-site       →  Upload to Power Pages environment
3. /activate-site     →  Provision a public URL
4. /setup-datamodel   →  Create Dataverse tables
5. /add-sample-data   →  Populate tables with test records
6. /integrate-webapi  →  Configure table permissions, web API site settings and generate API client code
7. /create-webroles   →  Define access roles
8. /setup-auth        →  Add login/logout + role-based UI
9. /add-seo           →  Search engine optimization
10. /deploy-site      →  Push final changes live

Steps can be run independently — you don't need to follow this exact order. Each skill checks its own prerequisites and will tell you if something is missing.

Running Without Interruption

The plugin invokes multiple tools during a session. To reduce approval prompts:

Option 1 — Permission mode (recommended)

// .claude/settings.json
{
  "defaultMode": "acceptEdits",
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(git *)",
      "Bash(pac *)",
      "Bash(az *)",
      "Bash(node *)"
    ]
  }
}

Option 2 — Auto-accept all

claude --dangerously-skip-permissions

Documentation

Testing validator scripts

Run the validator unit tests with Node's built-in test runner:

$files = Get-ChildItem .\plugins\power-pages\scripts\tests\*.test.js | ForEach-Object { $_.FullName }
node --test $files

To validate table-permission relationship names against live Dataverse metadata during local testing, run:

node .\plugins\power-pages\scripts\validate-permissions-schema.js --projectRoot C:\path\to\site --validate-dataverse-relationships --envUrl https://your-org.crm.dynamics.com

This Dataverse relationship check is intended for local validation only and should not be used in CI.

License

MIT