site-replicate

STEP 0 — Initialize or Resume

A. Check for existing state

Read .planning/sessions/REPLICATION-STATE.md  (if it exists)

If state file exists and --resume was passed (or file is recent < 24h):

• Print current status table
• Ask user: "Continue from [last page]? Or restart a specific page?"
• Skip to STEP 1 with the remaining pages queue

If no state file, create it now:

# Replication State

session_start: [ISO timestamp]
target_url: https://www.prosperemos.com.mx
local_url: http://localhost:3000

## Pages

| Page        | Status  | Inspector | Builder | Verified | Notes |
|-------------|---------|-----------|---------|----------|-------|
| /           | pending | -         | -       | -        |       |
| /creditos/  | pending | -         | -       | -        |       |
| /quienes-somos/ | pending | -    | -       | -        |       |
| /bolsa-de-trabajo/ | pending | - | -       | -        |       |
| /contacto/  | pending | -         | -       | -        |       |
| /regulacion/ | pending | -        | -       | -        |       |
| /aviso-de-privacidad/ | pending | - | -    | -        |       |

## Global Elements

| Element | Status | Notes |
|---------|--------|-------|
| Header  | pending |      |
| Footer  | pending |      |

## Session Log

[timestamps and actions will be appended here]

B. Check dev server

curl -s -o /dev/null -w "%{http_code}" http://localhost:3000

If not 200, start it: npm run dev & and wait 5s before continuing.

STEP 1 — Context Window Check (run this before EVERY page)

Read the context monitor file to assess remaining context:

ls /tmp/claude-ctx-*.json 2>/dev/null | tail -1

If file exists, read it. If remaining_percentage <= 50, go to STEP 5 (Handoff) immediately.

If no file, use token heuristic: after processing 3+ pages, assume context is getting full and create handoff.

STEP 2 — Global Elements (first run only)

Before replicating individual pages, audit Header and Footer once.

A. Spawn Inspector sub-agent for global elements

Spawn an Explore sub-agent with this prompt:

Inspect the Grupo Prosperemos header and footer on the production site.

