ui-test-ux-quality

What problem does it solve?

This Skill addresses the gap where standard E2E tests verify only final state correctness, overlooking crucial user experience aspects like visual glitches, performance lags, and intermediate incorrect states during operations.

Core Features & Use Cases

• Negative Assertions: Detects and prevents undesirable UI states from appearing during user interactions.
• Performance Budgets: Enforces strict time limits for UI operations to ensure responsiveness.
• Visual Stability: Catches layout shifts and element jumps that disrupt the user flow.
• Render Stability: Prevents UI flicker by ensuring elements mount and unmount predictably.
• State Stability: Verifies that data mutations persist correctly over time, guarding against race conditions.
• Mutual Exclusivity: Ensures UI elements appear in only one expected location, preventing rendering conflicts.
• Use Case: When performing a drag-and-drop operation in a calendar application, this Skill ensures the event doesn't briefly appear in an incorrect row, completes within 150ms, and doesn't cause the calendar grid to shift unexpectedly.

Quick Start

Use the ui-test-ux-quality skill to assert that the calendar grid does not shift during event loading.