genpage skill improvements (#37)

* Improve power-apps plugin: Playwright verification, UX, and PAC CLI updates

- Add Playwright MCP server for post-deployment browser verification
- Add Step 9 (Verify in Browser) with direct genux page URL navigation
- Add common Playwright error handling guidance
- Require PAC CLI >= 2.3.1 with pac help for version check
- Add --model parameter to all upload commands
- Improve gather requirements flow (new/edit, page type picker, data source, requirements)
- Add planning step to workflow before code generation
- Add forward-slash warning for Windows bash path escaping
- Add recommended permissions section to AGENTS.md
- Whitelist Playwright MCP tools and npx in settings.json

Author: Akshay Maloo

.claude/settings.json

@@ -2,12 +2,19 @@
   "permissions": {
     "allow": [
       "Bash(pac *)",
+      "Bash(pac model *)",
+      "Bash(pac auth *)",
       "Bash(node *)",
       "Bash(dotnet *)",
+      "Bash(cd:*)",
       "Bash(powershell *)",
+      "Bash(npx *)",
+      "Bash(dir:*)",
       "Read",
       "Write",
-      "Edit"
+      "Edit",
+      "mcp__playwright__*",
+      "mcp__*__browser_*"
     ]
   }
 }

.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cd:*)",
+      "Bash(echo:*)"
+    ]
+  }
+}

README.md

@@ -55,7 +55,7 @@ Create and deploy Power Pages sites using modern development approaches.
 
 **Currently supported**: Code Sites (SPAs) with React, Angular, Vue, or Astro
 
-### Power Apps (`plugins/power-apps`) — *Coming Soon*
+### Power Apps (`plugins/model-apps`) — *Coming Soon*
 
 > **Note**: This plugin is under active development and not yet available in the marketplace.
 
@@ -72,7 +72,7 @@ To develop and test plugins locally, follow these steps:
 
     ```bash
     claude --plugin-dir /path/to/power-platform-skills/plugins/power-pages
-    claude --plugin-dir /path/to/power-platform-skills/plugins/power-apps
+    claude --plugin-dir /path/to/power-platform-skills/plugins/model-apps
     ```
 
 ## Running Without Interruption
@@ -151,7 +151,7 @@ power-platform-skills/
 │   │   ├── commands/
 │   │   ├── shared/
 │   │   └── skills/
-│   └── power-apps/           # Power Apps plugin
+│   └── model-apps/           # Model Apps plugin
 │       ├── .claude-plugin/
 │       │   └── plugin.json
 │       ├── commands/

