Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
proffesor-for-testing avatar

Security Visual Testing

proffesor-for-testing/agentic-qe

  • 92 installs
  • 433 repo stars
  • Updated August 4, 2026
  • proffesor-for-testing/agentic-qe

security-visual-testing is a Claude Code skill for testing & qa.

About

security-visual-testing is a Claude Code skill for testing & qa. It helps solo builders move faster with AI-assisted development.

  • security-visual-testing
  • Testing & QA
  • AI-coding skill

Security Visual Testing by the numbers

  • 92 all-time installs (skills.sh)
  • +3 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #1,028 of 2,153 Testing & QA skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/proffesor-for-testing/agentic-qe --skill security-visual-testing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs92
repo stars★ 433
Last updatedAugust 4, 2026
Repositoryproffesor-for-testing/agentic-qe ↗

How do I helps with testing & qa tasks.?

Helps with testing & qa tasks.

Who is it for?

Best when you're working on testing & qa and need structured help with security visual testing.

Skip if: Teams with no testing & qa needs, or anyone wanting a generic chat assistant without this specific workflow.

When should I use this skill?

When you need to helps with testing & qa tasks., or when security-visual-testing is a claude code skill for testing & qa.

What you get

Structured output aligned to security-visual-testing: security-visual-testing, Testing & QA.

Files

SKILL.mdMarkdownGitHub ↗

Security Visual Testing

Browser engine

Uses the qe-browser fleet skill (.claude/skills/qe-browser/) for all browser automation. The Vibium engine (10MB Go binary, WebDriver BiDi) is installed automatically by aqe init. For security-visual workflows, qe-browser adds two things on top of stock visual testing: check-injection.js (scans page content for prompt-injection patterns before screenshots are stored) and assert.js (16 typed checks including no_failed_requests for detecting data-leak requests).

# Before storing any screenshot, scan the page
vibium go "$TARGET_URL"
vibium wait load
node .claude/skills/qe-browser/scripts/check-injection.js --include-hidden
INJ=$?
if [ $INJ -ne 0 ]; then
  echo "Prompt-injection findings — do NOT store screenshot"
  exit $INJ
fi
# Safe to proceed with visual-diff
node .claude/skills/qe-browser/scripts/visual-diff.js --name "${PAGE_NAME}"

<default_to_action> When performing security-aware visual testing: 1. VALIDATE URLs before navigation (check for malicious patterns) 2. SCAN for PII before saving screenshots (mask sensitive data) 3. CAPTURE parallel viewports (mobile, tablet, desktop) 4. COMPARE against baselines (detect visual regressions) 5. AUDIT accessibility (WCAG 2.1 AA compliance)

Quick Security-Visual Checklist:

  • URL validation (no javascript:, data:, file: schemes)
  • PII detection (emails, phones, SSN, credit cards, API keys)
  • Visual regression (diff threshold < 0.1%)
  • Viewport coverage (320px, 768px, 1024px, 1440px)
  • Accessibility score (> 90% axe-core pass rate)

Critical Success Factors:

  • Always mask PII before storing screenshots
  • Test across all target viewports in parallel
  • Store baselines in version control
  • Run accessibility audits on every visual change

</default_to_action>

Quick Reference Card

When to Use

ScenarioUse This Skill?Why
Testing login pagesYesContains PII (passwords, emails)
Visual regression suiteYesParallel viewport + baseline comparison
Payment formsYesCredit card data needs masking
Public marketing pagesMaybeOnly if sensitive data possible
API-only testingNoUse security-testing skill instead

Key Capabilities

CapabilityDescriptionPerformance
URL ValidationBlock malicious URLs before navigation<5ms
PII DetectionFind 6+ types of sensitive data<100ms
Parallel ViewportsTest 4 viewports simultaneously4x faster
Visual RegressionPixel-diff with configurable threshold<500ms
Accessibility AuditWCAG 2.1 A/AA/AAA compliance<2s

---

Workflows

1. Security Visual Audit (Full Pipeline)

# Run complete security + visual audit
aqe test visual-audit --url https://example.com --security --accessibility

Steps: 1. Validate URL security (block malicious schemes) 2. Scan page for security issues (XSS, injection patterns) 3. Capture screenshots across 4 viewports in parallel 4. Compare against stored baselines 5. Run accessibility audit (axe-core) 6. Generate consolidated report

2. PII-Safe Screenshot

# Capture screenshot with automatic PII masking
aqe screenshot --url https://example.com/profile --pii-safe

