• Use best judgement for design details: Once the user picks an aesthetic direction and mood, make confident decisions about specific fonts, colors, page layouts, and component behavior. Do not ask the user to specify every detail — use the design reference and your own taste to make creative, distinctive choices.
• Use TaskCreate/TaskUpdate: Track all progress throughout all phases — create the todo list upfront with all phases before starting any work.
• Scaffold early, design with intention: Get the dev server running immediately after discovery so the user has something to look at. Then plan the design and features while the scaffold is live — apply the chosen aesthetic during implementation.
• Live preview feedback loop: The dev server MUST be running before any customization begins. Browse the site via Playwright (

  browser_navigate

  +

  browser_snapshot

  ) to verify every significant change. Do NOT take screenshots — only use accessibility snapshots to check page structure and content.
• Use real images: Source high-quality photos from Unsplash wherever pages need visual content — hero sections, feature cards, about pages, backgrounds, etc. Use

  https://images.unsplash.com/photo-{id}?w={width}&h={height}&fit=crop

  URLs with specific photo IDs found via

  WebSearch

  . Never leave image placeholders or broken

  <img>

  tags pointing to nonexistent files.
• Git checkpoints: Commit after every individual page and component — each gets its own commit so breaking changes can be reverted.

1. Create todo list with all 8 phases (see Progress Tracking table)
2. If site purpose is clear from arguments:
   • Summarize understanding
   • Identify site type (portal, dashboard, landing page, blog, etc.)
3. If site purpose is unclear, use

   AskUserQuestion

   :

   Question	Header	Options
   What should the site be called? (e.g., "Contoso Portal", "HR Dashboard")	Site Name	(free text — use a single generic option so the user types a custom name via "Other")
   Which frontend framework?	Framework	React (Recommended), Vue, Angular, Astro
   What is the site's purpose?	Purpose	Company Portal, Blog/Content, Dashboard, Landing Page
   Who is the target audience?	Audience	Internal (employees, partners), External (public-facing customers)
   Where should the project be created?	Location	Current directory, New folder in current directory (Recommended), Any other directory

4. Resolve the project location:
   • If "Current directory": Project root =

     <cwd>

     .
   • If "New folder in current directory": Create a folder named

     __SITE_NAME__

     inside the cwd. Project root =

     <cwd>/__SITE_NAME__/

     .
   • If "Any other directory": Ask for the full path. Verify/create it. Project root = provided path.
   After resolving, confirm: "The site will be created at

   <resolved path>

   ."
   Store this as

   PROJECT_ROOT

   .
5. From the user's answers, derive:

   • __SITE_NAME__

     (Title Case, e.g.,

     Contoso Portal

     )

   • __SITE_SLUG__

     (kebab-case derived from site name, e.g.,

     contoso-portal

     )

   • __SITE_DESCRIPTION__

     (one-line description based on name + purpose)
6. Summarize understanding and confirm with user before proceeding

• Internal: Prioritize data tables, dashboards, authentication, navigation depth, functional over flashy design
• External: Prioritize landing page appeal, SEO-friendly structure, contact forms, clean marketing-oriented layout

The scaffold is a temporary branded loading screen — it shows a Power Pages animated "Building your site" experience with orbiting elements, status messages, and feature cards. Its only purpose is to get the dev server running quickly so the user has something to look at while you plan and build. During Phase 5 (Implementation), the entire scaffold — including theme.css, Layout, Home page, and all placeholder components — is completely replaced with the user's actual site: their chosen typography, color palette, pages, components, and navigation. Do NOT try to build on top of the loading screen; replace it entirely.

See

${CLAUDE_PLUGIN_ROOT}/references/framework-conventions.md

for the full framework → build tool → router → output path mapping.

${CLAUDE_PLUGIN_ROOT}

is already resolved to the plugin's absolute path at runtime. Use it directly in Glob/Read paths — do NOT search for the plugin directory.

${CLAUDE_PLUGIN_ROOT}/skills/create-site/assets/react/

${CLAUDE_PLUGIN_ROOT}/skills/create-site/assets/vue/

${CLAUDE_PLUGIN_ROOT}/skills/create-site/assets/angular/

${CLAUDE_PLUGIN_ROOT}/skills/create-site/assets/astro/

Glob

Read

Write

__PLACEHOLDER__

Edit

replace_all: true

• Name/slug/description placeholders: Use the actual values from Phase 1 (

  __SITE_NAME__

  ,

  __SITE_SLUG__

  ,

  __SITE_DESCRIPTION__

  ).

Note: The scaffold loading screen uses hardcoded Power Pages branding colors — there are no color placeholders (

__PRIMARY_COLOR__

, etc.) to replace. The user's chosen color palette is applied fresh during Phase 5 when the scaffold is completely replaced.

1. Use

   mcp__plugin_power-pages_playwright__browser_navigate

   to open the dev server URL
2. Use

   mcp__plugin_power-pages_playwright__browser_snapshot

   to verify the page loaded correctly (do NOT take screenshots — only use accessibility snapshots)
3. Share the dev server URL with the user so they can preview the site in their own browser (e.g., "Your site is running at

   http://localhost:5173

   — open it in your browser to follow along as I build.")

GATE: Do NOT proceed to Phase 3 until ALL of the following are true:

1. Template files copied and placeholders replaced
2. Git repo initialized with initial scaffold commit

3. npm install

   completed successfully
4. Dev server is running in the background (

   npm run dev

   )
5. Playwright has opened the site and verified it loads via

   browser_snapshot

6. The dev server URL has been shared with the user

If any of these are not done, complete them now before moving on.

1. Use

   AskUserQuestion

   to collect feature and design requirements:

   Question	Header	Options
   Which features? (multi-select)	Features	(generate 3-4 context-aware options based on the site name, purpose, and audience from Phase 1)
   What aesthetic direction do you want?	Aesthetic	Minimal & Clean (Recommended), Bold & Vibrant, Dark & Moody, Warm & Organic
   What's the overall mood?	Mood	Professional & Trustworthy (Recommended), Creative & Playful, Technical & Precise, Elegant & Premium

   Feature options are NOT hardcoded. Infer relevant features from Phase 1 answers. For example:

   • "HR Dashboard" + Internal → Employee Directory, Leave Requests, Announcements, Org Chart
   • "Contoso Portal" + External → Contact Form, Service Catalog, Knowledge Base, FAQ
   • "Partner Hub" + Internal → Document Library, Partner Directory, Deal Tracker, Notifications

   Always generate options that make sense for the specific site — never reuse a fixed list.

2. Read the design aesthetics reference:

   ${CLAUDE_PLUGIN_ROOT}/skills/create-site/references/design-aesthetics.md

3. Map aesthetic + mood to design choices using the Aesthetic x Mood Mapping table from the design reference. Record the chosen font direction, color direction, and motion direction.
4. Analyze requirements and determine needed components. Present component plan to user as a table:

   | Component Type      | Count | Details |
   |---------------------|-------|---------|
   | Pages               | 4     | Home, About, Services, Contact |
   | Shared Components   | 3     | Navbar, Footer, ContactForm |
   | Design Elements     | 4     | Google Fonts (Playfair Display + Source Sans Pro), Color palette (6 CSS vars), Page transitions, Gradient backgrounds |
   | Routes              | 4     | /, /about, /services, /contact |

5. Use best judgement to determine the final color palette based on the chosen aesthetic + mood. These will be written fresh into a new

   theme.css

   during Implementation (Phase 5) when the scaffold loading screen is completely replaced:

   CSS Variable	Description	Value
   --color-primary	Primary hex color	(choose based on aesthetic + mood)
   --color-secondary	Complementary hex color	(choose based on aesthetic + mood)
   --color-bg	Background color	(choose based on aesthetic + mood)
   --color-surface	Surface/card color	(choose based on aesthetic + mood)
   --color-text	Main text color	(choose based on aesthetic + mood)
   --color-text-muted	Muted text color	(choose based on aesthetic + mood)

1. Read the design aesthetics reference:

   ${CLAUDE_PLUGIN_ROOT}/skills/create-site/references/design-aesthetics.md

2. Present the implementation plan directly to the user as a formatted message. The plan MUST have ALL of the following sections:
   Section A — Design & Pages
   • Pages to create (with content outline for each)
   • Components needed for each page
   • Routing and navigation structure
   • Design decisions (from the chosen design direction):
     • Typography: specific Google Fonts chosen
     • Color palette: full CSS variable set with hex values (replacing the scaffold defaults)
     • Motion/animation plan: page load, hover states, transitions
     • Background treatment: gradients, patterns, effects
   Section B — Review & Deployment
   • What to verify before handoff
   • Deployment options

   CRITICAL: The plan is written for the user — do NOT reference internal phase numbers, tool names, or implementation details. Describe what will be built and what it will look like. The scaffold is already running — this plan covers what will be built on top of it.

3. Use

   AskUserQuestion

   to get approval:

   Question	Header	Options
   Does this plan look good?	Plan	Approve and start building (Recommended), I'd like to make changes

   • If "Approve": Proceed to Phase 5.
   • If "I'd like to make changes": Ask what they want changed, update the plan, and re-present for approval.

Prerequisite: The dev server MUST already be running and verified via Playwright (completed in Phase 2). If it is not, go back and complete Phase 2.

Design reference: Read

${CLAUDE_PLUGIN_ROOT}/skills/create-site/references/design-aesthetics.md

and apply its principles throughout this phase. All pages and components should be built with the chosen typography, color palette, motion, and backgrounds from the start — do NOT build with neutral styling first and redesign later.

TaskCreate

• One todo per page — e.g., "Create Contact page (

  /contact

  )", "Create Dashboard page (

  /dashboard

  )"
