New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Qe Visual Testing Advanced

by proffesor-for-testing in proffesor-for-testing/agentic-qe

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

MITAuto-check passedTesting & QA

Install Qe Visual Testing Advanced

skills CLI
$ npx skills add proffesor-for-testing/agentic-qe --skill qe-visual-testing-advanced -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install proffesor-for-testing/agentic-qe qe-visual-testing-advanced --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/proffesor-for-testing/agentic-qe.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.kiro/skills/qe-visual-testing-advanced .claude/skills/qe-visual-testing-advanced && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
qe-visual-testing-advanced
GitHub stars
494
Token cost
~1.5k tokens
SKILL.md length
277 words
Files
1
Skills in repo
95
Repo updated
First seen
Licence
MIT

At a glance

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

  • Works in 5 steps: CAPTURE baseline screenshots (first run… → COMPARE new screenshots against baseline… → MASK dynamic content (timestamps, ads,… → …
  • Detecting UI regressions
  • SKILL.md covers Quick Reference Card, Visual Regression with…, Handling Dynamic Content and AI-Powered Visual Testing…, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Qe Visual Testing Advanced is an agent skill from proffesor-for-testing/agentic-qe. Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Visual regression testing. The repository describes itself as: Agentic QE Fleet is an open-source AI-powered QA/QE platform designed for use with Coding Agents (works best with Claude Code) featuring specialized agents and skills to support… The licence is MIT.

When your agent uses it

  • Detecting UI regressions
  • Validating designs
  • Ensuring visual consistency

Example prompts

  • “/qe-visual-testing-advanced”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. CAPTURE baseline screenshots (first run establishes baseline)
  2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
  3. MASK dynamic content (timestamps, ads, user counts)
  4. TEST across devices (desktop, tablet, mobile viewports)
  5. REVIEW and approve intentional changes, fail on regressions

What it can do on your machine

Read from SKILL.md and the folder at commit 829d030. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Qe Visual Testing Advanced loads about 1.5k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 277 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from proffesor-for-testing/agentic-qe at commit 829d030, republished under its MIT licence (© proffesor-for-testing). 277 words, ~1,505 tokens.

Download SKILL.mdSave it as .claude/skills/qe-visual-testing-advanced/SKILL.md (or your agent's skills folder).
name
qe-visual-testing-advanced
description
Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.
inclusion
auto
tags
visual, regression, screenshot, pixel-diff, percy, playwright, responsive

Advanced Visual Testing

<default_to_action> When detecting visual regressions or validating UI:

  1. CAPTURE baseline screenshots (first run establishes baseline)
  2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
  3. MASK dynamic content (timestamps, ads, user counts)
  4. TEST across devices (desktop, tablet, mobile viewports)
  5. REVIEW and approve intentional changes, fail on regressions

Quick Visual Testing Steps:

  • Set up baseline on main branch
  • Compare feature branch against baseline
  • Mask dynamic elements (timestamps, avatars)
  • Use AI-powered comparison to reduce false positives
  • Integrate in CI/CD to block visual regressions

Critical Success Factors:

  • Functional tests don't catch visual bugs
  • AI-powered tools reduce false positives
  • Review diffs, don't just auto-approve </default_to_action>

Quick Reference Card

When to Use
  • UI component changes
  • CSS/styling modifications
  • Responsive design validation
  • Cross-browser consistency checks
Visual Bug Types
Bug TypeDescription
Layout shiftElements moved position
Color changeUnintended color modification
Font renderingTypography issues
AlignmentSpacing/alignment problems
Missing imagesBroken image paths
OverflowContent clipping
Comparison Algorithms
AlgorithmBest For
Pixel diffExact match requirement
Structural similarityHandle anti-aliasing
AI semanticIgnore insignificant changes

Visual Regression with Playwright

javascript
import { test, expect } from '@playwright/test';

test('homepage visual regression', async ({ page }) => {
  await page.goto('https://example.com');

  // Capture and compare screenshot
  await expect(page).toHaveScreenshot('homepage.png');
  // First run: saves baseline
  // Subsequent runs: compares to baseline
});

test('responsive design', async ({ page }) => {
  // Mobile viewport
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage-mobile.png');

  // Tablet viewport
  await page.setViewportSize({ width: 768, height: 1024 });
  await expect(page).toHaveScreenshot('homepage-tablet.png');
});

Handling Dynamic Content

javascript
test('mask dynamic elements', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveScreenshot({
    mask: [
      page.locator('.timestamp'),     // Dynamic time
      page.locator('.user-count'),    // Live counter
      page.locator('.advertisement'), // Ads
      page.locator('.avatar')         // User avatars
    ]
  });
});

AI-Powered Visual Testing (Percy)

javascript
import percySnapshot from '@percy/playwright';

test('AI-powered visual test', async ({ page }) => {
  await page.goto('https://example.com');

  // Percy uses AI to ignore anti-aliasing, minor font differences
  await percySnapshot(page, 'Homepage');
});

test('component visual test', async ({ page }) => {
  await page.goto('https://example.com/components');

  // Snapshot specific component
  const button = page.locator('.primary-button');
  await percySnapshot(page, 'Primary Button', {
    scope: button
  });
});

Playwright Configuration

javascript
// playwright.config.js
export default {
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100,      // Allow 100 pixel difference
      maxDiffPixelRatio: 0.01, // Or 1% of image
      threshold: 0.2,          // Color similarity threshold
      animations: 'disabled',  // Disable animations
      caret: 'hide'            // Hide cursor
    }
  }
};

