skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-adaptive-state

Detects adaptive state accessibility and theming defects in web UI.

Updated May 22, 2026
Search Tags:#accessibility#ui testing#dark mode#reduced motion#high contrast#forced colors
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-adaptive-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-adaptive-state
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-adaptive-state
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-adaptive-state

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds UI defects that only appear in adaptive visual states such as dark mode, reduced motion, forced colors, and high contrast, so teams can catch accessibility and theming regressions before release.

Core Features & Use Cases

  • Adaptive state simulation: Tests dark mode, reduced motion, forced colors, and high contrast behavior in a single in-page probe.
  • Targeted defect detection: Flags contrast failures, missing dark theme updates, motion that ignores user preferences, layout breaks, invisible text, hidden focus rings, and broken icons.
  • Practical use case: Use it when validating a responsive web app that must remain readable and usable for users with accessibility preferences or system-level display settings.

Quick Start

Run the adaptive state QA skill against the current page to detect theming, motion, forced-colors, and high-contrast issues.

Frequently Asked Questions about qa-detect-adaptive-state

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test dark mode and high contrast accessibility defects in a web app?▼

Testing dark mode accessibility defects involves simulating adaptive visual states in a single in-page probe to detect contrast failures, missing dark theme updates, and invisible text across system preference changes.

What UI bugs appear when forced colors or reduced motion settings are enabled?▼

When forced colors or reduced motion are enabled, UI bugs like ignored motion preferences, hidden focus rings, broken icons, and layout overflow emerge, which only appear under these adaptive visual states.

Can I check for layout overflow and invisible text during browser-based UI testing?▼

You can check for layout overflow and invisible text during browser-based UI testing by running an adaptive state probe that evaluates contrast and layout integrity while cleaning up injected styles after inspection.

Does this accessibility testing approach require external dependencies or component libraries?▼

This accessibility testing approach requires no external dependencies or component libraries, functioning as a standalone in-page probe that simulates media states and cleans up injected styles after inspection.

Why does my dark mode UI pass standard accessibility checks but still have theming regressions?▼

Dark mode UI passes standard checks but retains theming regressions because missing dark theme updates and broken icons only appear when specifically simulating adaptive visual states like forced colors and high contrast.

Related Skills

Explore More Software Engineering Skills→
semicolon-devteamsemicolon-devteam

e2e-test

Automate Playwright end-to-end tests to validate runtime browser behavior.

Official
Advanced
robit-manrobit-man

regression-report

Generate regression analysis reports from bisect, baseline, and metrics data.

Community
Advanced
Serg28Serg28

pest-testing

Automate PHP unit, feature, browser, and architecture tests with Pest 4.

Community
Intermediate
justfinethankujustfinethanku
40

cc_chrome_devtools_mcp_skill

Measure Core Web Vitals and export HAR files via Chrome DevTools Protocol.

Community
Advanced