visual-test

Automate visual UI testing for Script Kit GPUI via named pipe screenshots.

28|6|Updated Dec 27, 2025
One-click install
npx skills add https://github.com/johnlindquist/script-kit-next --skill visual-test
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-test
Source: https://github.com/johnlindquist/script-kit-next/tree/main/.claude/skills/visual-test
Command: npx skills add https://github.com/johnlindquist/script-kit-next --skill visual-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of iterating on UI changes by providing a robust workflow for visual verification, ensuring that UI elements appear and function as intended.

Core Features & Use Cases

  • Visual Feedback Loop: Facilitates rapid iteration on UI code by enabling quick build, capture, and verification cycles.
  • Automated Screenshotting: Utilizes a named pipe pattern to send commands to the application, including capturing window screenshots for detailed inspection.
  • Keyboard Interaction Testing: Allows simulation of key presses to test UI responsiveness and navigation.
  • Use Case: When adjusting the spacing or colors of buttons in the application's UI, this Skill allows you to quickly build the app, trigger the UI changes, capture screenshots of the affected areas, and visually confirm the adjustments without manual intervention.

Quick Start

Run the provided bash script template to build the application and capture a screenshot of the main window.

Frequently Asked Questions about visual-test

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

FAQPage Schema
How do I automate visual regression testing for UI changes?

Automate visual regression testing by running a script that builds your application, triggers UI changes, and captures window screenshots via a named pipe. This creates a tight feedback loop for deterministic visual verification without manual intervention.

What is a named pipe pattern for capturing application screenshots?

A named pipe pattern for capturing screenshots sends commands directly to the application to capture window states. This mechanism enables automated screenshotting for visual debugging and regression testing during UI development.

Can I simulate key presses to test UI responsiveness automatically?

Yes, you can simulate key presses to test UI responsiveness and navigation. The visual testing workflow supports sending keyboard interactions through the named pipe to verify how the application UI responds to user input.

How do I set up a visual feedback loop for UI code iteration?

Set up a visual feedback loop by running the provided bash script template to build the application and capture a screenshot of the main window. This enables rapid iteration by cycling through code edits, builds, and screenshot captures.

Does visual UI testing work for verifying button spacing and color adjustments?

Yes, visual UI testing works for verifying button spacing and color adjustments. You can quickly build the app, trigger the UI changes, capture screenshots of the affected areas, and visually confirm the adjustments without manual intervention.

What's the best way to visually verify UI changes without manual screenshotting?

The best way to visually verify UI changes without manual screenshotting is automating the capture process through a named pipe. This approach manages the build, capture, and verification cycle deterministically for reliable visual regression testing.