TETRA2000/.claude/skills/duplicate-page

Duplicate Page Skill (Experimental)

⚠️ Experimental: This skill is not yet fit for the project's standard workflow and cannot produce reliable results. Use with caution and expect manual adjustments.

Faithfully reproduce an external web page as a React + Tailwind page in this project. Unlike create-page (which uses screenshots as loose inspiration), this skill routes the source page through Figma's capture engine to extract structured layout, colors, and typography — then converts the Figma design back into project-native React + Tailwind code.

Pipeline: URL → Figma Design → Structured Code Extraction → Adapted React Components & Page

Parameters

• url (required): URL of the web page to duplicate
• route (required): Target route path (e.g., "landing", "pricing")
• scope (optional): repository or local (default: ask user)
• extractComponents (optional): Whether to extract reusable components from page sections (default: true)

Prerequisites

This skill requires the Figma MCP server (figma@claude-plugins-official). If unavailable, report: "Figma MCP server not connected. Enable figma@claude-plugins-official in .claude/settings.json or check your Figma authentication." Then fall back to the create-page skill with the URL as referenceUrl.

Workflow

1. Reconnaissance with Playwright

Before Figma captures the page, use playwright to understand the page structure and prepare it for clean capture. This step matters because pages often have cookie banners, popups, and lazy-loaded content that would pollute the capture.

1. Open the target URL:

   playwright-cli open {url}
   

2. Resize to standard desktop width for consistent Figma frames:

   playwright-cli resize 1440 900
   

3. Wait for the page to finish loading, then take a snapshot to understand structure:

   playwright-cli snapshot
   

4. Inspect the snapshot for cookie banners, popups, or overlays. If found, dismiss them by clicking the appropriate button (e.g., "Accept", "Close", "✕").
5. Scroll through the page to trigger lazy-loaded content:

   playwright-cli eval "window.scrollTo(0, document.body.scrollHeight)"
   playwright-cli eval "window.scrollTo(0, 0)"
   

6. Take a full-page screenshot as the reference baseline:

   playwright-cli screenshot --filename=reference-original.png
   

7. Scroll down and capture additional sections at key scroll positions to ensure you understand the full page layout.
8. Close the browser:

   playwright-cli close
   

Record the page sections you identified (e.g., header/nav, hero, features, pricing, footer) — you'll use this to guide the Figma structure inspection in Step 3.

2. Capture to Figma

Important limitation: generate_figma_design runs in an isolated browser context that does not share session profiles (cookies, authentication, local storage) with the user's regular browser. This means:

• Pages requiring login or specific session state will not capture correctly
• Even public pages may render differently without the user's browser profile (e.g., region-specific content, A/B test variants, dismissed cookie banners)
• The capture can fail outright if the page detects an unfamiliar browser environment

Because of this, ask the user to capture the page manually:

1. Tell the user: "Please open {url} in your browser, select the content you want to capture, and copy it to your clipboard. Then paste it into a new Figma file. Once done, share the Figma file URL (with the node selected) so I can extract the design."
2. Wait for the user to provide a Figma URL (format: figma.com/design/:fileKey/:fileName?node-id=:nodeId)
3. Parse the fileKey and nodeId from the URL (convert - to : in nodeId)

Optional — try automated capture first:

If the user prefers, you can attempt generate_figma_design as a first pass:

• Call generate_figma_design with:
  • url: The source page URL
  • outputMode: newFile (creates a new Figma file)
  • fileName: "Duplicate - {domain} - {date}" (e.g., "Duplicate - stripe.com - 2026-03-15")
• The tool returns a captureId — poll for completion every 5 seconds (up to 10 polls)
• On completion, extract the fileKey and root nodeId from the response

If the automated capture fails, falls back to manual clipboard capture as described above.

3. Inspect Figma Design Structure

Use get_metadata to understand the layer hierarchy of the captured Figma design. This reveals the logical sections Figma identified from the DOM.

• Call get_metadata with fileKey and root nodeId
• Parse the XML response to identify top-level frames/sections
• Build a section map: name, nodeId, type, and approximate size
• Cross-reference with the sections you identified during playwright reconnaissance

4. Extract Code Section-by-Section

For each top-level section identified in Step 3, call get_design_context to extract React + Tailwind code. Extracting per-section (rather than the whole page at once) produces cleaner, more manageable code.

• For each section, call get_design_context with:
  • fileKey and section nodeId
• Each call returns:
  • React + Tailwind code snippet
  • A screenshot of that section
  • Design hints (Code Connect mappings, component docs, design tokens, annotations)
• Collect all section code blocks and note any image asset references
• If a section is too large and returns metadata-only, break it into smaller sub-sections using get_metadata and extract those individually

5. Gather Project Context

