Agent Skillsletta-ai/letta-code › capturing-tui-visual-proof

capturing-tui-visual-proof

GitHub

用于捕获 Letta Code TUI 的视觉对比证明,支持 PR 中 CLI 渲染或行为变更的截图与 GIF 录制。通过精确复现环境、控制交互确定性并使用 VHS 工具记录前后状态,确保可视化证据的可审查性。

.skills/capturing-tui-visual-proof/SKILL.md letta-ai/letta-code

Trigger Scenarios

PR 修改了交互式 CLI 渲染效果 需要终端截图或 GIF 作为 PR 正文附件

Install

npx skills add letta-ai/letta-code --skill capturing-tui-visual-proof -g -y
More Options

Non-standard path

npx skills add https://github.com/letta-ai/letta-code/tree/main/.skills/capturing-tui-visual-proof -g -y

Use without installing

npx skills use letta-ai/letta-code@capturing-tui-visual-proof

指定 Agent (Claude Code)

npx skills add letta-ai/letta-code --skill capturing-tui-visual-proof -a claude-code -g -y

安装 repo 全部 skill

npx skills add letta-ai/letta-code --all -g -y

预览 repo 内 skill

npx skills add letta-ai/letta-code --list

SKILL.md

Frontmatter
{
    "name": "capturing-tui-visual-proof",
    "description": "Captures reviewable before-and-after visual proof from the real Letta Code Ink TUI. Use when a Letta Code PR changes interactive CLI rendering or behavior and needs terminal screenshots or GIFs in its PR body."
}

Capturing TUI Visual Proof

Record the production TUI through bun run src/index.ts. Do not substitute a mocked Ink component, text fixture, generated image, or headless output for the real terminal workflow.

Choose the Proof

  • Static rendering change: capture before/after screenshots.
  • Interaction or state transition: capture before/after GIFs.
  • Timing or animation claim: record continuously; do not hide the interval that proves the claim.

Keep every variable except the code revision identical: terminal dimensions, theme, agent, model, prompt, fixtures, and CLI flags.

Prepare Exact Before and After Checkouts

Use the PR's base SHA rather than current main, which may have advanced:

repo=$(git rev-parse --show-toplevel)
pr=1234 # replace with the PR number
base=$(gh pr view "$pr" --json baseRefOid --jq .baseRefOid)
before=/tmp/letta-code-pr-$pr-before

rm -rf "$before"
git clone --shared --no-checkout "$repo" "$before"
git -C "$before" checkout --detach "$base"

For a dependency-neutral change, reuse the current checkout's dependencies:

ln -s "$repo/node_modules" "$before/node_modules"

If the PR changes dependencies, install them independently in each checkout instead. Never install through a symlinked node_modules.

Make the Interaction Deterministic

Use the same existing test agent and a new conversation for both runs. For skill-loading proof, create a small temporary project skill with a fixed reply:

proof_skills=/tmp/letta-code-pr-$pr-skills
mkdir -p "$proof_skills/pr-proof-demo"
cat > "$proof_skills/pr-proof-demo/SKILL.md" <<'SKILL'
---
name: pr-proof-demo
description: Loads deterministic instructions for TUI visual proof.
---

After loading this skill, reply exactly: `Skill loaded.`
SKILL

Dry-run the flow in each checkout before recording:

bun run src/index.ts \
  --agent "$AGENT_ID" \
  --new \
  --no-system-info-reminder \
  --reflection-trigger off \
  --skills "$proof_skills" \
  --skill-sources project

Do not add --model to a shared agent merely to accelerate proof; that can persistently change its model configuration.

Record with VHS

Install VHS if unavailable. Record at roughly 960px wide, 10-15 fps, and a legible font size. Produce MP4 while iterating and GIF for the PR.

Create one tape per checkout from this pattern:

# Replace CHECKOUT, AGENT_ID, and SKILLS_DIR before running.
Output "/tmp/pr-proof.gif"
Output "/tmp/pr-proof.mp4"
Set Shell "zsh"
Set Width 960
Set Height 720
Set FontSize 14
Set Framerate 12
Set TypingSpeed 20ms
Set Theme "Catppuccin Mocha"
Set CursorBlink false

