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

qa-detect-hover-touch

Detect CSS :hover selectors not wrapped in hover-capable media queries.

Updated May 22, 2026
Search Tags:#css#ui testing#responsive#hover#touch#mobile qa
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-hover-touch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-hover-touch
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-hover-touch
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-hover-touch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds CSS hover interactions that break on touch devices, where tap-triggered hover states can stay visibly stuck and make buttons or links look incorrectly pressed.

Core Features & Use Cases

  • Hover rule detection: Scans loaded stylesheets for :hover selectors that are not protected by hover-capable media queries.
  • Touch-device UX QA: Helps catch mobile and tablet issues before they reach users on real touch hardware.
  • Actionable findings: Reports problematic selectors and summarizes how many hover rules need wrapping so developers can fix them quickly.

Quick Start

Use this skill to inspect the current page for unwrapped hover styles that may stick on touch devices.

Frequently Asked Questions about qa-detect-hover-touch

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

FAQPage Schema
Why do CSS hover styles stay stuck on mobile touch devices?▼

CSS hover styles stay stuck on mobile touch devices when :hover selectors are not wrapped in hover-capable media queries, causing tap interactions to leave buttons and links visually pressed.

How do I detect unwrapped hover rules in my stylesheets?▼

You can detect unwrapped hover rules by scanning document stylesheets for :hover selectors and reporting any rules that lack hover-capable media query protection with actionable samples.

What is the best way to audit UI for touch device hover bugs?▼

The best way to audit UI for touch device hover bugs is to scan loaded stylesheets for unprotected :hover selectors, generating a report of problematic rules that need wrapping for mobile and tablet QA.

Does this hover detection require any external dependencies or frameworks?▼

This hover detection does not require external dependencies or frameworks, operating directly on the document stylesheets to identify :hover selectors missing hover-capable media query wrapping.

Can I use this for responsive mobile and tablet UI QA testing?▼

Yes, you can use this for responsive mobile and tablet UI QA testing to catch tap-triggered hover states that make buttons or links look incorrectly pressed before real touch hardware testing.

Related Skills

Explore More Software Engineering Skills→
yahya-azeemyahya-azeem

adapt

Adapt existing UI designs across screen sizes, devices, and usage contexts.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-hover

Detect missing or ineffective hover feedback on interactive UI elements.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-touch-interactions

Detect touch interaction defects in responsive web interfaces via real touch events.

Community
Advanced
thisisAhsanIqbalthisisAhsanIqbal
7

mobile-optimization

Audit HTML pages for mobile viewport, inline style, and touch target issues.

Community
Basic