Run any Skill in Manus with one click

mobile-app-design-mastery

Production-grade mobile application UI design based on Refactoring UI principles. ALWAYS activate for: Flutter app, mobile app, iOS app, Android app, mobile UI, app screens, mobile navigation, bottom sheets, mobile forms, touch targets, mobile typography, app color scheme, mobile cards, list views, mobile modals, tab bars, app bars, floating action buttons. Provides mobile design workflow, touch-optimized spacing, mobile typography scale, platform-aware patterns. Turkish: mobil uygulama tasarımı, Flutter tasarım, uygulama arayüzü, mobil UI, telefon uygulaması, Android tasarım, iOS tasarım. English: app design, mobile interface, touch-friendly, native feel, mobile UX.

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/anilcancakir/my-claude-code --skill mobile-app-design-mastery

Copy and paste this command into Claude Code to install the skill

Source

anilcancakir/my-claude-code

Stars4

Forks0

UpdatedJanuary 26, 2026 at 13:51

File Explorer

7 files

SKILL.md

readonly

name

mobile-app-design-mastery

description

Mobile App Design Mastery

Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.

Core Mobile Design Workflow

1. Start with a Screen, Not a Shell

Design the core functionality of a single screen first
Don't start with navigation, tab bars, or app chrome
Work in greyscale first—add color after hierarchy is clear
Design for the primary device size, then adapt

2. Establish Mobile Systems

Spacing Scale (dp/logical pixels):

Token	Size	Use Case
xs	4	Micro gaps, icon padding
sm	8	Tight, within components
md	12	Related elements
base	16	Standard padding
lg	24	Between sections
xl	32	Major separation
2xl	48	Screen margins on tablets

Touch Targets:

Platform	Minimum Size
iOS	44×44 pt
Android	48×48 dp
Comfortable	56×56

Type Scale (sp/pt):

Size	Use Case
11-12	Captions, labels
14	Body text, default
16	Emphasized body
18-20	Subheadings
24	Screen titles
28-34	Large titles (iOS style)

Shadow/Elevation Scale (dp):

Level	Elevation	Use Case
0	0	Flat surfaces
1	1-2	Cards, tiles
2	4	Raised buttons, app bar
3	8	Bottom sheets, dialogs
4	16	Navigation drawers
5	24	Modals

3. Build Mobile Hierarchy

Mobile screens have limited space—hierarchy is even more critical.

Primary: Key action/content (one per screen)
Secondary: Supporting info (visible but not competing)
Tertiary: Metadata, timestamps (smallest/lightest)

Key principles:

Size matters more on mobile—but don't overdo it
Use weight and color before increasing size
Emphasize by de-emphasizing competing elements
Icons need softer colors to balance with text

4. Design for Touch

Generous touch targets (minimum 44pt/48dp)
Adequate spacing between interactive elements
Visual feedback on press (ripples, scale, opacity)
Swipe actions for common operations

5. Apply Platform-Aware Depth

iOS: Subtle shadows, blur/frosted glass, less elevation
Android: Material elevation system, layered surfaces
Use depth to indicate interactivity and focus

Mobile Anti-Patterns

NEVER do:

Touch targets smaller than 44×44
Text smaller than 11sp (illegible)
Grey text on colored backgrounds
Ambiguous spacing between groups
Full-width buttons edge-to-edge without padding
Relying on color alone for meaning
Ignoring safe areas (notch, home indicator)

Reference Files

Topic	File	When to Read
Visual hierarchy, labels, emphasis	mobile-hierarchy.md	Balancing element importance
Spacing, touch targets, layout	mobile-spacing.md	Layout decisions
Typography, fonts, readability	mobile-typography.md	Text styling
Color, themes, dark mode	mobile-color.md	Color system
Shadows, elevation, layers	mobile-depth.md	Adding depth
Components, navigation, patterns	mobile-patterns.md	Platform-specific patterns

More from this repository

same repository

flutter-design

anilcancakir/my-claude-code

Flutter/Dart implementation patterns for Refactoring UI principles. COMPANION skill for mobile-app-design-mastery. ALWAYS activate for: Flutter theming, ThemeData, ColorScheme, TextTheme, BoxDecoration, Material 3, Flutter shadows, Flutter spacing, Flutter typography, Flutter dark mode, Flutter components, Flutter styling, Dart UI, Widget decoration. Provides ThemeData setup, color schemes, typography styles, spacing utilities, decoration patterns. Turkish: Flutter tema, Flutter renk, Flutter tasarım, Dart UI, widget stil. English: Flutter theming, Material Design, Flutter styling, widget decoration.

2026-01-264

laravel-api-architect

anilcancakir/my-claude-code

Laravel API development, REST endpoints, JSON responses, Sanctum/Passport authentication, Service-Repository pattern. ALWAYS activate when: working with routes/api.php, app/Http/Controllers/Api/, API endpoints, token authentication, mobile backend, API Resource, JsonResponse, FormRequest, Policy. Triggers on: endpoint çalışmıyor, API hatası, API error, 401 unauthorized, 403 forbidden, 422 validation, token expired, login endpoint, register API, CRUD operations, postman, fetch request, axios, mobile backend, webhook, OAuth, JWT, auth guard, rate limit, throttle, response format, pagination API.

2026-01-264

laravel-fullstack

anilcancakir/my-claude-code

Laravel Blade views, Alpine.js, Vue.js integration, TailwindCSS styling, Vite assets. ALWAYS activate when: working with resources/views/, Blade components, frontend forms, UI elements, modals, dropdowns, forms. Triggers on: görünmüyor, gösterilmiyor, sayfa yüklenmiyor, sayfa açılmıyor, form çalışmıyor, form gönderilmiyor, buton çalışmıyor, button not working, style bozuk, CSS bozuk, renk yanlış, color wrong, responsive bozuk, mobile görünüm, dark mode çalışmıyor, layout bozuk, component çalışmıyor, modal açılmıyor, dropdown çalışmıyor, asset yüklenmiyor, image not loading, JS error, JavaScript hatası.

2026-01-264

laravel-infrastructure

anilcancakir/my-claude-code

Laravel Horizon queues, Octane performance, Reverb WebSockets, Redis caching, PostgreSQL database. ALWAYS activate when: working with queue jobs, cache, sessions, broadcasting, database performance, supervisor, worker. Triggers on: job failed, queue stuck, cache not clearing, Redis connection, broadcast event, WebSocket, real-time, Horizon dashboard, Octane memory leak, slow query, N+1, database timeout, connection refused, kuyruk çalışmıyor, cache temizlenmiyor, job başarısız, worker durdu, broadcast çalışmıyor, real-time gelmiyor.

2026-01-264

laravel-packages

anilcancakir/my-claude-code

Laravel Filament v4 admin panel, Debugbar development, SEOTools, third-party packages. ALWAYS activate when: working with admin panel, Filament resources, forms, tables, SEO meta tags, debugging. Triggers on: Filament form field, admin CRUD, resource table, action button, widget, Debugbar query log, N+1 detected, SEO title, meta description, OpenGraph, sitemap, admin paneli, debugbar göstermiyor, SEO ayarları, meta tag, Filament çalışmıyor, admin sayfası, resource oluşturma.

2026-01-264

laravel-testing

anilcancakir/my-claude-code

Laravel testing with PHPUnit and Dusk, feature tests, unit tests, browser tests, factories, assertions. ALWAYS activate when: writing tests, tests/Feature/, tests/Unit/, tests/Browser/, running php artisan test, test coverage, TDD. Triggers on: test failed, assertion error, factory, seeder, RefreshDatabase, actingAs, mock, Dusk element not found, browser test, screenshot, CI/CD testing, test çalışmıyor, coverage düşük, test hatası, assertion failed, mock çalışmıyor.

2026-01-264

Source

anilcancakir

anilcancakir/my-claude-code

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations27-1024L4

name

mobile-app-design-mastery

description

Mobile App Design Mastery

Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.

Core Mobile Design Workflow

1. Start with a Screen, Not a Shell

Design the core functionality of a single screen first
Don't start with navigation, tab bars, or app chrome
Work in greyscale first—add color after hierarchy is clear
Design for the primary device size, then adapt

2. Establish Mobile Systems

Spacing Scale (dp/logical pixels):

Token	Size	Use Case
xs	4	Micro gaps, icon padding
sm	8	Tight, within components
md	12	Related elements
base	16	Standard padding
lg	24	Between sections
xl	32	Major separation
2xl	48	Screen margins on tablets

Touch Targets:

Platform	Minimum Size
iOS	44×44 pt
Android	48×48 dp
Comfortable	56×56

Type Scale (sp/pt):

Size	Use Case
11-12	Captions, labels
14	Body text, default
16	Emphasized body
18-20	Subheadings
24	Screen titles
28-34	Large titles (iOS style)

Shadow/Elevation Scale (dp):

Level	Elevation	Use Case
0	0	Flat surfaces
1	1-2	Cards, tiles
2	4	Raised buttons, app bar
3	8	Bottom sheets, dialogs
4	16	Navigation drawers
5	24	Modals

3. Build Mobile Hierarchy

Mobile screens have limited space—hierarchy is even more critical.

Primary: Key action/content (one per screen)
Secondary: Supporting info (visible but not competing)
Tertiary: Metadata, timestamps (smallest/lightest)

Key principles:

Size matters more on mobile—but don't overdo it
Use weight and color before increasing size
Emphasize by de-emphasizing competing elements
Icons need softer colors to balance with text

4. Design for Touch

Generous touch targets (minimum 44pt/48dp)
Adequate spacing between interactive elements
Visual feedback on press (ripples, scale, opacity)
Swipe actions for common operations

5. Apply Platform-Aware Depth

iOS: Subtle shadows, blur/frosted glass, less elevation
Android: Material elevation system, layered surfaces
Use depth to indicate interactivity and focus

Mobile Anti-Patterns

NEVER do:

Touch targets smaller than 44×44
Text smaller than 11sp (illegible)
Grey text on colored backgrounds
Ambiguous spacing between groups
Full-width buttons edge-to-edge without padding
Relying on color alone for meaning
Ignoring safe areas (notch, home indicator)

Reference Files

Topic	File	When to Read
Visual hierarchy, labels, emphasis	mobile-hierarchy.md	Balancing element importance
Spacing, touch targets, layout	mobile-spacing.md	Layout decisions
Typography, fonts, readability	mobile-typography.md	Text styling
Color, themes, dark mode	mobile-color.md	Color system
Shadows, elevation, layers	mobile-depth.md	Adding depth
Components, navigation, patterns	mobile-patterns.md	Platform-specific patterns