Hide
Type "clear && cd <CHECKOUT> && bun run src/index.ts --agent <AGENT_ID> --new --no-system-info-reminder --reflection-trigger off --skills <SKILLS_DIR> --skill-sources project"
Enter
Sleep 20s
Show
Sleep 1s
Type "Use the pr-proof-demo skill, then follow its instructions."
Sleep 500ms
Enter
Sleep 1s
Hide
Sleep 45s
Show
Sleep 4s

Run it with:

vhs validate /tmp/pr-proof.tape
vhs /tmp/pr-proof.tape

For a still, run the same real interaction and add Screenshot /tmp/pr-proof.png after the final state appears.

Hide may remove startup or model latency from a rendering proof while the real process continues running. First dry-run the command and choose generous waits. Never use hidden time to skip the interaction or state transition being claimed.

Before publishing, check that the recording contains no secrets, tokens, private paths, or unrelated conversation history.

Inspect Every Recording

Open the GIF and inspect frames across its full duration, not just its first or last frame:

mkdir -p /tmp/proof-frames
ffmpeg -y -i /tmp/pr-proof.gif -vf 'fps=1' \
  /tmp/proof-frames/frame-%02d.png

Verify that:

  • the initial, interaction, and final states are legible;
  • before reproduces the original bug;
  • after demonstrates the fix without hiding surrounding behavior;
  • both recordings use equivalent inputs and layout.

Publish to the PR

Copy only final proof assets into the branch:

asset_dir=.github/pr-assets/PR-$pr
mkdir -p "$asset_dir"
cp /tmp/before.gif "$asset_dir/before.gif"
cp /tmp/after.gif "$asset_dir/after.gif"

Commit and push the assets, then embed full-SHA-pinned same-origin URLs:

sha=$(git rev-parse HEAD)
git remote get-url origin
| Before | After |
| --- | --- |
| ![Before](https://github.com/OWNER/REPO/raw/FULL_SHA/.github/pr-assets/PR-NUMBER/before.gif) | ![After](https://github.com/OWNER/REPO/raw/FULL_SHA/.github/pr-assets/PR-NUMBER/after.gif) |

Use github.com/OWNER/REPO/raw/..., not raw.githubusercontent.com, and use a full commit SHA rather than a branch or short SHA. Fetch the final PR body and download both embedded URLs to confirm they return the committed files.

Keep tapes, temporary skills, MP4s, frames, and detached checkouts out of the PR.

Version History

  • b94afce Current 2026-08-27 15:20

Same Skill Collection

.skills/adding-models/SKILL.md
src/skills/builtin/acquiring-skills/SKILL.md
src/skills/builtin/browser-use/SKILL.md
src/skills/builtin/context-doctor/SKILL.md
src/skills/builtin/converting-mcps-to-skills/SKILL.md
src/skills/builtin/creating-mods/SKILL.md
src/skills/builtin/creating-skills/SKILL.md
src/skills/builtin/customizing-commands/SKILL.md
src/skills/builtin/customizing-statusline/SKILL.md
src/skills/builtin/dispatching-coding-agents/SKILL.md
src/skills/builtin/editing-letta-code-desktop-preferences/SKILL.md
src/skills/builtin/finding-agents/SKILL.md
src/skills/builtin/generating-mod-envs/SKILL.md
src/skills/builtin/image-generation/SKILL.md
src/skills/builtin/initializing-memory/SKILL.md
src/skills/builtin/managing-shared-memory/SKILL.md
src/skills/builtin/messaging-agents/SKILL.md
src/skills/builtin/migrating-memory/SKILL.md
src/skills/builtin/modifying-the-harness/SKILL.md
src/skills/builtin/scheduling-tasks/SKILL.md
src/skills/builtin/self-configuration/SKILL.md
src/skills/builtin/submitting-feedback/SKILL.md
src/skills/builtin/syncing-memory-filesystem/SKILL.md
src/skills/builtin/teleporting-between-environments/SKILL.md
src/skills/builtin/using-cloud-mcp/SKILL.md
src/skills/builtin/using-mcp-tools/SKILL.md
src/skills/builtin/letta-guide/SKILL.md

Metadata

Files
0
Version
4d5cd9c
Hash
bbea3dff
Indexed
2026-08-27 15:20

inicio - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-09-05 14:17
浙ICP备14020137号-1 $mapa de visitantes$