Agent-Driven Visual Testing

typescript
// Comprehensive visual regression
await Task("Visual Regression Suite", {
  baseline: 'main-branch',
  current: 'feature-branch',
  pages: ['homepage', 'product', 'checkout'],
  devices: ['desktop', 'tablet', 'mobile'],
  browsers: ['chrome', 'firefox', 'safari'],
  threshold: 0.01
}, "qe-visual-tester");

// Returns:
// {
//   comparisons: 27,  // 3 pages × 3 devices × 3 browsers
//   differences: 2,
//   report: 'visual-regression-report.html'
// }

Agent Coordination Hints

Memory Namespace
aqe/visual-testing/
├── baselines/*          - Baseline screenshots
├── comparisons/*        - Diff results
├── components/*         - Component snapshots
└── reports/*            - Visual regression reports
Fleet Coordination
typescript
const visualFleet = await FleetManager.coordinate({
  strategy: 'visual-testing',
  agents: [
    'qe-visual-tester',   // Screenshot comparison
    'qe-test-executor',   // Cross-browser execution
    'qe-quality-gate'     // Block on visual regressions
  ],
  topology: 'parallel'
});

Remember

Functional tests don't catch visual bugs. Layout shifts, color changes, font rendering, alignment issues - all invisible to functional tests but visible to users.

AI-powered tools reduce false positives. Percy, Applitools use AI to ignore insignificant differences (anti-aliasing, minor font rendering).

With Agents: qe-visual-tester automates visual regression across browsers and devices, uses AI to filter noise, and generates visual diff reports. Catches UI regressions before users see them.

© proffesor-for-testing, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .kiro/skills/qe-visual-testing-advanced of proffesor-for-testing/agentic-qe.

Open the folder on GitHubat commit 829d030

Compare with similar skills

Qe Visual Testing Advanced next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Qe Visual Testing Advanced compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Qe Visual Testing Advanced this skillproffesor-for-testing/agentic-qe494—~1.5kAutomated safety check: PassMIT
Before and After Screenshotsmichaelshimeles/skills1.3k2 repos~1kAutomated safety check: PassMIT
Handsontable Visual Test Demoshandsontable/handsontable22k—~1.3kAutomated safety check: PassCustom licence
Kc Screenshotimran31415/kube-coder388—~870Automated safety check: NotesMIT
Visual QA For Web And Terminal UIscode-yeongyu/oh-my-openagent70k—~9.5kAutomated safety check: PassCustom licence
Meticulous Iterative DevFlintSH/Flare135—~1.3kAutomated safety check: PassMIT

Similar skills

  • Before and After Screenshots

    michaelshimeles/skills

    Captures before and after screenshots of two URLs or images with the Vercel before-and-after CLI, uploads them and can add a markdown comparison to a pull request.

    1.3k GitHub starsUsed in 2 repos~1k tokens
    Testing & QAAuto-check passed

  • Handsontable Visual Test Demos

    handsontable/handsontable

    Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.

    22k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Kc Screenshot

    imran31415/kube-coder

    Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.

    388 GitHub stars~870 tokensUpdated today
    Testing & QAAuto-check: notes

  • Visual QA For Web And Terminal UIs

    code-yeongyu/oh-my-openagent

    Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.

    70k GitHub stars~9.5k tokensUpdated today
    Testing & QAAuto-check passed

  • Meticulous Iterative Dev

    FlintSH/Flare

    Iterative frontend development loop using Meticulous for per-step visual validation.

    135 GitHub stars~1.3k tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Visual Diff Screenshot Comparison

    keybase/client

    Captures baseline and current screenshots of the Keybase desktop app and compares them with ImageMagick to find pixel-level regressions between branches or edits.

    9.3k GitHub stars~740 tokensUpdated today
    Testing & QAAuto-check passed

More from proffesor-for-testing/agentic-qe

All 95 skills in this repo

  • Contract Testing

    proffesor-for-testing/agentic-qe

    Consumer-driven contract testing for microservices using Pact, schema validation, API versioning, and backward compatibility testing.

    494 GitHub stars~1.8k tokensUpdated 3 days ago
    Auto-check passed

  • Mutation Testing

    proffesor-for-testing/agentic-qe

    Test quality validation through mutation testing, assessing test suite effectiveness by introducing code mutations and measuring kill rate.

    494 GitHub stars~1.7k tokensUpdated 3 days ago
    Auto-check passed

  • Performance Testing

    proffesor-for-testing/agentic-qe

    Profiles application performance under load using k6, Artillery, or JMeter to measure latency, throughput, and error rates.

    494 GitHub stars~2.4k tokensUpdated 3 days ago
    Auto-check passed

  • Code Review Quality

    proffesor-for-testing/agentic-qe

    Conduct context-driven code reviews focusing on quality, testability, and maintainability.

    494 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Security Testing

    proffesor-for-testing/agentic-qe

    Scans for security vulnerabilities including XSS, SQL injection, CSRF, and auth flaws using OWASP Top 10 methodology.

    494 GitHub stars~2.7k tokensUpdated 3 days ago
    Auto-check: notes

  • Database Testing

    proffesor-for-testing/agentic-qe

    Database schema validation, data integrity testing, migration testing, transaction isolation, and query performance.

    494 GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed

Categories

Questions about Qe Visual Testing Advanced

What does Qe Visual Testing Advanced do?

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Qe Visual Testing Advanced is an agent skill from proffesor-for-testing/agentic-qe. Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

When should I use Qe Visual Testing Advanced?

Qe Visual Testing Advanced fits situations like: detecting UI regressions; validating designs; ensuring visual consistency.

How do I install Qe Visual Testing Advanced in Claude Code?

Run `npx skills add proffesor-for-testing/agentic-qe --skill qe-visual-testing-advanced -a claude-code`. Or copy the skill folder (.kiro/skills/qe-visual-testing-advanced in proffesor-for-testing/agentic-qe) into .claude/skills/qe-visual-testing-advanced in your project. Claude Code loads it when a task matches its description.

How do I install Qe Visual Testing Advanced in Codex?

Run `npx skills add proffesor-for-testing/agentic-qe --skill qe-visual-testing-advanced -a codex`. Or copy the skill folder (.kiro/skills/qe-visual-testing-advanced in proffesor-for-testing/agentic-qe) into .agents/skills/qe-visual-testing-advanced in your project. Codex loads it when a task matches its description.

Can I use Qe Visual Testing Advanced in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add proffesor-for-testing/agentic-qe --skill qe-visual-testing-advanced -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/qe-visual-testing-advanced, .gemini/skills/qe-visual-testing-advanced, .github/skills/qe-visual-testing-advanced and .opencode/skills/qe-visual-testing-advanced in your project.

What does Qe Visual Testing Advanced need to run?

SKILL.md names no scripts, command-line tools or credentials: Qe Visual Testing Advanced is instructions for the agent only.

Does Qe Visual Testing Advanced access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Qe Visual Testing Advanced safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Qe Visual Testing Advanced use?

Qe Visual Testing Advanced is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Qe Visual Testing Advanced use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Qe Visual Testing Advanced?

Skills that share tags, products or a category with Qe Visual Testing Advanced: Before and After Screenshots (michaelshimeles/skills, 1.3k stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Kc Screenshot (imran31415/kube-coder, 388 stars) and Visual QA For Web And Terminal UIs (code-yeongyu/oh-my-openagent, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Qe Visual Testing Advanced?

proffesor-for-testing (a GitHub user) maintains it in proffesor-for-testing/agentic-qe, which has 494 GitHub stars. The repository holds 95 skills in this directory. The repository was last updated on October 4, 2026.

Source: proffesor-for-testing/agentic-qe on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.