• One todo per shared component — e.g., "Create ContactForm component", "Create DataTable component"
• One todo for routing — "Update router with all new routes"
• One todo for navigation — "Update Layout/Header with navigation links"
• One todo for design foundations — "Apply design tokens (fonts, colors, motion, backgrounds)"

subject

activeForm

description

in_progress

completed

1. Design foundations — Completely rewrite

   theme.css

   (or

   styles.css

   for Angular) from scratch with the chosen color palette as CSS custom properties, Google Fonts, motion/animation utilities, and background treatments. The scaffold's loading screen CSS is discarded entirely. Commit after this step.
2. Layout — Rewrite the Layout component (and Header/Footer for Astro) with proper navigation, header, and footer that reflect the chosen design. The scaffold's passthrough Layout is replaced with a real layout structure.
3. Shared components — Build reusable components (Navbar, Footer, ContactForm, etc.) that pages will use
4. Pages — Create route components for each requested page, replacing the scaffold Home page and About placeholder entirely
5. Router — Register all new routes (the scaffold only has

   /

   and

   /about

   — add all requested routes)
6. Navigation — Add links to the new Layout/Header component
7. Entry HTML — Update

   index.html

   (or

   Layout.astro

   for Astro) to load the chosen Google Fonts instead of the scaffold's DM Sans + Outfit

placeholder.com

placehold.co

<img>

1. Use

   WebSearch

   to search Unsplash for relevant photos (e.g.,

   site:unsplash.com modern office workspace

   )
2. Pick specific photos and use their direct URL with sizing parameters:

   https://images.unsplash.com/photo-{id}?w={width}&h={height}&fit=crop

3. Choose images that match the site's aesthetic and mood

• Hero sections — Striking, high-resolution photos that set the tone for the site
• Feature/service cards — Relevant photos that illustrate each feature or service
• About/team sections — Professional or contextual photos matching the site's purpose
• Backgrounds — Atmospheric photos used as full-bleed or overlay backgrounds
• Content sections — Supporting photos that break up text and add visual interest

• Pick images that feel cohesive together — consistent style, lighting, and color tone
• Use appropriate sizing (

  w=800

  for cards,

  w=1600

  for heroes/backgrounds) to avoid slow loads
• Add descriptive

  alt

  text to every

  <img>

  for accessibility
• For icons and logos, use inline SVGs instead of photos

git add -A
git commit -m "<short description of what was added/changed>"

• After applying design foundations (fonts, colors, motion)
• After creating each page (e.g., "Add Home page", "Add Contact page")
• After creating each shared component (e.g., "Add Navbar component", "Add Footer component")
• After updating routing and navigation
• Before attempting anything risky or experimental

git revert HEAD

1. Use

   mcp__plugin_power-pages_playwright__browser_navigate

   to reload or navigate to the updated page
2. Use

   mcp__plugin_power-pages_playwright__browser_snapshot

   to verify the page structure and content are correct — do NOT take screenshots
3. If something looks wrong in the snapshot, fix it before proceeding

GATE: Do NOT proceed to Phase 6 until ALL customization is complete with design applied. The site must have distinctive typography (Google Fonts — no generic Inter/Roboto/Arial), a cohesive color palette (CSS variables), motion/animations, and all requested pages/features before moving to accessibility verification.

Prerequisite: All pages and components must be fully implemented (Phase 5 complete). The dev server MUST be running.

1. If new violations appear (e.g., a fix introduced a regression), repeat 6.3–6.4
2. Continue until the script exits with code 0 (zero

   critical

   and

   serious

   violations)

| Page | Route | Violations Found | Violations Fixed | Status |
|------|-------|-----------------|-----------------|--------|
| Home | / | 3 | 3 | Pass |
| About | /about | 1 | 1 | Pass |
| Contact | /contact | 2 | 2 | Pass |
| **Total** | | **6** | **6** | **All passing** |

GATE: Do NOT proceed to Phase 7 until all pages pass axe-core with zero

critical

and

serious

violations. Minor and moderate violations should also be fixed where possible, but are not blocking.

