본문으로 건너뛰기
cccskills
무료GitHub에 공개

record-a-demo

Capture UI journeys in Daytona as labeled screenshots and optional video clips. Organize them into a browsable HTML page for PR presentations, helping reviewers follow user actions and compare behavior before and after a change.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Screenshots, recording, and presentation artifacts.

설치 방법 보기

이럴 때 유용합니다

  • Sharing UI steps through a labeled screenshot page
  • Recording streaming text, loading states, or animations
  • Presenting before-and-after UI behavior in a PR
  • Checking saved images and videos before sharing links

포함된 파일(1)

  • SKILL.md8.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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:
daytona exec "$SANDBOX" -- 'bash -lc "mkdir -p /workspace/proof-frames; nohup python3 -m http.server 8090 --directory /workspace/proof-frames >/dev/null 2>&1 &"'
  1. 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.

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

  3. Get the public URL:

FRAMES_URL=$(daytona preview-url "$SANDBOX" -p 8090 2>/dev/null | grep -v "^time=")
echo "${FRAMES_URL}/index.html"
  1. Post the index URL in the PR body. Individual frame PNGs are also directly linkable: ${FRAMES_URL}/01-auth-landing.png.

Fallback when /daytona-artifacts is unavailable

The preferred path is test-on-daytona.sh --artifacts-volume, which mounts and serves /daytona-artifacts. If that path is unavailable or not writable, do not stop at local screenshots. Use /workspace/proof-frames as a fallback:

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

Upload the generated index.html and PNG frames there, then verify every file is non-zero before sharing:

daytona exec "$SANDBOX" -- 'bash -lc "ls -lh /workspace/proof-frames && curl -s -I http://127.0.0.1:8090/index.html | sed -n \"1,8p\""'
daytona preview-url "$SANDBOX" -p 8090

If you use this fallback, say so in the PR/eval report because the files are not on the persistent artifacts volume.

When to include video clips

Embed short MP4 clips in the same proof directory when the step involves:

  • Streaming text appearing in real-time (chat responses).
  • Loading/progress indicators that resolve.
  • Animations or transitions between states.
  • Drag-and-drop or multi-step interactions.

Reference them from the HTML index alongside the static frames.

Recording Standard (video, when needed)

A useful Daytona recording should look like a person using the product, even though CDP is driving the browser or Electron window.

  • Record the entire relevant journey, not only the final state.
  • Start before the first visible click and stop after the final visible success state.
  • Drive Chrome/Electron through visible controls with browser_snapshot, browser_click, and browser_fill wherever possible.
  • Keep API calls, localStorage writes, direct navigation, and filesystem checks out of the recorded path unless they are unavoidable setup.
  • If invisible setup is unavoidable, label it in the PR/eval and resume the recording at the next visible user step.
  • Prefer slower, understandable click-by-click recordings over faster scripts that jump between states.
  • The recording should be understandable without terminal output; logs and API checks are supporting evidence only.

The Volume

The reusable Daytona volume is:

openwork-eval-artifacts:/daytona-artifacts

The helper serves it on port 8090 when --artifacts-volume or --record-video is used.

Expected layout:

/daytona-artifacts/recordings
/daytona-artifacts/screenshots
/daytona-artifacts/validation

Start With Artifacts

For screenshots and validation notes without video:

bash .devcontainer/test-on-daytona.sh [branch-or-commit] --artifacts-volume

For full human-review evidence:

bash .devcontainer/test-on-daytona.sh [branch-or-commit] --record-video --recording-name <name>

--record-video implies --artifacts-volume.

Capture Screenshot Checkpoints

Capture a persistent screenshot from the Daytona display:

daytona exec "$SANDBOX" -- 'bash .devcontainer/capture-daytona-screenshot.sh'

Use this after important states: welcome screen, workspace created, settings connected, task response visible, error state reproduced, or final success.

Before sharing any screenshot URL, inspect the saved PNG itself. Confirm the visible image shows the claimed state and is not covered by a native picker, modal, toast, desktop window, or unrelated overlay. If the screenshot does not match, recapture and inspect a replacement.

Stop Recording

Always stop with the helper so ffmpeg finalizes the MP4 cleanly:

daytona exec "$SANDBOX" -- 'bash .devcontainer/stop-daytona-recording.sh'

Do not use kill -9; it can corrupt the file.

After stopping, verify the recording exists and has duration:

daytona exec "$SANDBOX" -- 'ls -lh /daytona-artifacts/recordings'
daytona exec "$SANDBOX" -- 'ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 /daytona-artifacts/recordings/<name>.mp4'

If the duration is near zero, missing, or the file is absent, the recording is not usable evidence.

Get Artifact URLs

Get the artifacts base URL:

ARTIFACTS_URL=$(daytona preview-url "$SANDBOX" -p 8090 2>/dev/null | grep -v "^time=")