Use Playwright to:
1. Navigate to https://www.prosperemos.com.mx
2. Take a full-page screenshot
3. Extract the EXACT CSS values for:
   - Header: background color, height, font colors, font sizes, spacing
   - Top bar: background color (#verde-oscuro?), phone number text
   - Navigation: link colors, hover states, active states
   - CTA button: background, text, border-radius, padding
   - Footer: background color, text colors, column layout
   - Footer legal text: font size, color
4. Extract all text content (nav items, phone, email, addresses)
5. Check what logo image URLs are used (from WP uploads)

Return a structured CSS/design spec with exact hex values.

After sub-agent returns, store findings in .planning/sessions/global-elements-spec.md.

B. Spawn Builder sub-agent for global elements

Spawn a general-purpose sub-agent with the findings from Inspector:

Fix the Header and Footer components in this Next.js project to exactly match
the production site at https://www.prosperemos.com.mx.

Design spec: [paste content of .planning/sessions/global-elements-spec.md]

Files to update:
- components/layout/ (header, footer, nav)
- app/layout.tsx

Rules:
- Use Tailwind v4 (CSS @theme variables in globals.css)
- Use next/image for all images
- Preserve existing component structure, only fix visual discrepancies
- Match exact colors, spacing, fonts, and layout
- Use cn() utility for class composition

Do not change functionality, just visual fidelity.
After changes, run: npx tsc --noEmit to verify no TypeScript errors.

C. Verify with Playwright

After builder completes:

1. Navigate Playwright to http://localhost:3000
2. Take screenshot at 1440px width
3. Navigate to https://www.prosperemos.com.mx
4. Take screenshot at 1440px width
5. Compare visually — report any remaining differences
6. Update state file: Header: done, Footer: done

STEP 3 — Page Replication Loop

For each page in the pending queue (ordered by state file):

Context check first (STEP 1)

A. Spawn Inspector sub-agent

Spawn an Explore sub-agent:

You are a visual inspector. Analyze page [PAGE_URL] on the production Prosperemos site.

Use Playwright to:
1. Navigate to https://www.prosperemos.com.mx[PAGE_SLUG]
2. Resize to 1440px wide
3. Take a full-page screenshot
4. Take the browser snapshot (accessibility tree)
5. Evaluate: extract ALL CSS computed styles for major sections:
   - Section backgrounds (hex colors)
   - Section padding/margin values (px)
   - Font sizes and weights per section
   - Image sources and dimensions
   - Button colors, borders, border-radius
   - Any animations or transitions
6. Document ALL text content (headings, body text, CTAs)
7. Document the page structure (sections in order, from top to bottom)
8. Note any WordPress-specific content (dynamic job listings, ACF fields, etc.)
9. Resize to 390px and take mobile screenshot too

Return a complete PAGE SPEC with:
- Section-by-section breakdown
- Exact CSS values
- Text content
- Image URLs
- Mobile/desktop differences

Save spec to .planning/sessions/page-spec-[slug].md.

B. Spawn Builder sub-agent

Spawn a general-purpose sub-agent:

You are a Next.js component builder. Replicate page [PAGE_SLUG] in this project.

Page spec: [paste .planning/sessions/page-spec-[slug].md]

Current implementation: [paste the existing page.tsx and related components]

Your task:
1. Compare the spec against the current implementation
2. Identify ALL visual discrepancies
3. Fix them one by one, smallest change possible
4. Use Tailwind v4 utility classes (no tailwind.config.js)
5. Use cn() for conditional classes
6. Use next/image for all images with proper remotePatterns
7. Fetch dynamic content via lib/wordpress.ts (REST API, no auth needed for public)
8. After all fixes: npx tsc --noEmit (must pass with 0 errors)

Pages directory: app/[page-directory]/page.tsx
Components: components/

Only fix visual issues. Do not add features or refactor logic.

C. Visual Verification with Playwright

After builder completes:

1. Playwright → http://localhost:3000[PAGE_SLUG] at 1440px
2. Take full-page screenshot → save as .planning/sessions/screenshots/local-[slug]-desktop.png
3. Playwright → https://www.prosperemos.com.mx[PAGE_SLUG] at 1440px  
4. Take screenshot → save as .planning/sessions/screenshots/prod-[slug]-desktop.png
5. Playwright → http://localhost:3000[PAGE_SLUG] at 390px (mobile)
6. Take screenshot → save as .planning/sessions/screenshots/local-[slug]-mobile.png
7. Playwright → https://www.prosperemos.com.mx[PAGE_SLUG] at 390px
8. Take screenshot → save as .planning/sessions/screenshots/prod-[slug]-mobile.png

Compare screenshots visually. Report:

• ✅ MATCH — sections that look identical
• ⚠️ CLOSE — minor differences (spacing, font size)
• ❌ MISMATCH — obvious visual differences

For each ❌ MISMATCH: spawn a targeted Builder sub-agent to fix ONLY that section.

D. Update state file

[PAGE_SLUG]: done | inspector: done | builder: done | verified: ✅/⚠️/❌

STEP 4 — Final Verification

After all pages are done:

1. Navigate Playwright through all pages on local site
2. Record any console errors
3. Verify all images load (no broken images)
4. Verify all links work (no 404s)
5. Run TypeScript check: npx tsc --noEmit
6. Report final status

STEP 5 — Context Handoff Protocol

Trigger this when remaining_percentage <= 50 OR after 3 pages completed.

A. Create handoff file

Write .planning/sessions/SESSION-HANDOFF-[ISO-date].md:

# Session Handoff — [ISO timestamp]

## Summary
Session that worked on [pages completed]. 
Stopped due to context window limit.

## Completed
[List pages with ✅ status and brief notes]

## In Progress
[Current page if mid-work, what stage (inspector/builder/verify)]

## Pending
[List remaining pages in order]

## Current Issues
[Any known discrepancies or blockers]

## Files Modified This Session
[git diff --name-only output]

## Git State
[git log --oneline -5 output]

## How to Resume
1. Open a NEW Claude Code session in this directory
2. Run: /site-replicate --resume
3. The orchestrator will read this file and continue from [next page]

## Key Findings
[Important discoveries about the production site, CSS values, WP API quirks, etc.]

## Dev Server Status
[Running/Stopped — port 3000]

B. Commit current work

git add -A
git commit -m "feat(replicate): [page] visual parity - session handoff"

C. Notify user

Print:

⚠️  CONTEXT WINDOW AT [X]% — Creating session handoff.

Completed this session:
  ✅ [page list]

Remaining:
  ⏳ [page list]

Handoff saved: .planning/sessions/SESSION-HANDOFF-[date].md
Changes committed to git.

To continue:
  → Open a new Claude Code session
  → Run: /site-replicate --resume

Then STOP. Do not continue working.

STEP 6 — Status Command (--status)

If invoked with --status:

1. Read .planning/sessions/REPLICATION-STATE.md
2. Print the pages table
3. Show last 5 session log entries
4. Show git status summary
5. Exit without making changes