Skills
.Work. You
Rest

mobile-native-ui-patterns

Community

Craft native mobile web experiences.

Design & Creative#ui#mobile#pwa#ux#touch#drawer#vaul
Authorionmidori
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables the creation of web interfaces that mimic the look, feel, and interaction patterns of native mobile applications, enhancing user experience for Progressive Web Apps (PWAs).

Core Features & Use Cases

  • Drawer Implementation: Utilizes Vaul to create native-like drawers (bottom sheets, side menus) with momentum scrolling and drag physics.
  • Touch Optimization: Disables default browser behaviors (like text selection and zoom) and implements CSS hardening for a smoother touch experience.
  • Haptic Feedback: Integrates vibration for key user interactions, providing physical confirmation.
  • Safe Area Handling: Respects device notches and home indicators using CSS env(safe-area-inset).
  • Use Case: Building a mobile e-commerce app's navigation menu or a filter panel that slides up from the bottom of the screen, behaving just like it would on a native iOS or Android app.

Quick Start

Implement a mobile menu using Vaul drawers and optimize touch interactions for a PWA.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mobile-native-ui-patterns
Download link: https://github.com/ionmidori/SYDBioedilizia/archive/main.zip#mobile-native-ui-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.