sar/.claude/skills/wds-4-ux-design/data/page-creation-flows/page-init-lightweight.md

Page Init (Lightweight)

Purpose: Quick page setup - establish context, create structure, ready for iteration

---

CONTEXT

This workflow activates when: User wants quick page setup without full specification yet.

Creates: Minimal structure (name, purpose, navigation, folders) ready for iteration.

Critical: Navigation links must be established for page comprehension.

---

STEP 1: PAGE BASICS

What's the name of this page?

Examples:

• "Start Page"
• "Sign In"
• "Dashboard"
• "User Profile"

Page name:

Store page_name Generate page_slug from page_name (lowercase, hyphenated)

---

STEP 2: PURPOSE & SITUATION

What's the PURPOSE of this page?

What should this page accomplish?

Purpose:

Store page_purpose

What's the USER'S SITUATION when they arrive?

What just happened? What are they trying to do?

User situation:

Store user_situation

---

STEP 3: SCENARIO CONTEXT

**Determine scenario context:** - Read project structure from wds-workflow-status.yaml - Check existing scenarios - Determine page placement **Which scenario does this page belong to?**

Existing scenarios: {{#each scenario in existing_scenarios}}

• {{scenario.number}}: {{scenario.name}} {{/each}}

Choose scenario [number] or "new" for a new scenario:

Store scenario_number

This page will be in your main user flow. Set scenario_number = 1

---

STEP 4: NAVIGATION FLOW (CRITICAL!)

Now let's establish navigation - this is crucial for comprehension!

**Determine page number:** - Count existing pages in scenario - Calculate next page number - Store page_number (e.g., "1.1", "1.2", "2.1")

What page comes BEFORE this one?

Type page number, or "none" if this is the first page:

Previous page:

Store previous_page

What page comes AFTER this one?

• If you know: Type the page name (we'll create it next)
• If unsure: Type "TBD"
• If last page: Type "none"

Next page:

Store next_page

---

STEP 5: CREATE STRUCTURE

Creating page structure...

**Create folder structure:**

Path: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/

Create:

1. Page folder: {{page_number}}-{{page_slug}}/
2. Sketches folder: {{page_number}}-{{page_slug}}/sketches/
3. Placeholder document using template

See: lightweight-page-template.md

---

STEP 6: UPDATE NAVIGATION

**Update previous page document:** - Open previous page .md file - Update "Next" link to point to this page - Save

---

STEP 7: COMPLETION

✅ Page initialized!

Created:

• Folder: {{page_number}}-{{page_slug}}/
• Document: {{page_number}}-{{page_slug}}.md
• Sketches folder: sketches/

Page details:

• Number: {{page_number}}
• Name: {{page_name}}
• Purpose: {{page_purpose}}

Navigation:

• Previous: {{previous_page}} {{#if linked}}✅ linked{{/if}}
• Next: {{next_page}}

---

Next steps:

1. Add your sketch to sketches/ folder
2. Run Page Process Workshop to analyze it

Or:

[A] Add sketch now and analyze [B] Create another page first [C] Back to scenario overview

Choice:

---

ROUTING

Based on user choice: - [A] → workshop-page-process.md (with this page context) - [B] → Repeat page-init for next page - [C] → Return to scenario overview / main menu

---

Created: December 28, 2025 Purpose: Quick page initialization with navigation Status: Ready for WDS Presentation page