Then append paths:

echo "${ARTIFACTS_URL}/recordings/<name>.mp4"
echo "${ARTIFACTS_URL}/screenshots/<name>.png"

Artifact proxy URLs are not permanent. If the sandbox stops, the old daytonaproxy URL will fail even when files still exist in /daytona-artifacts. Restart the sandbox and artifact server, then generate a fresh URL:

daytona sandbox start "$SANDBOX"
daytona exec "$SANDBOX" -- 'bash -lc '\''cd /daytona-artifacts && nohup python3 -m http.server 8090 --bind 0.0.0.0 > /tmp/daytona-artifacts-http.log 2>&1 &'\'''
daytona exec "$SANDBOX" -- 'curl -s -I http://127.0.0.1:8090/recordings/<name>.mp4 | sed -n "1,8p"'
daytona preview-url "$SANDBOX" -p 8090

Only share the refreshed URL after the local curl -I returns 200 OK with a non-zero Content-Length.

Before And After Flow

Use before/after recordings for UI regressions or design changes:

bash .devcontainer/test-on-daytona.sh dev --record-video --recording-name my-feature-before
daytona exec "$SANDBOX" -- 'bash .devcontainer/stop-daytona-recording.sh'
daytona exec "$SANDBOX" -- "bash -lc 'cd /workspace && git fetch origin feat/my-branch:feat/my-branch && git checkout feat/my-branch'"
daytona exec "$SANDBOX" -- "bash -lc 'cd /workspace && DISPLAY=:99 .devcontainer/start-daytona-recording.sh --detach --output /daytona-artifacts/recordings/my-feature-after.mp4'"
daytona exec "$SANDBOX" -- 'bash .devcontainer/stop-daytona-recording.sh'

Validation Standard

Use these layers in order of priority:

  1. Test evidence: ambient validated screenshots and observable assertions are the verdict source.
  2. Custom screenshot index (optional): named PNGs for presentation after the evidence-backed test is complete.
  3. Video clips (optional): short MP4s for motion such as streaming, animations, or loading states.

Do not report success from a recording or custom screenshot alone. The testkit test evidence must contain the assertions and validated screenshots for the claimed behavior.

Do not use a video as the primary demo if most of the flow happened through hidden automation. In that case, mark the artifact as supplementary and rely on the evidence-backed test for the verdict.

If you discover invalid evidence after the fact, do not reuse the same URL as if it were valid. Produce new frames with new names and explain in the PR/comment that the earlier artifact was superseded.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Manage OpenWork feature releases with feature flags, switches that control access to new behavior. Register features before coding, release them by organization and deployment, prepare a global shutdown option, and remove temporary flags after rollout.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Registering a feature before implementation
  • Releasing a feature to selected organizations
  • Separating cloud and self-hosted availability
different-ai/openwork2.4만2026년 10월 20일 업데이트

Connect OpenCode browser tools to a locally running OpenWork Electron app to inspect its UI, enter a task, and check the response. This skill supports exploration and debugging through CDP, Chrome's remote control protocol.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Connecting browser tools to a local Electron development app
  • Inspecting screen state during debugging
  • Entering a task in the composer and running it
different-ai/openwork2.4만2026년 10월 20일 업데이트

Check added lines in a change for information identifying customers, prospects, partners, or outside individuals. Report locations and generic remediation without reproducing identities, and escalate cases where the information is already public.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking changes for customer and partner identities
  • Reviewing documents and test data for identifying details
  • Reporting disclosure locations without repeating identities
different-ai/openwork2.4만2026년 10월 20일 업데이트

Connects supported AI clients, including Claude Code and Codex, to OpenWork through MCP, a protocol for accessing external tools. It guides account sign-in and verifies that tools for finding and running organization capabilities are available.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Connecting an AI client to OpenWork organization resources
  • Signing in and verifying available MCP tools
  • Switching organizations or troubleshooting authentication
different-ai/openwork2.4만2026년 10월 20일 업데이트

Review an outside contributor’s pull request before running its code. Identify concealed behavior, obfuscated code, risky dependencies, and build hooks, with file locations and specific checks for maintainers to follow up.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Screening an outside contributor’s pull request before execution
  • Checking encoded code and unexplained network calls
  • Reviewing dependency changes and installation scripts
different-ai/openwork2.4만2026년 10월 20일 업데이트

Create an OpenCode plugin for OpenWork with custom tools and hooks, which run code at specific events. The skill builds the plugin file and adds its entry to the project configuration.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding custom tools to OpenWork
  • Creating a plugin to save and list notes
  • Running custom code before or after tool execution
different-ai/openwork2.4만2026년 10월 20일 업데이트

different-ai의 스킬 모두 보기

이 스킬의 문제 신고