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

qa-detect-ux-affordance

Detect UI affordance defects via DOM inspection and computed-style checks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds user interface affordance failures that make interactive elements hard to notice or use, such as clickable items that do not look clickable, controls hidden behind hover states, and inputs or links with weak visual cues.

Core Features & Use Cases

  • Clickable affordance checks: Detects cursor styles and styling patterns that fail to signal interactivity.
  • Keyboard accessibility checks: Flags focusable elements that lack visible focus indicators.
  • Touch and mobile usability checks: Finds controls that only appear on hover and are therefore unreachable on touch devices.
  • Form and layout cues: Identifies text inputs that visually blend into surrounding content and ambiguous nested click targets.
  • Use case: Review a web app page and surface the specific elements most likely to confuse users because they do not read as interactive.

Quick Start

Ask the QA agent to scan the current page for affordance issues and report clickable elements, missing focus states, hover-only controls, and invisible inputs.

Frequently Asked Questions about qa-detect-ux-affordance

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

FAQPage Schema
How do I detect clickable elements that don't look clickable on a web page?▼

You can detect invisible clickable elements by running an affordance scan that inspects DOM computed styles for cursor types, link styling, and borders. This surfaces interactive controls that fail to visually signal interactivity to users.

How do I check for missing focus states on keyboard accessible inputs?▼

Checking for missing focus states involves evaluating focusable DOM elements for visible focus indicators. This identifies inputs and controls lacking the visual cues necessary for keyboard navigation accessibility.

Why do hover-only controls cause touch and mobile usability issues?▼

Hover-only controls cause mobile usability issues because hover-revealed actions are unreachable on touch devices. Scanning for hover-only disclosure patterns identifies interactive elements that mobile users cannot interact with.

What is a UI affordance defect in web testing?▼

A UI affordance defect in web testing is an interactive element that is hard to discover or use, such as ambiguous nested click targets or text inputs that visually blend into surrounding content. These defects make clickable elements confusing.

Can I scan a web app page for ambiguous nested click targets and weak visual cues?▼

Yes, you can scan a web app page for ambiguous nested click targets and weak visual cues using browser-side DOM inspection. This evaluates computed styles to surface interactive elements most likely to confuse users.

Does this affordance check work on both web pages and app screens?▼

Yes, affordance checks apply to both web pages and app screens containing buttons, links, and focusable controls. The DOM inspection evaluates cursor styling, hover-only disclosure, and focus visibility across these interactive interfaces.

Related Skills

Explore More Design & Creative Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-page-header

Detect page header hierarchy and breadcrumb layout problems in rendered web interfaces.

Community
Intermediate
jiikkojiikko
2

style-review

Analyzes CSS/UI code for WCAG compliance and contrast across light and dark themes.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced