To run this task you must have the following required information:

> What the landing page is for (product, service, event, portfolio, etc.).
Optional: target audience, preferred style, specific sections wanted.

If you don't have all of this information, exit here and respond asking for any extra information you require, and instructions to run this task again with ALL required information.

---

You MUST use a todo list to complete these steps in order. Never move on to one step if you haven't completed the previous step. If you have multiple read steps in a row, read them all at once (in parallel).

Add all steps to your todo list now and begin executing.

## Steps

1. [Read Landing Page Viability Guide]: Read the documentation in: `skills/sauna/[skill_id]/references/app.landing.viability.md`

2. Discuss the landing page request. Assess against the viability guide you just read.

Ask clarifying questions about: goal (signups, sales, awareness), audience,
main CTA, visual style, and sections needed.

Present a structured outline:

## [Page Name] - Proposed Design
**Goal:** [conversion goal]
**Sections:** Hero, [other sections], Footer
**Visual Style:** [description]
**Primary CTA:** [button text]

Ask: "Does this capture what you want?" DO NOT proceed until user confirms.


3. Create technical plan (share with user for transparency):

**Page Structure:**
- [list all sections with semantic HTML elements]

**Components Needed:**
- [list reusable components: cards, buttons, forms, etc.]

**Interactive Elements:**
- [list: accordions, carousels, modals, smooth scroll, etc.]

**Content Blocks:**
- [list specific content needed: headlines, feature descriptions, testimonials]

**Assets Needed:**
- [list any images, icons, or graphics needed]

Self-validate: Is this achievable as a single HTML file?
If scope creep detected, simplify and re-confirm with user.


4. If images/graphics are needed (identified in Phase 2):

For each required image, use `skills/sauna/[skill_id]/references/skill/media.github.host` to generate
and host it. Collect all public URLs.

Document: "Assets ready: [list URLs]"

If no custom images needed (using CSS graphics, emoji, or external
images the user provides), proceed to Phase 4.


5. [Read HTML App Scaffold]: Read the documentation in: `skills/sauna/[skill_id]/references/web.html.scaffold.md`

6. [Read Landing Page Patterns]: Read the documentation in: `skills/sauna/[skill_id]/references/app.landing.patterns.md`

7. Create session/{page-name}/ directory ({page-name} = lowercase, hyphens).

Build HTML skeleton:
- DOCTYPE, head with meta tags (viewport, charset, title, description)
- Favicon (emoji or hosted image)
- Semantic HTML structure for ALL sections from Phase 2 plan
- CSS variables for colors, fonts, spacing (empty values for now)
- Empty style blocks for each section
- Basic responsive container structure

Section structure:
- header (sticky nav)
- main with section elements for each content block
- footer

Save to session/{page-name}/ directory.

Verify: Does HTML structure match Phase 2 plan? All sections present?


8. Implement ALL content and functionality from Phase 2 plan:

**Content:**
- All headlines, subheadlines, body text
- Feature descriptions
- Testimonials (with names, titles, photos if available)
- Pricing details (if applicable)
- FAQ questions and answers
- Footer links and copyright

**Functionality:**
- Smooth scroll navigation
- Mobile menu toggle (if needed)
- FAQ accordions (details/summary)
- Form handling (mailto: or external service)
- Any carousels or sliders (CSS-only)

**Basic Styling:**
- CSS variables populated with colors
- Typography hierarchy applied
- Grid/flex layouts for sections
- Spacing and padding

Checkpoint: All content from Phase 2 is now visible and functional.
NO TODOs, NO "Lorem ipsum", NO placeholder content.


9. Add polish layer:

**Hover States:**
- All buttons and links have :hover
- Cards lift on hover (transform + shadow)
- Navigation items highlight

**Focus States:**
- Visible focus rings for accessibility
- Tab order is logical

**Transitions:**
- Smooth transitions on all interactive elements (150-300ms)
- No jarring instant changes

**Responsive:**
- Mobile-first @media queries
- Touch-friendly tap targets (44px minimum)
- Text readable at all sizes
- Images scale appropriately
- Navigation collapses on mobile

**Visual Polish:**
- Consistent spacing rhythm
- Visual hierarchy guides the eye
- Subtle backgrounds (gradients, patterns)
- Shadows for depth
- Entrance animations (fade-in on scroll)


10. [Read Web Composition Standards]: Read the documentation in: `skills/sauna/[skill_id]/references/web.composition.standards.md`

11. Self-verification checklist (check the actual code):

**Required CSS Markers:**
[ ] :hover appears for all interactive elements
[ ] :focus appears for form elements
[ ] transition appears for state changes
[ ] @media appears for responsive design

**Structure:**
[ ] Semantic HTML (header, main, section, footer)
[ ] Meta description present
[ ] Viewport meta tag present
[ ] Favicon present

**Content Quality:**
[ ] No TODO comments
[ ] No Lorem ipsum or placeholder text
[ ] No console.log statements
[ ] No commented-out code

**Functionality:**
[ ] All links work (internal anchors)
[ ] Forms have action (mailto: or external)
[ ] Mobile menu works (if present)
[ ] Smooth scroll works

**From Phase 2 Plan:**
[ ] All listed sections implemented
[ ] All listed features working
[ ] Primary CTA is prominent

If ANY checkbox fails, go back and fix before proceeding.


12. [Read External Actions Guide]: Read the documentation in: `skills/sauna/[skill_id]/references/sauna.actions.external.md`

13. Write preview to session/{page-name}-preview.md with _action frontmatter:

---
_action:
  label: "Deploy Landing Page"
  prompt: "Deploy session/{page-name}/ using `skills/sauna/[skill_id]/references/recipes/web.github.deploy.md` with project name {page-name} and commit message 'Deploy {page-name} landing page'"
  isComplete: false
---

## {Page Name} - Ready to Deploy

**Goal:** [from Phase 1]
**Primary CTA:** [button text]

**Sections Included:**
- [x] Hero with headline and CTA
- [x] [Section 2]
- [x] [Section 3]
- [x] [Additional sections...]
- [x] Footer with navigation

**Quality Checks:**
- [x] Responsive on mobile
- [x] All hover/focus states
- [x] Smooth transitions
- [x] No placeholder content
- [x] Forms functional

Click **Deploy Landing Page** when ready. Site will be live in 1-2 minutes.


14. [Gather Requirements for Deploy to GitHub Pages] The next step has the following requirements: "Project name for the deployment (becomes the URL slug).
Path to directory containing files to deploy.
Commit message describing the deployment.
". Search the user's data for this information or ask them directly if needed. Do not proceed until you have this information.

15. [Execute Deploy to GitHub Pages Task]: Spawn a subagent and provide it with the requirements gathered above and instructions to read `skills/sauna/[skill_id]/references/recipes/web.github.deploy.md` for its task list

16. Share with user:
- Live URL (remind: may take 1-2 minutes to propagate)
- Repository URL
- Summary of what was built

Clean up session/{page-name}/ directory and preview file.

Offer: "Want any changes? I can modify and republish."