skills.rest
esteban389
esteban389COMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Codify iOS and Android UX best practices for mobile design decisions.

Updated Feb 16, 2026
Search Tags:#typography#performance#ux#dark-mode#touch-targets#color-system#mobile-design
One-click install
npx skills add https://github.com/esteban389/workout --skill mobile-design-esteban389
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/esteban389/workout/tree/main/.agents/skills/mobile-design
Command: npx skills add https://github.com/esteban389/workout --skill mobile-design-esteban389

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile teams often juggle scattered guidelines for mobile UX, accessibility, and platform conventions. This Skill consolidates mobile design thinking into a single, actionable framework to improve consistency, performance, and usability across iOS and Android.

Core Features & Use Cases

  • A comprehensive reference covering touch interaction, thumb-zone design, typography, color systems, navigation, and performance best practices.
  • Decision trees, design commitments, and pre-work checklists to guide ideation, prototyping, and implementation with platform-aware defaults.
  • Real-world scenarios like crafting thumb-friendly primary actions, supporting dark mode, and ensuring accessible typography across devices.

Quick Start

Review the mobile-design-thinking.md and touch-psychology.md to begin applying core mobile UX principles to your project.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
What is mobile-first design and how does it handle iOS and Android conventions?▼

Mobile UX design uses thumb-zone design to place primary actions within easy reach of a user's thumb on mobile screens. This approach ensures touch targets are accessible without awkward hand stretching, improving usability for one-handed navigation across iOS and Android devices.

How do I design accessible typography and color systems for dark mode?▼

To design accessible typography and color systems for dark mode, apply platform-aware defaults and contrast constraints. This framework provides reference materials to ensure readable text scaling and accessible color choices across different mobile devices and lighting conditions.

What's the best way to guide mobile navigation and touch target design from ideation to implementation?▼

Yes, you can apply mobile UX principles to existing projects using this framework's validation workflows and design commitments. It provides actionable reference materials to audit and improve current touch interaction, performance, and accessibility without requiring a full redesign.

Does this mobile UX framework support both iOS and Android platform constraints?▼

Yes, this mobile UX framework supports both iOS and Android platform constraints. It uses frontmatter metadata to enforce platform-aware defaults, ensuring your design decisions for navigation, typography, and performance align with specific operating system conventions.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
egorfedorovegorfedorov
39

ui-slot-ux-designer

Define and validate slot game UI/UX contracts for desktop and mobile.

Community
Advanced
tanaka-mambingetanaka-mambinge

flutter-improving-accessibility

Configure Flutter apps with semantics annotations and accessibility guidelines.

Community
Intermediate
akobryan1akobryan1
1

ui-styling

Generate React components styled with Tailwind CSS for web apps.

Community
Intermediate