skills.rest
adelpro
adelproCOMMUNITY
Explore all skills by this author →
Website𝕏@adelproGitHub

mobile-design

Audit mobile apps against touch-first UX and platform-specific design guidelines.

34|29|Updated Jul 14, 2025
Search Tags:#performance#react-native#flutter#ux#design-system#touch-targets#mobile-design
One-click install
npx skills add https://github.com/adelpro/open-tarteel --skill mobile-design-adelpro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/adelpro/open-tarteel/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/adelpro/open-tarteel --skill mobile-design-adelpro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile Design System provides a comprehensive, touch-first blueprint to reduce AI default biases and guide teams in building responsive, accessible mobile apps across iOS, Android, React Native, and Flutter.

Core Features & Use Cases

  • Philosophy and core principles: touch-first, battery-conscious, platform-respecting offline-capable design.
  • Reference-driven guidance: mobile-design-thinking.md, touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md, mobile-navigation.md, mobile-typography.md, mobile-color-system.md, decision-trees.md.
  • Checklists and patterns: navigation, typography, color system, offline strategies, and accessibility to maintain consistency and quality in mobile apps.
  • Use cases: ensuring identical UX where needed, auditing mobile code for best practices, and guiding platform-specific implementations for RN/Flutter/native apps.

Quick Start

Review the design thinking and psychology references, then apply the mobile-audit checklist to validate touch targets, navigation, and performance.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I ensure my React Native app follows mobile UX guidelines for touch targets and thumb zones?▼

To ensure your React Native app follows mobile UX guidelines, apply touch-first principles by sizing touch targets correctly and placing primary navigation within the thumb-zone. This mobile design system provides strict validation checks to enforce these accessibility and ergonomic standards.

What's the best way to audit mobile design performance and accessibility before production?▼

The best way to audit mobile design performance is to run automated checks against established mobile performance best practices. This system provides reference files and runnable audits that validate touch targets, responsive navigation, and battery-conscious patterns.

Does this mobile design system work for both Flutter and native iOS or Android development?▼

Yes, this mobile design system works for Flutter and native iOS or Android development by providing platform-specific patterns. It consolidates guidelines to ensure consistent, accessible touch-first UX across all major mobile operating environments.

How do I implement a consistent color system and dark mode for cross-platform mobile apps?▼

To implement a consistent color system and dark mode for cross-platform mobile apps, reference the platform-respecting guidelines and color system checklists provided. This ensures visual consistency and accessibility across iOS, Android, and cross-platform frameworks.

Why do my mobile app's touch targets fail accessibility checks and how can I fix them?▼

Mobile app touch targets fail accessibility checks when they violate minimum sizing and spacing requirements for touch-first UX. You can fix them by applying the touch psychology references and using the system's validation gates to ensure compliance.

Can I use this system to establish offline-capable mobile navigation and design patterns?▼

Yes, you can use this system to establish offline-capable mobile navigation and design patterns. It includes specific philosophical guidelines and checklists for offline strategies to help teams build battery-conscious, offline-ready applications.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

premium-ui-systems

Codify design tokens for spacing, radii, color, and typography into reusable UI guidelines.

Community
Advanced
udsy19udsy19

ci-cd-and-automation

Automate CI/CD pipeline setup with linting, testing, and security checks.

Community
Advanced
AmidVoshakulAmidVoshakul

mobile-design

Evaluate mobile project feasibility and enforce platform-specific UI/UX patterns.

Community
Advanced
lchenriquelchenrique

mobile-design

Audit mobile apps for thumb-friendly, accessible, and battery-aware UX patterns.

Community
Advanced