skills.rest
letta-ai
letta-aiOFFICIAL
Explore all skills by this author →
Website𝕏@letta_aiGitHub

capturing-tui-visual-proof

Captures before-and-after screenshots and GIFs of the Letta Code Ink TUI for pull requests.

3.2k|385|Updated Oct 25, 2025
Search Tags:#CLI#GIF#tui#VHS#visual proof#Screen Recording#Pull request
One-click install
npx skills add https://github.com/letta-ai/letta-code --skill capturing-tui-visual-proof
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capturing-tui-visual-proof
Source: https://github.com/letta-ai/letta-code/tree/main/.skills/capturing-tui-visual-proof
Command: npx skills add https://github.com/letta-ai/letta-code --skill capturing-tui-visual-proof

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pull requests that change interactive CLI rendering or behavior are hard to review without visual evidence, and mocked components or headless output do not prove the real terminal experience. This Skill produces reviewable before-and-after screenshots or GIFs recorded from the actual Letta Code Ink TUI.

Core Features & Use Cases

  • Deterministic Before/After Capture: Clones the PR's exact base SHA into a separate checkout and keeps terminal dimensions, theme, agent, model, and prompts identical across runs.
  • VHS-Based Recording: Uses VHS tapes to record the real TUI at controlled width, framerate, and typing speed, producing MP4s for iteration and GIFs for the PR.
  • Frame-by-Frame Verification: Extracts frames with ffmpeg to confirm the before run reproduces the bug and the after run demonstrates the fix.
  • PR Publishing Workflow: Commits final assets to .github/pr-assets/ and embeds full-SHA-pinned same-origin URLs in the PR body.
  • Use Case: A PR fixes a rendering glitch in the Letta Code CLI. Use this Skill to record the buggy behavior on the base commit and the fixed behavior on the PR branch, then embed both GIFs in the PR description for reviewers.

Quick Start

Record before-and-after GIFs of the real Letta Code TUI for PR 1234 and embed them in the PR body.

Frequently Asked Questions about capturing-tui-visual-proof

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I record a GIF of a terminal CLI for a pull request?▼

Use VHS to script and record the real terminal session, setting width, framerate, and typing speed in a tape file. Run the same interaction on the base commit and the PR branch, then embed both GIFs in the PR body with commit-pinned URLs.

How do I capture before-and-after screenshots for a TUI change?▼

Clone the repository at the PR's base SHA into a separate checkout, keep all variables identical, and run the real TUI in both checkouts. Add a Screenshot directive to the VHS tape after the final state appears to produce PNG stills.

Can I use a mocked component instead of the real TUI for visual proof?▼

No. Mocked Ink components, text fixtures, generated images, or headless output do not prove the real terminal workflow. The proof must be recorded from the production TUI launched through the actual CLI entry point.

Why should I check out the PR base SHA instead of main?▼

The main branch may have advanced past the PR's base, so recording against it can show behavior unrelated to the change. Using the baseRefOid from the PR ensures the before recording reproduces the exact original bug.

How do I verify a recorded GIF actually shows the fix?▼

Extract frames across the full duration with ffmpeg at one frame per second and inspect them individually. Confirm the before recording reproduces the bug, the after recording shows the fix, and both use equivalent inputs and layout.

What image URL format works for embedding assets in GitHub PR bodies?▼

Use github.com/OWNER/REPO/raw/FULL_SHA/path URLs rather than raw.githubusercontent.com, and pin a full commit SHA instead of a branch or short SHA. Commit the assets into the branch first, then verify the URLs return the files.

Related Skills

Explore More Software Engineering Skills→
gittowergittower
413

code-review

Review Git changes and pull requests against project-specific coding guidelines.

Official
Advanced
cookeyholdercookeyholder

squash-pr

Squash and merge a GitHub pull request into main after validating review feedback.

Community
Advanced
cockroachdbcockroachdb
32.4k

ui-visual-regression

Compare screenshots and network requests between UI branches using roachprod, playwright-cli, and ImageMagick.

Official
Advanced
ElbertePlinioElbertePlinio

tuistory

Automate terminal TUI applications via a virtual pseudo-terminal backend.

Community
Intermediate