Make Web Apps Feel Native: Emil Kowalski Ships mobile-native and break-ui Skills

Web applications running inside mobile browsers often suffer from subtle platform differences that immediately betray their web origins when compared against installed native applications. Sticky hover states on touchscreens, 300ms tap latencies, 100vh viewport height jumping, and sudden unwanted zooming upon input field focus are persistent pain points for frontend teams. On October 4, 2026, design engineer Emil Kowalski released two specialized agent skills—/mobile-native and /break-ui—to his public open-source skills repository (emilkowalski/skills) for AI coding agents such as Claude Code and Codex.

Image source: https://github.com/emilkowalski/skills

These newly added skills are built as modular agent capabilities that can be invoked during automated coding and review sessions. Rather than forcing developers to repeatedly write extensive design prompts or manually audit every viewport quirk, the skills instruct AI coding agents to inspect project stylesheets and metadata, systematically rectifying platform-level discrepancies to deliver native-grade responsiveness.

Eliminating Non-Native Web Tells with '/mobile-native'

/mobile-native is a focused fix-it skill engineered to do one specific job: take a web application that feels like a website on a mobile device and eliminate the small platform-level tells that give it away.

According to the author's design engineering approach, the difference between an installed feel and an embedded webpage often boils down to a handful of CSS declarations and viewport meta tags across touch, scroll, and safe areas. /mobile-native systematically audits and addresses these platform quirks:

• Disabling Sticky Hover on Touch: On touchscreen devices without mouse pointers, tapping an interactive element often leaves persistent hover styles attached until another area is touched. The skill disables these sticky states.
• Preventing 300ms Tap Delays: Mobile browsers sometimes delay tap events to check for subsequent double-taps. The skill injects touch-action: manipulation across interactive controls to ensure instantaneous touch response.
• 100vh Viewport Height Correction: When mobile browser address bars collapse or expand during scrolling, standard 100vh units cause layout popping and content clipping. The skill normalizes viewports using dynamic viewport units (dvh) or reliable CSS custom property measurements.
• Blocking Unintended Input Zoom: Browsers like iOS Safari automatically zoom in on form fields if the text size is smaller than 16px, disrupting the visual layout. The skill ensures form inputs maintain a minimum 16px baseline on mobile viewports.
• Virtual Keyboard and Input Ergonomics: The skill audits form elements to set context-aware attributes, including inputmode="numeric" for verification codes, inputmode="decimal" for currency inputs, dedicated email and telephone types, autocapitalize="none" and autocorrect="off" for credentials, and accurate enterkeyhint values.
• Handling Screen Notches and Safe Areas: It injects env(safe-area-inset-*) padding rules so that fixed headers, floating navigation bars, and bottom sheets never overlap camera cutouts or home indicator bars.
• Mitigating Pull-to-Refresh Collisions: The skill prevents mobile browser pull-to-refresh gestures from hijacking native-like interactions within bottom sheets or horizontal carousels.

Importantly, /mobile-native does not attempt to design animations (handled by animate), review motion curves (review-animations), or scaffold React Native mobile applications (animate-expo). It remains strictly focused on polishing the web platform foundation.

Stress-Testing Layout Fragility with '/break-ui'

During typical frontend development, designers and engineers test components using clean, idealized sample data, such as short names and predictable text strings. In production, however, unexpected data shapes frequently cause layout breakage and text overflow.

/break-ui acts as an automated stress-testing agent skill that injects pathological edge-case data into UI components to surface layout breaking points and immediately apply structural CSS fixes:

• Pathological Data Injection: The skill supplies extreme edge-case payloads, including abnormally long names, unusual email addresses, and long lists to test rendering limits.
• Layout Breakage Detection and Remediation: It detects where components fail under abnormal data loads and modifies the underlying styles and layout markup directly in source code to fix the issues.

By automating this edge-case audit within the agent workflow, teams can catch and resolve visual layout bugs before releasing code to production.

Installation Workflow, Agent Compatibility, and Best Practices

Developers can install Emil Kowalski's public skills directly into their local agent environments using standard npx skills commands:

# Install the mobile native UX polish skill
npx skills add https://github.com/emilkowalski/skills --skill mobile-native

# Install the UI edge-case stress testing skill
npx skills add emilkowalski/skills --skill break-ui

Once installed, the skills become executable via slash commands inside agent CLI sessions like Claude Code and Codex. When adopting these tools, developers should keep several operational best practices in mind:

First, maintain a clean Git working tree before running /break-ui. Because the skill actively edits stylesheets and layout markup to fix detected stress-test failures, running it on committed code allows developers to review the agent's proposed diff before merging changes.

Second, respect the scope boundaries of the public repository. Responding to community inquiries on X, Kowalski noted that students enrolled in his paid design engineering courses have access to specialized skills with deeper nuances tailored to bespoke interactive components. The public repository skills deliver robust, universal web platform standards intended for general production web apps.

Sources

• GitHub: emilkowalski/skills Repository
• X: Emil Kowalski Official Announcement
• skills.sh: mobile-native Agent Skill Directory