> ## Documentation Index
> Fetch the complete documentation index at: https://claudescope.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Review Extracted Frames from Your Claude Scope Recording
> Inspect the SSIM-extracted frames from your recording, explore per-frame ARIA trees and diff summaries, then proceed to prompt generation.
After Claude Scope processes your recording, it lands you on the **Frame Review** page. This is where you examine the key frames extracted from your video, review the ARIA structure captured for each, and decide which frames to carry into the final prompt before clicking **Generate Prompt**.
## How frames are extracted
Claude Scope does not extract every video frame. Instead, it uses **SSIM-based frame differencing** — a perceptual similarity algorithm — to identify moments where the UI changed meaningfully. Only frames that cross a visual-difference threshold are kept. This means each frame in the timeline represents a distinct UI state rather than a duplicate of the previous one.
## The Frame Review layout
The page is split into two panels:
* **Left panel** — a filmstrip timeline of all extracted frames, plus an expanded view of the selected frame and the structural inspection summary.
* **Right panel** — the ARIA component tree for the currently selected frame.
### Filmstrip timeline
The filmstrip at the top of the left panel shows thumbnail cards for every extracted frame. Click a thumbnail to select it and load its details. The selected card scales up slightly and shows an accent border.
Each thumbnail can display a **diff badge** in the bottom-right corner — a green `+N` badge if elements were added relative to the previous frame, or a red `-N` badge if elements were removed.
To remove a frame from the session before generating the prompt, hover over its thumbnail and click the **×** button that appears, or click **Remove this frame** below the expanded preview.
### Frame card fields
| Field | Description |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Thumbnail** | A screenshot of the UI state at the moment this frame was extracted. |
| **Timestamp** | Milliseconds from the start of the recording when this frame was captured. |
| **URL captured** | The page URL that was active in the browser at this frame's timestamp. |
| **ARIA element counts** | Number of buttons, inputs, links, headings, and total interactive elements found in the ARIA snapshot for this frame. |
| **Diff summary** | Elements added, changed, and removed compared to the immediately preceding frame. Shown as a badge on the thumbnail and in detail in the right panel. |
### Structural inspection panel
Below the expanded frame preview, the **Structural Inspection** section shows the results of the Playwright ARIA pass — a live crawl of the app URL you provided when setting up the recording. This is separate from the per-frame data extracted from the video.
The panel shows:
* How many URLs were inspected
* The total duration of the inspection in milliseconds
* For each URL: button, input, link, heading, and total element counts
* An expandable **ARIA Snapshot** showing the raw YAML accessibility tree Playwright captured
## Reviewing the ARIA tree per frame
The **right panel** shows the ARIA component tree for whichever frame is selected in the filmstrip. Each node in the tree has:
* **Role** — the ARIA role of the element (e.g., `button`, `textbox`, `heading`).
* **Name** — the accessible label of the element.
* **Diff status** — whether the element was `added`, `changed`, or `removed` relative to the previous frame. Elements with a diff status are highlighted visually.
Use the ARIA tree to verify that the frames you are keeping actually captured the UI states you care about. If a frame's tree is empty, it means no accessibility data was available for that moment.
## Reviewing frames step by step
Claude Scope navigates here automatically after processing completes. If you refresh the page, it re-fetches the session data from the API using the session ID in the URL.
Look through the thumbnail cards in the filmstrip. Diff badges highlight frames where the UI changed — frames with no badge are similar to the one before them.
Click any thumbnail to expand it in the left panel and load its ARIA tree in the right panel. The timestamp and URL for that frame are shown below the preview image.
In the right panel, check that the component tree reflects the UI state you expected. Look for diff-status highlights to understand what changed at this moment in the recording.
If a frame is a duplicate, captured a loading state you do not need, or is otherwise irrelevant, remove it. The frame count in the footer updates in real time.
Expand the **Structural Inspection** section to see the Playwright ARIA snapshot. This is the live-page accessibility data that supplements the visual frames in the generated prompt.
When you are satisfied with the frame selection, click **Generate Prompt →** in the sticky footer. Claude Scope takes you to the **Output** page where your structured prompt is ready to copy.
The frame count shown in the footer reflects only the frames you have not removed. Claude Scope uses this exact set when synthesizing the prompt — removing a frame before proceeding means it will not be included in the visual timeline context.