wordle/.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