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

capturing-tui-visual-proof

GitHub

用于捕获 Letta Code TUI 修改前后的视觉证据(截图或 GIF),确保终端渲染与行为一致,以支持 PR 审查。

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

Trigger Scenarios

需要验证交互式 CLI 渲染变化 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/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/letta-guide/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/syncing-memory-filesystem/SKILL.md
src/skills/builtin/teleporting-between-environments/SKILL.md
src/skills/builtin/using-cloud-mcp/SKILL.md

Metadata

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

trang chủ - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-29 21:32
浙ICP备14020137号-1 $bản đồ khách truy cập$