screenshot

tvergho's avatarfrom tvergho

Capture PNG screenshots of dex TUI commands for debugging UI layout issues. Use when iterating on CLI interface code or debugging rendering problems.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[Debugging]

When & Why to Use This Skill

This Claude skill enables developers to capture high-quality PNG screenshots of dex TUI (Terminal User Interface) commands. It is specifically designed to streamline the debugging of UI layout issues and accelerate the iteration process for CLI interface code. By leveraging vhs to render terminal outputs, it provides a visual bridge for AI agents to inspect, verify, and fix rendering problems in terminal-based applications.

Use Cases

  • UI Layout Debugging: Capture and inspect terminal renderings to identify and fix alignment, spacing, or color issues in TUI components.
  • CLI Development Iteration: Rapidly visualize changes made to CLI command outputs in real-time without requiring manual terminal interaction.
  • Complex Navigation Testing: Use automated key sequences (like enter, escape, or directional keys) to navigate through multi-layered TUI views and verify the visual state of each screen.
  • Visual Bug Reporting: Generate clear PNG screenshots of terminal errors or rendering glitches to include in technical documentation or issue trackers.
namescreenshot
descriptionCapture PNG screenshots of dex TUI commands for debugging UI layout issues. Use when iterating on CLI interface code or debugging rendering problems.

Screenshot Tool

Capture screenshots of dex TUI commands using vhs.

Instructions

  1. Run the screenshot tool with a dex command:

    ./tools/screenshot.sh "<command>" [options]

  2. Read the output file to view the captured TUI:

    # Default output is /tmp/dex-screenshot.png

  3. Use the Read tool on the PNG file to see the rendered UI.

Options

  • -o, --output <path> - Output PNG path (default: /tmp/dex-screenshot.png)
  • -k, --keys <keys> - Key sequence to send after initial load (comma-separated)
  • -w, --wait <seconds> - Initial wait time in seconds (default: 10)
  • --no-open - Don't open the screenshot after capture

Key Sequence

Use -k to navigate through screens. Supported keys:

  • enter - Press Enter (navigate into views)
  • esc - Press Escape (go back)
  • j, k - Navigate up/down
  • g, G - Go to top/bottom
  • Any single character

Examples

# Screenshot list view (search results)
./tools/screenshot.sh "search api"

# Screenshot matches view (press Enter to expand first result)
./tools/screenshot.sh "search api" -k enter

# Screenshot conversation view (Enter twice)
./tools/screenshot.sh "search api" -k enter,enter

# Screenshot with navigation (go to matches, scroll down twice)
./tools/screenshot.sh "search api" -k enter,j,j

# Custom output path
./tools/screenshot.sh "search api" -o /tmp/api-search.png -k enter

# Don't auto-open (useful for automation)
./tools/screenshot.sh "list" --no-open

View Navigation

The search command has 4 views:

  1. List view - Initial search results (no keys needed)
  2. Matches view - All matches in a conversation (-k enter)
  3. Conversation view - Full conversation with messages (-k enter,enter)
  4. Message view - Full message content (-k enter,enter,enter)

Workflow

  1. Make changes to TUI code in src/cli/commands/
  2. Run screenshot tool to capture the result
  3. Read the PNG to view the rendered UI
  4. Iterate based on what you see

Requirements

Requires vhs: brew install vhs