What is visual-testing-loop?

An automated visual-checking workflow for frontend pages and components. It creates or changes the interface, runs it locally, takes screenshots, reviews them, and repeats the process.

Use it while building or refining web interfaces, checking different screen sizes, or testing dark and light themes.

It reduces the need to manually inspect every visual change. This helps catch layout, responsive-design, and theme problems before delivery.

visual-testing-loop — Skill for Claude Code and Codex by Alenryuichi

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add Alenryuichi/openmemory-plus --skill visual-testing-loop

Clone the repo

git clone --depth 1 https://github.com/Alenryuichi/openmemory-plus

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/alenryuichi/openmemory-plus/visual-testing-loop/github.svg)](https://agentmods.dev/skills/alenryuichi/openmemory-plus/visual-testing-loop)

Your own site

<a href="https://agentmods.dev/skills/alenryuichi/openmemory-plus/visual-testing-loop"><img src="https://agentmods.dev/badge/skills/alenryuichi/openmemory-plus/visual-testing-loop/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/alenryuichi/openmemory-plus/visual-testing-loop"><img src="https://agentmods.dev/badge/skills/alenryuichi/openmemory-plus/visual-testing-loop.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 46 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,028 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00046	$0.01028
Opus 5.5	$0.00018	$0.00411
Sonnet 5.5	$0.00009	$0.00206
Haiku 4.5	$0.00005	$0.00103

Measured 1mo ago against content hash 80c1e5a073d4, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

visual-testing-loop scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.augment/skills/visual-testing-loop/SKILL.md · 173 lines

How it starts

The opening of the file, as written. The whole thing — 173 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Visual Testing Loop

Overview

Automate the visual feedback loop for frontend development. No manual verification needed - Agent sees what users see and iterates autonomously.

Core principle: Generate → Serve → Screenshot → Analyze → Iterate (until satisfied)

When to Use

Building new UI components or pages
Iterating on visual design
Verifying responsive layouts
Testing dark/light themes
Quality-checking before delivery

Prerequisites

Agent must have access to Playwright MCP tools:

browser_navigate_playwright
browser_take_screenshot_playwright
browser_snapshot_playwright
launch-process (for starting dev server)

The Loop

Phase 1: Generate

Create or modify the frontend code:

Apply frontend-design skill for aesthetic quality
Generate production-grade HTML/CSS/JS or React components
Ensure code is runnable locally

Phase 2: Serve

Start a local development server:

# For static HTML
npx serve -p 3000 ./dist

# For React/Vite
npm run dev

# For Next.js
npm run dev

Keep server running (use wait=false for background process)

Phase 3: Screenshot

Capture the rendered output:

Navigate to the page:

browser_navigate_playwright → http://localhost:3000

Wait for page load:

browser_wait_for_playwright → wait for key elements

Take screenshot:

browser_take_screenshot_playwright → save to file

For full page:

browser_take_screenshot_playwright → fullPage: true

Phase 4: Analyze

Evaluate the screenshot against quality criteria:

Visual Checklist:

Typography is distinctive (not generic fonts)
Color palette is cohesive and intentional
Layout has visual hierarchy
Spacing is consistent
No visual glitches or overflow
Responsive at current viewport
Matches intended aesthetic direction

Technical Checklist:

All elements render correctly
Images/icons load properly
No console errors (check browser_console_messages_playwright)
Interactive states work (hover, click)

Read the full file on GitHub · 173 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

1mo ago First seen · 173 lines · 46 tokens per session scan A 80c1e5a073d4

Subscribe to this mod's changes

visual-testing-loop is a skill published in the GitHub repository Alenryuichi/openmemory-plus (20 stars, last pushed 7mo ago), licensed MIT. It adds 46 tokens to every session and 1,028 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

E2E testing Frontend Testing agent ai ai-agent augment claude cursor

run-app

USE WHEN: running, smoke-testing, or visually checking the apps - starting the worker-api / front-app dev servers, probing health, CORS, the 404 envelope and the SPA shell, rendering the SPA in a headless browser, reading local request traces, or probing a Worker Preview URL the user deployed. This is the project…

louisbrulenaudet/monorepo-template · 109 tokens

visual-testing-loop