Figma From Code Precapture

{
  "url": "{devServerUrl}{capture.url}",
  "output": ".temp/figma-from-code/screenshots/{name}/text.json",
  "selector": "{capture.selector}",
  "fallbackSelectors": ["{capture.fallbackSelectors...}"],
  "click": ["{capture.interaction.clicks...}"],
  "nth": 0
}

[
  {
    "url": "{devServerUrl}{route}",
    "output": ".temp/figma-from-code/screenshots/screens/{ScreenName}/app.png",
    "screenName": "{ScreenName}",
    "route": "{route}",
    "pageSourceFile": "{pageSourceFile}",
    "keyComponents": ["{ComponentName}", "..."]
  }
]

{
  "url": "{devServerUrl}{route}",
  "output": ".temp/figma-from-code/screenshots/screens/{ScreenName}/text.json",
  "selector": "body"
}

Capture app screenshots and text content for UI components and app screens from a running dev server.

Skill file: plugins/figma-from-code/skills/figma-from-code/5-precapture/SKILL.md
Read it for manifest format, selector strategy, and output format.

Step 0 — Build manifests from component-map.json:
  Read .temp/figma-from-code/component-map.json
  For each component with a non-null capture object (or, legacy fallback, a
  non-null top-level selector field), create entries in:
    .temp/figma-from-code/manifests/all-screenshots.json
    .temp/figma-from-code/manifests/all-text.json  (components only at this point)
  Entry fields come from capture: url = {devServerUrl}{capture.url} (exact route,
  never routes[0]), selector = capture.selector, fallbackSelectors, and when
  capture.interaction is set: click = interaction.clicks (array), hover = interaction.hover.
  Skip a component only when BOTH capture and selector are null — list it in skipped.
  For each distinct route in component-map.json, collect the top-level components
  that appear on that route (keyComponents list), then build:
    .temp/figma-from-code/manifests/precapture-screens.json
  Each screens manifest entry: { url, output, screenName, route, pageSourceFile, keyComponents }
  Also append one text entry per route into all-text.json:
    { url, output: ".temp/figma-from-code/screenshots/screens/{ScreenName}/text.json", selector: "body" }
  Sort all manifests by url (entries without click first within each url) before writing.

Scripts (already exist, do not modify):
  Screenshot: node {skillRoot}/scripts/screenshot.js
  Text:       node {skillRoot}/scripts/extract-text.js

Both scripts support batch mode for faster execution (one browser, many captures):

1. Capture all component screenshots (chunk if > 15 entries — run each chunk sequentially):
   node {skillRoot}/scripts/screenshot.js \
     --batch .temp/figma-from-code/manifests/all-screenshots.json

2. Extract all text content in one batch (includes both component and screen text entries):
   node {skillRoot}/scripts/extract-text.js \
     --batch .temp/figma-from-code/manifests/all-text.json

3. Capture all screen (full-page) screenshots — screens are few so one chunk suffices:
   node {skillRoot}/scripts/screenshot.js \
     --batch .temp/figma-from-code/manifests/precapture-screens.json

4. Write component results to .temp/figma-from-code/precapture-all.json:
   {"group": "all", "captured": [{"name": "...", "app": "...", "text": "..."}], "skipped": [...], "failed": [{"name": "...", "error": "...", "url": "...", "selectorTried": "...", "fallbacksTried": N}]}
   For failed entries, copy the manifest url/selector and the fallback count from the
   screenshot.js error output so selector drift is diagnosable from the results file alone.

5. Write screen results to .temp/figma-from-code/precapture-screens.json:
   {
     "screens": [
       {
         "screenName": "CasesPage",
         "route": "/cases",
         "pageSourceFile": "src/pages/CasesPage.tsx",
         "keyComponents": ["CaseList", "CaseFilters"],
         "appScreenshot": ".temp/figma-from-code/screenshots/screens/CasesPage/app.png",
         "textFile": ".temp/figma-from-code/screenshots/screens/CasesPage/text.json",
         "status": "captured"
       }
     ]
   }
   status is "captured", "failed", or "skipped" per screen.

{
  "group": "all",
  "captured": [
    { "name": "Button", "app": ".temp/.../Button/app.png", "text": ".temp/.../Button/text.json" }
  ],
  "skipped": ["Skeleton"],
  "failed": [{ "name": "Calendar", "error": "selector not found or timeout (tried 3: ...)", "url": "http://localhost:5173/cases/", "selectorTried": "[aria-label=\"Calendar\"]", "fallbacksTried": 2 }]
}

{
  "screens": [
    {
      "screenName": "CasesPage",
      "route": "/cases",
      "pageSourceFile": "src/pages/CasesPage.tsx",
      "keyComponents": ["CaseList", "CaseFilters"],
      "appScreenshot": ".temp/figma-from-code/screenshots/screens/CasesPage/app.png",
      "textFile": ".temp/figma-from-code/screenshots/screens/CasesPage/text.json",
      "status": "captured"
    }
  ]
}