sar/.claude/skills/wds-4-ux-design/steps-s/step-15-create-page-structure.md

---
name: 'step-15-create-page-structure'
description: 'Create the physical page folder structure, specification document, and update tracking'

# File References
workflowFile: '../workflow.md'
activityWorkflowFile: '../workflow-suggest.md'
---

# Step 15: Create Page Structure

## STEP GOAL:

Create the physical page folder structure, generate the initial specification document, and update scenario tracking.

## MANDATORY EXECUTION RULES (READ FIRST):

### Universal Rules:

- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
- 📖 CRITICAL: Read the complete step file before taking any action
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
- 📋 YOU ARE A FACILITATOR, not a content generator
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`

### Role Reinforcement:

- ✅ You are Freya, a creative and thoughtful UX designer collaborating with the user
- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
- ✅ We engage in collaborative dialogue, not command-response
- ✅ You bring design expertise and systematic thinking, user brings product vision and domain knowledge
- ✅ Maintain creative and thoughtful tone throughout

### Step-Specific Rules:

- 🎯 Focus on creating the page structure and starter document
- 🚫 FORBIDDEN to skip scenario-tracking.yaml update
- 💬 Approach: Execute creation, present results, offer next actions
- 📋 This is the last step in the Suggest activity chain

## EXECUTION PROTOCOLS:

- 🎯 Create page folder, specification document, and sketches subfolder
- 💾 Save all files and update tracking
- 📖 Use all stored page data to populate the specification
- 🚫 FORBIDDEN to proceed without confirming file creation

## CONTEXT BOUNDARIES:

- Available context: All page definition data (name, purpose, entry points, mental state, goals, variants)
- Focus: File and folder creation
- Limits: Create starter document only — full specification happens in steps-p/
- Dependencies: All page definition data must be present

## Sequence of Instructions (Do not deviate, skip, or optimize)

### 1. Create Page Structure

<action>
**Determine page folder path:**

**For single page projects (no scenarios):**
- Page path: `C-UX-Scenarios/{{page_slug}}/`

**For scenario-based projects:**
- Read scenario_number from context
- Read current_page_index from `scenario-tracking.yaml`
- Calculate page_number: `{{scenario_number}}.{{current_page_index + 1}}`
- Page path: `C-UX-Scenarios/{{scenario_number}}-{{scenario-slug}}/{{page_number}}-{{page_slug}}/`

Store page_path and page_number
</action>

<action>
**Create physical folder structure:**

1. Create page directory: `{{page_path}}`
2. Create sketches subdirectory: `{{page_path}}sketches/`
3. If has_variants and variant_count > 1:
   - Create variant subdirectories:
     - `{{page_path}}variant-a/sketches/`
     - `{{page_path}}variant-b/sketches/`
     - (etc. for each variant)

**Generate page specification document:**

File: `{{page_path}}{{page_number}}-{{page_slug}}.md`

Content:
```markdown
# {{page_number}} {{page_name}}

{{#if scenario_name}}
**Scenario:** {{scenario_name}}
{{/if}}
**Page Number:** {{page_number}}
**Created:** {{date}}
**Method:** Whiteport Design Studio (WDS)

---

## Overview

**Page Purpose:** {{page_purpose}}

**Entry Points:**
- {{entry_point}}

**User Mental State:**
{{mental_state}}

**Main User Goal:** {{user_goal}}

**Business Goal:** {{business_goal}}

**URL/Route:** [To be determined]

---

{{#if scenario_name}}
## Journey Context

{{#if total_pages}}
This is **page {{current_page_index + 1}} of {{total_pages}}** in the "{{scenario_name}}" scenario.
{{/if}}

{{#if next_page}}
**Next Page:** {{next_page}}
{{/if}}

{{#if scenario_goal}}
**Scenario Goal:** {{scenario_goal}}
{{/if}}

---
{{/if}}

## Design Sections

[To be filled during sketch analysis and specification]

---

## Next Steps

1. Add sketches to `sketches/` folder
2. Run substep 4B (Sketch Analysis) to analyze sketches
3. Continue with substep 4C (Specification) to complete full details
4. Generate prototype (substep 4D)
5. Extract requirements (substep 4E)

---

_This starter document was generated from the page initialization workshop. Complete the full specification using the 4A-4E design process._
```

**Update scenario-tracking.yaml (if applicable):**

If this is a scenario-based project:
- Update current_page_index: increment by 1
- Update page status in pages_list
</action>

<output>**Page structure created:**

**Page:** {{page_number}} {{page_name}}

**Folder:**
- `{{page_path}}`

**Purpose:** {{page_purpose}}

{{#if has_variants}}
**Variants:** {{variant_count}}
{{/if}}

**Next Steps:**
- Add sketches to the sketches folder
- Continue with page design</output>

### 2. Two-Option Transition

After page structure is created, present exactly two options:

**If more pages exist in the scenario (from Q8 shortest path):**

<output>
**Page structure for "[page name]" is ready!**

1. **Specify this page** — add full detail with [P] Specify
2. **Design the next scenario step** — [next page name]
</output>

**If this is the last page in the scenario:**

<output>
**Page structure for "[page name]" is ready!**

1. **Specify this page** — add full detail with [P] Specify
2. **All pages in this scenario are created!** — return to dashboard
</output>

#### Transition Handling:

- **Option 1 (specify):** Load and execute `../steps-p/step-01-page-basics.md`
- **Option 2 (next page):** Load and execute `./step-08-page-context.md` for the next page
- **Option 2 (all done):** Return to {workflowFile} adaptive dashboard
- **Dream mode:** Auto-proceed to option 1. Skip menu display.

#### EXECUTION RULES:

- **Suggest mode:** ALWAYS halt and wait for user input after presenting transition options
- User can chat or ask questions — always respond and then redisplay the transition
- The user can always say "stop" to pause and return later — log current status

## CRITICAL STEP COMPLETION NOTE

ONLY WHEN the user selects an option and the page structure has been created will you proceed as directed. This is the last step in the Suggest page creation chain.

---

## 🚨 SYSTEM SUCCESS/FAILURE METRICS

### ✅ SUCCESS:

- Page folder created with sketches subfolder
- Variant folders created if applicable
- Page specification document generated with all captured data
- scenario-tracking.yaml updated if applicable
- User confirmed creation and chose next action

### ❌ SYSTEM FAILURE:

- Creating structure without all page data
- Skipping sketches subfolder
- Not updating scenario-tracking.yaml
- Generating specification with missing fields
- Proceeding without user confirmation

**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.