tui-visual-test

Capture and compare Ink CLI frame renders to detect visual regressions.

Updated Mar 21, 2026
One-click install
npx skills add https://github.com/gtpgg1013/claude-skills-collection --skill tui-visual-test
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tui-visual-test
Source: https://github.com/gtpgg1013/claude-skills-collection/tree/main/skills/claude-local/tui-visual-test
Command: npx skills add https://github.com/gtpgg1013/claude-skills-collection --skill tui-visual-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual regression testing for TUI (Ink) interfaces, ensuring frame rendering, borders, colors, and layout stay consistent across interactions.

Core Features & Use Cases

  • Snapshot-based verification of rendered frames for CLI apps
  • Structural checks for borders, text, and Unicode characters
  • Interaction flow validation through simulated keyboard input
  • Regression detection and alerting on frame differences

Quick Start

Run visual tests for a target component to capture frame snapshots and verify navigation flows.

Frequently Asked Questions about tui-visual-test

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

FAQPage Schema
How do I run visual regression tests for terminal UI components?

Visual regression tests for terminal UI components capture frame-level renders to validate borders, colors, and text layout. This detects visual regressions by snapshotting rendered frames and comparing them deterministically across interactions.

Can I use ink-testing-library to snapshot CLI app navigation flows?

ink-testing-library can snapshot CLI app navigation flows by simulating keyboard input and capturing frame-level renders. This validates interaction flows and detects layout regressions across visually rendered components and menus.

How do I verify borders and text layout in a TUI snapshot test?

TUI snapshot tests verify borders and text layout by performing structural checks on rendered frames. The tests capture Unicode characters, colors, and text positioning to detect layout shifts or visual regressions in CLI components.

Does visual testing for Ink-based UIs work with Vitest?

Visual testing for Ink-based UIs works with Vitest by using it as the underlying test runner. Vitest renders the CLI components, captures deterministic frame snapshots, and compares them to detect visual differences in borders and text.

What is the best way to detect visual regressions in CLI applications?

Detecting visual regressions in CLI applications is best achieved through snapshot-based verification of rendered frames. This approach structurally validates borders, text, and colors to alert on frame differences caused by interaction flows.

Why does my terminal UI snapshot test fail to capture colors and borders?

Terminal UI snapshot tests fail to capture colors and borders when not rendered deterministically. Using proper tooling to render and compare frame-level outputs ensures structural checks validate text layout and Unicode characters correctly.