Will these tests work for Android-specific patterns?

The skill is currently optimized for iOS/Apple standards, which are often the strictest, but many checks (like touch target size and horizontal overflow) are universal best practices for all mobile devices.

What mobile standards does this skill enforce?

The skill primarily checks against Apple's Human Interface Guidelines (HIG) and common mobile-first design principles, focusing on touch target sizes, navigation placement, and gesture-friendly layouts.

Can I customize which UX patterns are flagged as failures?

Yes, the generated tests are fully customizable. You can set specific patterns to 'warn' instead of 'fail' or whitelist certain elements that require non-standard patterns for specific business reasons.

Does this skill require an existing Playwright setup?

While it works best with an existing Playwright configuration, the skill includes a workflow to help you initialize and configure Playwright for mobile emulation if it is missing.

Mobile UX CI Guard

Name: Mobile UX CI Guard
Author: neonwatty

byneonwatty

Mobile Development

Automates the detection of iOS and mobile UX anti-patterns using Playwright to ensure high-quality, accessible mobile web experiences in CI pipelines.

概要

The Mobile UX CI Guard skill empowers developers to shift mobile quality assurance left by automatically generating Playwright tests that detect common design regressions. Instead of just testing functionality, this skill enforces mobile-specific standards such as Apple Human Interface Guidelines (HIG) touch targets, native-like navigation patterns, and layout integrity. It helps teams identify 'working but wrong' UI elements like hamburger menus on iOS, small touch targets, and horizontal overflows before they reach production, ensuring web applications and PWAs feel native on mobile devices.

主な機能

Enforces Apple HIG-compliant touch target sizes (44x44pt) for all interactive elements
Generates ready-to-use CI workflows for GitHub Actions and Playwright environments
Identifies layout issues including horizontal overflow and missing safe area insets
Detects navigation anti-patterns like hamburger menus and FABs on iOS devices
Scans for component mismatches like native selects versus mobile picker wheels
0 GitHub stars

ユースケース

Preventing mobile UX regressions in high-velocity frontend teams using automated CI checks
Auditing existing web projects to identify and fix mobile accessibility and touch-readiness issues
Verifying PWA or web app compliance with iOS Human Interface Guidelines during development

概要

主な機能

Enforces Apple HIG-compliant touch target sizes (44x44pt) for all interactive elements
Generates ready-to-use CI workflows for GitHub Actions and Playwright environments
Identifies layout issues including horizontal overflow and missing safe area insets
Detects navigation anti-patterns like hamburger menus and FABs on iOS devices
Scans for component mismatches like native selects versus mobile picker wheels
0 GitHub stars

ユースケース

Preventing mobile UX regressions in high-velocity frontend teams using automated CI checks
Auditing existing web projects to identify and fix mobile accessibility and touch-readiness issues
Verifying PWA or web app compliance with iOS Human Interface Guidelines during development