tui-visual-test

Name: tui-visual-test
Availability: InStock
Author: gtpgg1013

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

Updated Mar 21, 2026

Search Tags:#snapshot #tui #visual-testing #terminal-ui #ink-testing-library #frame-test

Ready to run

npx skills add https://github.com/gtpgg1013/claude-skills-collection --skill tui-visual-test

💬 Prompt for ChatGPT / Claude Chat▼

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.