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

qa-detect-ux-actions

Detect action-button UX defects via browser-side DOM evaluation.

Updated May 22, 2026
Search Tags:#usability#forms#browser testing#buttons#ux#visual hierarchy#cta
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-actions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-ux-actions
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-ux-actions
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-actions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds high-impact action-button UX failures that confuse users, increase misclicks, and hide important actions such as save, submit, delete, and continue.

Core Features & Use Cases

  • Destructive action safety: Detects delete/remove actions that lack a clear confirmation pattern.
  • Visual hierarchy checks: Flags screens with too many primary-looking CTAs or destructive and confirmatory buttons placed too close together.
  • Usability and discoverability: Identifies disabled buttons with no explanation, primary actions below the fold, and forms that appear to have no visible submit affordance.
  • Use case: Review a settings page, admin table, or multi-step form and catch action-layout issues that can cause data loss or prevent users from completing tasks.

Quick Start

Use the qa-detect-ux-actions skill to scan the current page for destructive action risks, unclear disabled buttons, and CTA layout problems.

Frequently Asked Questions about qa-detect-ux-actions

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

FAQPage Schema
How do I check for missing confirmation dialogs on destructive action buttons?▼

Visual hierarchy checks flag screens with too many primary-looking CTAs or destructive and confirmatory buttons placed too close together. This DOM evaluation catches CTA layout problems that cause user confusion and misclicks.

Why does my form have no visible submit button affordance?▼

Disabled buttons with no explanation are flagged because they create discoverability and usability roadblocks. The DOM evaluation detects buttons lacking contextual hints, ensuring users understand why an action is currently unavailable.

Can I scan an admin table for action-button UX defects automatically?▼

Scanning interactive screens like toolbars and floating actions requires a browser-side DOM evaluation of button labels, states, spacing, and viewport position. This approach surfaces confirmation, hierarchy, and discoverability issues automatically.

What is the best way to find primary actions placed below the fold?▼

To detect primary actions below the fold, evaluate the viewport position of submit and save buttons via DOM inspection. This identifies hidden affordances that prevent users from completing key tasks efficiently.

Related Skills

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

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate
sadie100sadie100

implement

Implement tasks from PRDs or issue trackers with TDD and code coverage.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
bdbchbdbch
2

browser-test

Execute manual browser tests in Chrome with navigation, form interactions, and state verification.

Community
Intermediate