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

0•

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.

Key Features

01Enforces Apple HIG-compliant touch target sizes (44x44pt) for all interactive elements

02Generates ready-to-use CI workflows for GitHub Actions and Playwright environments

03Identifies layout issues including horizontal overflow and missing safe area insets

04Detects navigation anti-patterns like hamburger menus and FABs on iOS devices

05Scans for component mismatches like native selects versus mobile picker wheels

060 GitHub stars

Use Cases

01Preventing mobile UX regressions in high-velocity frontend teams using automated CI checks

02Auditing existing web projects to identify and fix mobile accessibility and touch-readiness issues

03Verifying PWA or web app compliance with iOS Human Interface Guidelines during development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add neonwatty/claude-skills mobile-ux-ci

For use in Claude.ai and ChatGPT

Download Skill