# Validate Scene UI

> Validate Rehoboam scene animation and UI quality with deterministic Playwright screenshots driven by `apps/ui/scripts/screenshot-scene.ts`. Use when changes touch animation timing, Canvas2D rendering, layout/CSS, overlays, timeline sequencing, or any visual behavior that should be confirmed by screenshots. Use when this capability is needed.

- Skill: `tomevault-io/validate-scene-ui-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/validate-scene-ui-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/validate-scene-ui-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/validate-scene-ui-2

---


# Validate Scene UI

## Overview

Run screenshot-based visual validation after scene/UI changes and use the captures as objective evidence in the final report.

## Validation Workflow

1. Run screenshot capture.

```bash
pnpm --filter rehoboam-ui screenshot:scene
```

2. Use options when needed:

- `pnpm --filter rehoboam-ui screenshot:scene --count 3 --interval-ms 1200` to sample animation progression.
- `pnpm --filter rehoboam-ui screenshot:scene --output .tmp/screenshots/<label>.png` to keep outputs tied to the task.
- `pnpm --filter rehoboam-ui screenshot:scene:headed` for local visual debugging.

3. Review both generated images:

- Full page: `<output>.png`
- Instrument crop: `<output>.instrument.png`

4. Check visual quality:

- Preserve layout alignment and spacing.
- Avoid clipping, overlap, or unreadable text.
- Keep ring/sweep/divergence rendering stable and intentional.
- Confirm callouts/panel positioning remains usable.

5. Report concrete findings with screenshot file paths and whether the scene quality appears acceptable.

## Notes

- The underlying command executes `apps/ui/scripts/screenshot-scene.ts`, which runs Playwright against `http://127.0.0.1:3000` by default, starts the API worker on `http://127.0.0.1:3001/api/events`, and captures deterministic outputs under `apps/ui/.tmp/screenshots/`.
- Use this skill by default for UI/animation validation unless the user explicitly asks to skip screenshot checks.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/valuecodes) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->