Compatibility Testing
Run cross-browser, cross-device, and responsive compatibility checks with visual diff detection as part of agent-driven QE workflows.
Overview
Compatibility Testing is an agent skill most often used in Ship (also Build frontend, Operate iterate) that runs a cross-browser and cross-platform compatibility evaluation suite with visual diff detection.
Install
npx skills add https://github.com/proffesor-for-testing/agentic-qe --skill compatibility-testingWhat is this skill?
- AQE v1.0.0 evaluation suite for cross-browser and cross-platform compatibility
- Browser matrix coverage, device tier validation, and responsive breakpoint checks
- Visual difference detection for layout and rendering regressions
- MCP integration (skill-validation namespace) with outcome tracking and quality-gate updates
- Multi-model evaluation configuration (e.g. Claude 3.5 Sonnet and Haiku)
- AQE Compatibility Testing Skill Evaluation Suite v1.0.0
- Multi-model test configuration includes claude-3.5-sonnet and claude-3-haiku
Adoption & trust: 530 installs on skills.sh; 381 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You ship web UI across browsers and devices but lack a repeatable agent-driven suite for matrix coverage, breakpoints, and visual regressions.
Who is it for?
Indie builders and agents running visual and compatibility QE on SaaS or agent-built frontends with MCP-enabled validation pipelines.
Skip if: Teams that only need a one-line browser smoke test with no matrix, device tiers, or visual diff requirements.
When should I use this skill?
You need cross-browser, cross-platform, or cross-device compatibility evaluation with visual difference detection and MCP-backed validation outcomes.
What do I get? / Deliverables
You get documented compatibility evaluation patterns, tracked outcomes, and quality-gate updates aligned with your QE agent stack instead of scattered manual spot checks.
- Compatibility evaluation results across browser and device matrix
- Tracked validation patterns and quality-gate updates via MCP integration
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Ship because the skill is an evaluation suite for compatibility and visual regression—the core deliverable is test coverage and quality gates before release. testing is the natural subphase for browser matrix coverage, device tier validation, breakpoints, and visual difference detection.
Where it fits
After refactoring CSS grid layouts, run the suite to validate breakpoints across device tiers before merging.
Gate a release candidate with browser matrix coverage and visual diff detection on critical flows.
Re-run compatibility evaluation when users report Safari or mobile rendering issues.
How it compares
Use instead of guessing browser support from a single local Chrome run—this is a structured QE evaluation skill, not a generic unit-test generator.
Common Questions / FAQ
Who is compatibility-testing for?
Solo builders and small teams using agentic QE (e.g. visual testers and coordinators) who need cross-browser and cross-device compatibility coverage before or after UI changes.
When should I use compatibility-testing?
Use it in Ship during testing and launch prep, in Build when changing responsive layouts or breakpoints, and in Operate when investigating visual regressions reported in production.
Is compatibility-testing safe to install?
Review the Security Audits panel on this Prism page and inspect the skill repo and MCP permissions before enabling network, browser, or filesystem access in your agent environment.
SKILL.md
READMESKILL.md - Compatibility Testing
# ============================================================================= # AQE Compatibility Testing Skill Evaluation Suite v1.0.0 # Cross-browser, cross-platform, cross-device compatibility testing evaluation # ============================================================================= skill: compatibility-testing version: 1.0.0 description: > Comprehensive evaluation suite for cross-browser and cross-platform compatibility testing. Tests browser matrix coverage, device tier validation, responsive breakpoints, and visual difference detection. # ============================================================================= # Multi-Model Configuration # ============================================================================= models_to_test: - claude-3.5-sonnet - claude-3-haiku # ============================================================================= # MCP Integration Configuration # ============================================================================= mcp_integration: enabled: true namespace: skill-validation query_patterns: true track_outcomes: true store_patterns: true share_learning: true update_quality_gate: true target_agents: - qe-learning-coordinator - qe-queen-coordinator - qe-visual-tester # ============================================================================= # Learning Configuration # ============================================================================= learning: store_success_patterns: true store_failure_patterns: true pattern_ttl_days: 90 min_confidence_to_store: 0.7 cross_model_comparison: true # ============================================================================= # Result Format Configuration # ============================================================================= result_format: json_output: true markdown_report: true include_raw_output: false include_timing: true include_token_usage: true # ============================================================================= # Environment Setup # ============================================================================= setup: required_tools: - jq environment_variables: BROWSER_COVERAGE_TARGET: "95" fixtures: - name: responsive_layout content: | <div class="container"> <nav class="main-nav">Navigation</nav> <main class="content">Main content</main> <aside class="sidebar">Sidebar</aside> </div> # ============================================================================= # Test Cases # ============================================================================= test_cases: # ------------------------------------------------------------------------- # Browser Matrix Tests # ------------------------------------------------------------------------- - id: tc001_browser_matrix_detection description: "Detect and report browser compatibility issues" category: browser_matrix priority: critical input: code: | // Uses CSS Grid without fallback .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } // Uses CSS custom properties :root { --primary-color: #007bff; } .btn { background: var(--primary-color); } context: language: css target_browsers: ["chrome", "firefox", "safari", "edge", "ie11"] expected_output: must_contain: - "browser" - "compatibility" - "grid" must_not_contain: - "all browsers supported" finding_count: min: 1 max: 3 validation: schema_check: true keyword_match_threshold: 0.8 reasoning_quality_min: 0.7 - id: tc002_webkit_specific_issues description: "Detect WebKit/Safari-specific compatibility issues" category: browser_matrix priority: high input: code: