visual-regression

visual-regression is a skill for Claude Code from HsuanYuLee/polaris. It costs 226 tokens per session (1,193 once invoked), scanned A, original, MIT.

A check that compares fresh screenshots from before and after a website change. Visual regression testing means checking whether existing pages still look correct after code is modified.

In plain words
What is it for?
Checking configured website pages in local or staging environments, analysing screenshot differences, and reporting visual changes.
Why use it?
It catches unintended layout or appearance changes that ordinary tests may not detect, without keeping permanent screenshot baselines.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Checking configured website pages in local or staging environments, analysing screenshot differences, and reporting visual changes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hsuanyulee/polaris/visual-regression
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 HsuanYuLee/polaris --skill visual-regression
Clone the repo
git clone --depth 1 https://github.com/HsuanYuLee/polaris

Made for: Claude Code.

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.

agentmods badge for visual-regression

README.md
[![agentmods](https://agentmods.dev/badge/skills/hsuanyulee/polaris/visual-regression.svg)](https://agentmods.dev/skills/hsuanyulee/polaris/visual-regression)
Your own site
<a href="https://agentmods.dev/skills/hsuanyulee/polaris/visual-regression"><img src="https://agentmods.dev/badge/skills/hsuanyulee/polaris/visual-regression.svg" alt="Measured on agentmods" height="20"></a>
Per session 226 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,193 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00226 $0.01193
Opus 5 $0.00113 $0.00596
Sonnet 5 $0.00045 $0.00239
Haiku 4.5 $0.00023 $0.00119

Measured 8d ago against content hash c92a20d6f88c, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

visual-regression 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 8d ago.

The scan reads SKILL.md. This mod also ships 14 executable files (scripts/check-vr-config.sh, scripts/contract-check.sh, scripts/jira-upload-attachment.sh, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

.claude/skills/visual-regression/SKILL.md · 97 lines

How it starts

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

Visual Regression

Before/after screenshot comparison guard。每次執行都抓 fresh before / after screenshots,使用 Playwright diff,分析後刪除 temporary snapshots 與 test results; 不維護 long-lived baselines。

Contract

VR 的測試單位是 domain,不是 repo。頁面由 configured URL paths 定義;不可因「頁面不在 目前 repo」而 skip。合法 skip 僅限 config 缺漏、dependency declined、clean local tree、 smart-skip 判斷無 visual impact、fixture 未建立、已知 SSR hang、環境依賴缺失。

VR 在 quality chain 中回答:「既有頁面是否仍 visually intact?」它不取代 Local CI Mirror, 也不取代 feature behavior verification。

Reference Loading

依執行情境讀取:

Situation Load
Any VR run visual-regression-principles.md, visual-regression-preflight-flow.md, visual-regression-config.md, workspace-config.yaml
Screenshot execution visual-regression-capture-flow.md, dependency-consent.md
Fixtures enabled api-contract-guard.md, visual-regression-fixture-flow.md, vr-artifact-location.md
Analysis or JIRA report visual-regression-analysis-reporting.md

JIRA report、Slack summary,或任何 external write body 送出前,必須依 workspace-config.yamllanguage 驗證語言。

Flow

  1. 解析 domain 與 company config,套用 root defaults inheritance。
  2. 檢查 visual regression 是否已設定;未設定則 stop,不 improvisation。
  3. 執行 smart skip、dependency consent、Playwright/toolchain readiness。
  4. 決定 SIT 或 Local comparison path;SIT 不可達時依 reference fallback。
  5. 透過 polaris-env.sh 啟動 production-equivalent proxy 與 dev environment。
  6. Fixtures active 時先跑 API contract guard。
  7. Capture before screenshots,capture after screenshots,讓 Playwright compare。
  8. 分析結果、套用 first-run quality gate、必要時上傳 artifacts 並寫 JIRA wiki report。
  9. 無論 pass/fail/error 都 cleanup,保護 git stash、server state、temporary snapshots。

Hard Rules

  • Always go through production-equivalent proxy;不可直接打 app dev port 迴避 routing。
  • CSR content 必須等 deterministic selector,不使用 fixed timeout 當 readiness。
  • UA-based mobile SSR 必須設定 mobile user agent,不只設 viewport。
  • Fixtures active 時為 strict mode:任何 diff 都不是 data variance。
  • First run after fixture setup/change 必須 human screenshot review;zero-diff 不代表截圖正確。
  • Playwright tests 必須 sequential,workers: 1
  • JIRA inline screenshot report 使用 REST API v2 wiki markup,不使用 MCP markdown comment。

Read the full file on GitHub · 97 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.

  1. 8d ago First seen · 97 lines · 226 tokens per session scan A c92a20d6f88c

Subscribe to this mod's changes

visual-regression is a skill published in the GitHub repository HsuanYuLee/polaris (5 stars, last pushed yesterday), licensed MIT. It adds 226 tokens to every session and 1,193 once invoked, about $0.0011 per session on Opus 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-08-31.

Related

Other skills, from other repositories

api-tester

A tool for creating and checking API tests from the real API contract and implementation. An API is the agreed way that software sends requests and receives responses.

laolaoshiren/claude-code-skills-zh · 86 tokens

smoke-test

Launch the app and hands-on verify that it works by interacting with it. Falls back to an existing integration test suite when there is no interactive surface in scope. Use when the user asks to "smoke test", "test it manually", "verify it works", "try it out", "run a smoke test", "check it in the browser", or "does…

tobihagemann/turbo · 88 tokens

web-e2e

Full end-to-end browser testing for local web apps with a persistent logged-in session. Log in once into a named Chrome profile, then drive real flows with trace evidence against your locally served app - Laravel/Herd, docker compose, FastAPI+SPA, Vite. Adds per-project orchestration via .e2e/config.json - boot +…

vanducng/skills · 141 tokens

ui-test

Runs UI tests described in plain English by driving real Chrome via the Claude-in-Chrome extension. Covers end-to-end flows (clicks, forms, assertions), visual checks (screenshot + optional baseline diff), accessibility (axe-core), performance (Web Vitals + light Lighthouse-style metrics), and an interactive --debug…

mostafa-drz/claude-skills · 190 tokens

audit-ui-e2e

Runs a beginner-mind end-to-end UI audit of any running app — local dev server, staging, production, or a specific URL. Drives Chrome through every interactive element on the target surface, collects structured findings (severity, category, where, symptom, impact, repro, triage), and hands the result off to…

mostafa-drz/claude-skills · 152 tokens

capture-screens

Automatically navigates a web app using Playwright MCP and captures context-aware named screenshots at each product feature state. Names each file semantically based on context (e.g., checkout-payment-form-filled.png). Outputs a manifest.json mapping filenames to descriptions and a summary report. Use when documenting…

mostafa-drz/claude-skills · 101 tokens