skills.rest
TheViziusGroup
TheViziusGroupOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-ux-and-patterns

Applies mobile UI/UX standards, accessibility rules, and offline-first architecture patterns to app development.

1|Updated Aug 10, 2026
Search Tags:#accessibility#material design#wcag#react native#mvvm#offline-first#mobile ux
One-click install
npx skills add https://github.com/TheViziusGroup/vibe-engineering-skills --skill mobile-ux-and-patterns-theviziusgroup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ux-and-patterns
Source: https://github.com/TheViziusGroup/vibe-engineering-skills/tree/main/plugins/mobile-development/skills/mobile-ux-and-patterns
Command: npx skills add https://github.com/TheViziusGroup/vibe-engineering-skills --skill mobile-ux-and-patterns-theviziusgroup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile teams must juggle platform design guidelines, legally mandated accessibility requirements, and complex offline-first data architecture, and getting any of these wrong leads to app store rejections, regulatory fines, or data loss. ## Core Features & Use Cases - Platform UI Standards: Enforces Apple HIG (44pt hit targets, Dynamic Type) and Material Design 3 (48dp touch targets, dynamic color), plus dark mode, design tokens, and optimistic-UI states. - Accessibility Compliance: Covers WCAG 2.2 Level AA (including the new 24×24px target size rule) and the EU Accessibility Act enforced since June 2025, with penalties up to €1,000,000 in Spain and criminal liability in Ireland. - Architecture & Persistence Guidance: Provides Clean Architecture, MVVM/MVI, Repository pattern, offline-first sync with LWW/CRDT conflict resolution, and concrete library guidance for MMKV, WatermelonDB, Realm (EOL), and SQLCipher/op-sqlite/expo-sqlite. - Use Case: When building a React Native app that must work offline and pass EU accessibility audits, use this Skill to choose the right persistence library, design compliant touch targets, and set up push notifications via Azure Notification Hubs with FCM v1. ## Quick Start Review my React Native app's settings screen for WCAG 2.2 AA compliance and recommend an offline-first persistence library.

Frequently Asked Questions about mobile-ux-and-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my mobile app WCAG 2.2 AA compliant?▼

WCAG 2.2 AA requires a minimum 24×24 CSS px target size (criterion 2.5.8, new in October 2023) and single-pointer alternatives to swipe or pinch gestures (2.5.1). Apple HIG recommends 44pt and Material Design 48×48dp targets, which exceed the AA minimum.

MMKV vs WatermelonDB for React Native offline storage?▼

MMKV is a synchronous key-value store roughly 30x faster than AsyncStorage with built-in AES encryption, best for small to medium data. WatermelonDB is SQLite-backed, lazy-loaded, and observable with two-phase sync, scaling to tens of thousands of records.

Is Realm still safe to use for new mobile projects?▼

No. MongoDB deprecated Realm in September 2024 and Atlas Device Sync reached end-of-life on September 30, 2025. The local Realm database remains open source but maintenance-only, so new projects should not adopt Realm Sync.

Does the EU Accessibility Act apply to mobile apps?▼

Yes. Directive (EU) 2019/882 has been enforced since June 28, 2025. Penalties include up to €100,000 per violation under Germany's BFSG, up to €1,000,000 in Spain, and criminal liability with imprisonment in Ireland.

How do I encrypt SQLite in React Native for free?▼

The official Zetetic SQLCipher React Native package is Enterprise-only. Free alternatives are op-sqlite with the sqlcipher option enabled, or expo-sqlite with the useSQLCipher config plugin and a prebuild, neither of which works in Expo Go.

Why did my FCM push notifications stop working?▼

The FCM legacy API was retired in June 2024, so you must migrate to FCM v1. APNs also requires token-based authentication, and both can be unified behind Azure Notification Hubs with tags and templates.

Related Skills

Explore More Software Engineering Skills→
beelabstudiobeelabstudio

ux-ui-designer

Produces wireframes, design systems, accessibility specs, and developer handoff documentation before UI coding.

Official
Intermediate
dimitriRemoivilledimitriRemoiville
1

android-security

Enforce keystore-backed keys, encrypted storage, and network security in Android apps.

Community
Advanced
coco-decoco-de

app-security

Implement secure storage, certificate pinning, code obfuscation, and integrity checks in Flutter apps.

Official
Advanced
vuminhieuvuminhieu

mobile-development

Design iOS and Android mobile architectures with MVVM and Clean Architecture.

Community
Intermediate