1. Browse through each page via Playwright (

   browser_navigate

   +

   browser_snapshot

   ) to verify all pages load correctly — do NOT take screenshots
2. Present a summary of what was built:

   | Component Type      | Count | Details |
   |---------------------|-------|---------|
   | Pages               | 4     | Home (/), About (/about), Services (/services), Contact (/contact) |
   | Shared Components   | 3     | Navbar, Footer, ContactForm |
   | Design Elements     | 4     | Playfair Display + Source Sans Pro, 6 CSS variables, fade-in transitions, gradient backgrounds |
   | Git Commits         | 7     | scaffold + 6 feature commits |

3. Share the dev server URL with the user and list all available routes
4. Ask the user to review using

   AskUserQuestion

   :

   "The site is ready for review at

   <dev server URL>

   . Please check it out in your browser. Would you like any changes?"

5. If the user requests changes, apply them and re-verify by browsing via

   browser_snapshot

This phase is MANDATORY. Do NOT end the session without asking about deployment.

1. Record skill usage:

   Reference:

   ${CLAUDE_PLUGIN_ROOT}/references/skill-tracking-reference.md

   Follow the skill tracking instructions in the reference to record this skill's usage. Use

   --skillName "CreateSite"

   . Note:

   .powerpages-site

   may not exist for first-time sites — the script exits silently.
2. Use

   AskUserQuestion

   with options: Deploy now (Recommended), Skip for now:

   "Would you like to deploy your site to Power Pages now?"

3. If the user chooses to deploy, invoke the

   /deploy-site

   skill.
4. Mark all todos complete
5. Present a final summary:
   • Site name and purpose
   • Framework and project location
   • Components created (X pages, Y components, Z design elements)
   • Key files and their purposes
   • Total file count and git commit count
6. Suggest optional enhancement skills:

   • /setup-datamodel

     — Create Dataverse tables for dynamic content

   • /add-seo

     — Add meta tags, robots.txt, sitemap.xml, favicon

   • /add-tests

     — Add unit tests (Vitest) and E2E tests (Playwright)

• Use TaskCreate/TaskUpdate to track progress at every phase
• Ask for user confirmation at key decision points (see list below)
• Use best judgement for design details — make confident, creative choices based on the user's aesthetic + mood selection without asking for every specific font, color, or layout decision
• Apply design from the start — never build neutral then restyle
• Verify via Playwright after every significant change
• Commit after every page and component — each gets its own dedicated commit, never batch multiple together
• No screenshots — only use

  browser_snapshot

  (accessibility snapshots) to verify pages; never use

  browser_take_screenshot

  as it clutters the user's directory. Give the user the dev server URL for visual preview.

1. After Phase 1: Confirm site purpose, framework, and project location
2. After Phase 4: Approve implementation plan
3. After Phase 7: Accept site or request changes
4. At Phase 8: Deploy or skip

• Distinctive typography via Google Fonts (no generic Inter/Roboto/Arial)
• Cohesive color palette via CSS variables
• Motion/animations (page transitions, hover states)
• All requested pages and features implemented (not placeholders)
• All routes working and navigation complete
• Accessibility verified via axe-core — zero critical/serious violations on all pages
• Git commits at key milestones
• Verified via Playwright
• User reviewed and approved
• Deployment offered

• Name: Partner Portal
• Framework: React
• Purpose: Company Portal
• Audience: Internal (partners, consultants)
• Location: New folder

  partner-portal

  in current directory

• React template copied, default placeholders replaced
• Git initialized, npm installed, dev server running at

  http://localhost:5173

• Playwright verified scaffold loads
• URL shared with user — they can preview immediately

• Features: Consultant Directory, Project Tracker, Document Library, Announcements
• Aesthetic: Minimal & Clean
• Mood: Professional & Trustworthy
• Component table presented and approved
• Design choices made: DM Sans + Space Grotesk,

  #1e3a5f

  primary, blue-gray palette

• Plan presented inline with design & pages + review & deployment sections
• User approved via AskUserQuestion

• Todos created for each page, component, routing, navigation, design foundations
• Built in order: design tokens (replace defaults with chosen palette) → shared components → pages → router → nav
• Git commits after each major piece
• Playwright verified each page

• axe-core injected and run on all 4 pages via

  browser_evaluate

• Found 5 violations: 2 missing alt text, 1 insufficient contrast, 1 missing lang attribute, 1 skipped heading level
• All violations fixed in source code and committed
• Re-run confirmed zero critical/serious violations across all pages

• Summary table presented
• User reviewed at

  http://localhost:5173

  , requested minor color adjustment
• Adjustment applied, re-verified

• User chose to deploy → invoked

  /deploy-site

• Final summary presented with next step suggestions