# Record A Demo

Screenshots, recording, and presentation artifacts.

- Repository: https://github.com/different-ai/openwork (24362 stars)
- Category: Documents
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add different-ai/openwork --skill record-a-demo -g -a claude-code -y`
Codex: `npx skills add different-ai/openwork --skill record-a-demo -g -a codex -y`
Cursor: `npx skills add different-ai/openwork --skill record-a-demo -g -a cursor -y`
Gemini CLI: `npx skills add different-ai/openwork --skill record-a-demo -g -a gemini-cli -y`

## Description

Screenshots, recording, and presentation artifacts.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Daytona Recording Artifacts

Use this skill to collect supplementary presentation artifacts for a Daytona UI
journey. Pass/fail evidence comes from an `@openwork/testkit` spec and its
ambient test evidence; use `run-tests` before declaring a verdict. Custom
screenshots or recordings never replace the test run. CI publishes the
spec's evidence on the PR; these artifacts are presentation only.

## Default supplementary format: screenshot index

For presentation, use a browseable HTML page with named PNG screenshots for
each step. This is easy to review and works on any device, but is not the
verdict artifact.

Use video (MP4) only when the proof requires motion: streaming text, loading
spinners, animations, drag-and-drop, or real-time interactions that a static
frame cannot capture. When video is used, embed it inside the frame-by-frame
HTML page alongside the static frames.

First run the relevant `evals/core` journey or `evals/proofs` proof through `run-tests`. The spec
imports `test` from `@openwork/testkit`; screenshots and validation claims are
recorded ambiently in its test evidence. Create the custom index here only if
it adds something the spec's report does not show.

### How to produce the screenshot index

1. Serve a directory from the sandbox on port 8090:

```bash
daytona exec "$SANDBOX" -- 'bash -lc "mkdir -p /workspace/proof-frames; nohup python3 -m http.server 8090 --directory /workspace/proof-frames >/dev/null 2>&1 &"'
```

2. At each important state, capture a `browser_screenshot` locally and upload
   it to the sandbox with a numbered name like `01-auth-landing.png`,
   `02-org-filled.png`, etc.

3. Generate a browseable `index.html` with all frames as labeled images in a
   responsive grid. Include the branch, commit, and sandbox name.

4. Get the public URL:

```bash
FRAMES_URL=$(daytona preview-url "$SANDBOX" -p 8090 2>/dev/null | grep -v "^time=")
echo "${FRAMES_URL}/index.html"
```

The rest: https://github.com/different-ai/openwork/blob/HEAD/.opencode/skills/record-a-demo/SKILL.md