Load the project's design system to adapt the extracted code:

• Read shared/references/component-registry.md — discover existing components to reuse
• Read shared/references/tailwind-theme.md — project design tokens
• Read shared/references/figma-compat-rules.md — compatibility constraints
• Read shared/references/image-handling.md — image asset workflow

6. Adapt and Generate Components

This is where raw Figma-extracted code becomes project-native. The goal is faithful visual reproduction while using the project's design system.

If extractComponents is true:

Analyze each extracted section for reusability:

• Sections matching common patterns (Navbar, Hero, Card grid, CTA, Footer) become standalone components
• Highly page-specific sections stay inline in the page file

For each component to extract:

• Create src/components/{Name}/{Name}.tsx (or src/components/_local/{Name}/{Name}.tsx for local scope)
• Create matching {Name}.stories.tsx with representative stories
• Map Figma-extracted values to project theme tokens:
  • Convert arbitrary hex colors (e.g., bg-[#6366f1]) to theme tokens (e.g., bg-primary)
  • Convert arbitrary spacing to the nearest theme value
  • Use project typography scale
• If no close theme token match exists, keep the arbitrary value — fidelity to the original is the priority

If extractComponents is false:

Keep all sections inline within the page component.

7. Generate Page

Create the page file composing all sections:

• Repository scope: src/pages/{route}/index.tsx
• Local scope: src/pages/_local/{route}/index.tsx

The page should:

• Default export a React component
• Import extracted components from Step 6
• Compose sections in order: header/nav → main content sections → footer
• Use Tailwind CSS utility classes

Handle image assets:

• Download images from Figma MCP URLs (they expire after 14 days, so download immediately)
• Save to src/assets/images/{route}/ with content-hash filenames
• Update src/assets/images/asset-map.json with new mappings
• Reference local paths in <img> tags with explicit width/height

8. Update Indexes

Add documentation entries:

• Add page entry to docs/pages.md (or docs/_local/pages.md for local scope):

  ## {Title}
  - **Route**: `/{route}`
  - **Title**: {page title}
  - **Description**: Duplicated from {url}
  - **Path**: `src/pages/{route}/index.tsx`
  - **Dependencies**: {list of components used}
  - **Figma**: {Figma file URL}
  

• If new components were created, add entries to docs/components.md (or docs/_local/components.md)

• Update shared/references/component-registry.md with new components

9. Visual Verification

Perform a three-way comparison to verify fidelity:

1. Start the dev server if not already running
2. Open the generated page in playwright at http://localhost:5173/{route}
3. Take a screenshot of the rendered page
4. Fetch the Figma design screenshot via get_screenshot
5. Compare all three: original site (from Step 1), Figma design, and rendered page
6. Describe any visual discrepancies

If discrepancies are found:

• Identify the root cause (missing styles, wrong colors, layout issues)
• Apply corrective edits to the source files
• Re-verify (up to 3 iterations)

After verification passes:

• Establish Code Connect mapping via add_code_connect_map to link the Figma design to the React code

Output

Report:

1. Figma design created (URL + file key)
2. Sections identified and extracted (list with node IDs)
3. Components created (file paths)
4. Page created (file path, route)
5. Image assets downloaded (count, paths)
6. Figma compatibility notes (if any)
7. Index documents updated
8. Visual verification result (screenshot comparison)
9. Code Connect mappings established

Error Handling

• Figma MCP unavailable: Fall back to create-page skill with URL as referenceUrl
• URL unreachable: Report error, suggest checking the URL or network
• Capture timeout: Report after 10 polls, fall back to manual clipboard capture
• Automated capture fails (session/auth issues): Ask the user to copy the page to clipboard in their browser and paste into Figma, then provide the Figma URL
• Section too large for get_design_context: Break into smaller sub-sections via get_metadata
• Image download failure: Use placeholder, warn user, provide Figma URL for manual download
• Auth-gated pages: Document as limitation — capture only works on publicly accessible pages

Example

User: "Duplicate https://stripe.com/pricing — route it to /pricing"

1. Opens stripe.com/pricing in playwright, dismisses cookie banner, scrolls to load all content, captures reference screenshots
2. Asks user to copy the page to clipboard in their browser and paste into a Figma file → user provides Figma URL with node ID
3. Inspects Figma structure: identifies Hero, PricingTable, FeatureComparison, FAQ, Footer frames
4. Extracts React + Tailwind code per section via get_design_context
5. Loads project theme tokens and component registry
6. Creates components: PricingHero, PricingTable, FeatureGrid, PricingFAQ
7. Creates src/pages/_local/pricing/index.tsx composing all components
8. Updates docs/_local/pages.md and docs/_local/components.md
9. Three-way visual verification, establishes Code Connect mappings