…ns/power-apps/.claude-plugin/plugin.json …ns/model-apps/.claude-plugin/plugin.jsonplugins/power-apps/.claude-plugin/plugin.json renamed to plugins/model-apps/.claude-plugin/plugin.json plugins/power-apps/.claude-plugin/plugin.json renamed to plugins/model-apps/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
-  "name": "power-apps",
+  "name": "model-apps",
   "version": "1.0.0",
   "description": "Build and deploy Power Apps generative pages for model-driven apps.",
   "author": {
@@ -10,7 +10,7 @@
   "repository": "https://github.com/microsoft/power-platform-skills/",
   "license": "MIT",
   "keywords": [
-    "power-apps",
+    "model-apps",
     "generative-pages",
     "genux",
     "genpage",

plugins/model-apps/.mcp.json

@@ -0,0 +1,8 @@
+{
+    "playwright": {
+        "command": "node",
+        "args": [
+            "${CLAUDE_PLUGIN_ROOT}/scripts/launch-playwright-mcp.js"
+        ]
+    }
+}

plugins/power-apps/AGENTS.md plugins/model-apps/AGENTS.mdplugins/power-apps/AGENTS.md renamed to plugins/model-apps/AGENTS.md

@@ -1,6 +1,6 @@
-# AGENTS.md — Power Apps Plugin
+# AGENTS.md — Model Apps Plugin
 
-This file provides guidance to AI Agents when working with the **power-apps** plugin.
+This file provides guidance to AI Agents when working with the **model-apps** plugin.
 
 ## What This Plugin Is
 
@@ -13,20 +13,22 @@ Single-session workflow — each `/genpage` invocation completes the full cycle:
 Test this plugin locally:
 
 ```bash
-claude --plugin-dir /path/to/plugins/power-apps
+claude --plugin-dir /path/to/plugins/model-apps
 ```
 
 ## Architecture
 
 ```
 .claude-plugin/plugin.json     ← Plugin metadata (name, version, keywords)
+.mcp.json                      ← MCP server config (Playwright for browser verification)
 AGENTS.md                      ← Plugin guidance for AI agents (this file)
 CLAUDE.md                      ← Symlink → AGENTS.md
 references/                    ← Shared reference docs
-  genux-rules-reference.md     ← Full code-gen rules, DataAPI types, layout patterns, common errors
-  pac-cli-reference.md         ← PAC CLI commands and parameters
+  genpage-rules-reference.md   ← Full code-gen rules, DataAPI types, layout patterns, common errors
   troubleshooting.md           ← Common issues and fixes
 samples/                       ← Example .tsx files (8 samples)
+scripts/
+  launch-playwright-mcp.js     ← Playwright MCP server launcher (detects system browser)
 skills/
   genpage/
     SKILL.md                   ← Skill definition with frontmatter (model, allowed-tools)
@@ -79,3 +81,4 @@ After modifying this plugin:
 2. Test skill invocation with `/genpage`
 3. Verify tool restrictions work (should only allow pac, powershell, node commands)
 4. Test with both Dataverse entity pages and mock data pages
+5. Verify Playwright browser verification works (navigate, snapshot, click, screenshot)

plugins/power-apps/CLAUDE.md plugins/model-apps/CLAUDE.mdplugins/power-apps/CLAUDE.md renamed to plugins/model-apps/CLAUDE.md

@@ -1,6 +1,6 @@
-# Genux Code Generation Rules Reference
+# Generative Pages Code Generation Rules Reference
 
-Comprehensive rules for generating genux page code. Read this file during code generation (Step 6).
+Comprehensive rules for generating generative page code. Read this file during code generation (Step 6).
 
 ---
 

…apps/references/genux-rules-reference.md …ps/references/genpage-rules-reference.mdplugins/power-apps/references/genux-rules-reference.md renamed to plugins/model-apps/references/genpage-rules-reference.md plugins/power-apps/references/genux-rules-reference.md renamed to plugins/model-apps/references/genpage-rules-reference.md

@@ -4,11 +4,12 @@ Common issues when building and deploying generative pages.
 
 ---
 
-## PAC CLI Not Found
+## PAC CLI Not Found or Outdated
 
 - Install: `dotnet tool install --global Microsoft.PowerApps.CLI.Tool`
+- Update: `dotnet tool update --global Microsoft.PowerApps.CLI.Tool`
 - Or download from the [Microsoft Power Platform CLI](https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction) page
-- Verify: `pac --version`
+- Verify: `pac help` (version must be >= 2.3.1)
 
 ---
 
@@ -57,3 +58,13 @@ Common issues when building and deploying generative pages.
 - Keep `RuntimeTypes.ts` in the same directory as the `.tsx` file
 - Regenerate schema if Dataverse metadata has changed
 - If column names don't match, re-run `generate-types` — never guess column names
+
+---
+
+## Playwright Browser Verification Issues
+
+- "Target page, context or browser has been closed" → retry the navigation; Playwright sessions can expire
+- "Ref not found" → take a fresh `browser_snapshot` before clicking any element; stale refs are invalid
+- Sign-in page appears → Playwright uses the system browser session; user must sign in manually first
+- Page renders blank → wait longer with `browser_wait_for`; genux pages can take several seconds to render
+- Browser not found → `launch-playwright-mcp.js` detects Edge/Chrome automatically; ensure one is installed