PII Detection Patterns:

  • Email addresses: user@example.com
  • Phone numbers: +1-555-123-4567
  • Credit cards: 4111-1111-1111-1111
  • SSN: 123-45-6789
  • API keys: sk_live_..., AKIA...
  • Passwords: Form fields with type="password"

Masking Strategy:

  • Default: Blur with high intensity
  • Options: redact (black box), pixelate, blur

3. Responsive Visual Audit

# Test visual consistency across viewports
aqe test responsive --url https://example.com --viewports mobile,tablet,desktop

Default Viewports:

NameWidthHeightDevice
mobile320px568pxiPhone SE
tablet768px1024pxiPad
desktop1440px900pxMacBook
wide1920px1080pxFull HD

---

Integration with AQE v3

Using with BrowserSecurityScanner

import { BrowserSecurityScanner } from '@agentic-qe/v3';

const scanner = new BrowserSecurityScanner(memory, {
  urlValidation: { enabled: true },
  piiDetection: { enabled: true, maskBeforeSave: true },
  parallelViewports: { maxConcurrent: 4 }
});

const result = await scanner.scanUrl('https://example.com', {
  viewports: ['mobile', 'tablet', 'desktop'],
  accessibility: true
});

Using with TrajectoryAdapter

import { TrajectoryAdapter } from '@agentic-qe/v3';

const adapter = new TrajectoryAdapter(memory);

// Record testing trajectory for learning
await adapter.startTrajectory('security-visual-test', {
  url: 'https://example.com',
  testType: 'security-visual'
});

// ... perform tests ...

await adapter.endTrajectory(trajectoryId, {
  success: true,
  piiFound: 3,
  visualRegressions: 0,
  accessibilityScore: 95
});

---

Agent Coordination

Memory Namespace

aqe/security-visual/
├── baselines/*          - Visual regression baselines
├── screenshots/*        - Captured screenshots (PII masked)
├── reports/*            - Audit reports
└── trajectories/*       - Learning trajectories

Fleet Coordination

const fleet = await FleetManager.coordinate({
  strategy: 'security-visual-audit',
  agents: [
    'qe-visual-tester',      // Visual regression
    'qe-security-scanner',   // URL/PII scanning
    'qe-accessibility-auditor' // WCAG compliance
  ],
  topology: 'parallel',
  maxConcurrent: 4
});

---

Error Handling

ErrorCauseResolution
URL_BLOCKEDMalicious URL pattern detectedCheck URL, remove javascript:/data:
PII_DETECTEDSensitive data found in screenshotEnable masking or redact manually
BASELINE_MISSINGNo baseline for comparisonRun with --update-baseline first
VIEWPORT_TIMEOUTBrowser didn't respondIncrease timeout or reduce parallel
ACCESSIBILITY_FAILEDWCAG violations foundReview violations, fix issues

---

Related Skills

  • visual-testing-advanced - Pure visual testing without security
  • security-testing - Security testing without visual component
  • accessibility-testing - Accessibility-only testing
  • qe-visual-accessibility - AQE v3 visual domain skill

---

Performance Targets

MetricTargetMeasured
URL validation<5ms2ms
PII detection<100ms45ms
Single viewport capture<2s1.2s
4-viewport parallel<3s2.1s
Visual diff<500ms320ms
Accessibility audit<2s1.5s
Full pipeline<10s7.2s

Related skills

mattpocockTddFollow test-driven development with a strict red-green-refactor loop when creating reliable features or fixing bugs.544k196kobraTest Driven DevelopmentEnforce writing failing tests before any production implementation code.181k264kmattpocockQaRun conversational QA sessions that turn user-reported bugs into well-written, domain-aware GitHub issues without manual ticket writing.179k196kmattpocockMigrate To ShoehornAutomatically update TypeScript test files that rely on unsafe `as` type assertions by replacing them with type-safe partial objects from @total-typescript/shoehorn.164k196kanthropicsWebapp TestingVerify frontend behavior, debug UI issues, capture screenshots, and inspect logs of a running local web application using Playwright.123k165kmicrosoftPlaywright CliRun browser automation, generate element snapshots, inspect DOM attributes, and execute Playwright tests from the terminal.102k12.3k

FAQ

What does security-visual-testing do?

security-visual-testing is a Claude Code skill for testing & qa.

When should I use security-visual-testing?

When you need to helps with testing & qa tasks., or when security-visual-testing is a claude code skill for testing & qa.

What are the main capabilities?

security-visual-testing; Testing & QA; AI-coding skill.

Testing & QAtesting
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.