This is the skill you want when you're building anything that needs to work well on a phone. It covers mobile-first CSS patterns, touch target sizing (48×48 minimum with proper spacing), thumb zone ergonomics, and gesture implementation with actual code examples. You'll find viewport configuration, safe area handling for notched iPhones, and swipeable component patterns in React and React Native. The approach is pragmatic: it acknowledges that mobile traffic often exceeds desktop and shows you how to start with the smallest screen and progressively enhance. Useful whether you're building a PWA, native app, or just trying to make your responsive site not feel like a desktop layout crammed into 375 pixels.

skills.sh installs
553
GitHub stars
63
last updated
Aug 21, 2026

Install

$ npx -y skills add manutej/luxor-claude-marketplace --skill mobile-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile Design Skill

When to Use This Skill

Use this skill when working on:

  • Mobile-First Web Applications: Building responsive websites that prioritize mobile user experience
  • Native Mobile Apps: Designing iOS or Android applications with platform-specific patterns
  • Progressive Web Apps (PWAs): Creating app-like experiences in the browser
  • Hybrid Mobile Applications: Developing cross-platform apps using React Native, Flutter, or similar frameworks
  • Responsive Design Systems: Creating components that adapt seamlessly across devices
  • Touch-First Interfaces: Designing for touchscreen interactions rather than mouse/keyboard
  • Mobile E-commerce: Building shopping experiences optimized for small screens
  • Mobile Dashboards: Adapting data-heavy interfaces for mobile consumption
  • Gesture-Based Interfaces: Implementing swipe, pinch, and other touch gestures
  • Accessibility Audits: Ensuring mobile interfaces meet accessibility standards

This skill helps you create mobile experiences that feel native, perform well, and delight users on smartphones and tablets.

Core Concepts

Mobile-First Design Philosophy

Sponsors

Details

Repository
github.com/manutej/luxor-claude-marketplace
Categories
Debugging, Mobile Development, Design & UI/UX
First seen
Jun 3, 2026

More from manutej/luxor-claude-marketplace

All 66

Recommended

More Debugging
1martinholovsky avatartaurimartinholovsky/claude-skills-generatorCross-platform desktop application framework combining Rust backend with web frontend, emphasizing security and performance553skills.sh installs
2mohitmishra786 avatarzig-build-systemmohitmishra786/low-level-dev-skillsZig build system skill for multi-file Zig projects. Use when writing or debugging build.zig files, adding executables or libraries, integrating C source files, 552skills.sh installs
3aj-geddes avatarcaching-strategyaj-geddes/useful-ai-promptsImplement efficient caching strategies using Redis, Memcached, CDN, and cache invalidation patterns. Use when optimizing application performance, reducing datab551skills.sh installs
4davila7 avatarreact-best-practicesdavila7/claude-code-templatesComprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when 550skills.sh installs
5denoland avatardeno-expertdenoland/skillsExpert-level Deno knowledge for code review, debugging, and best practice enforcement. Use when reviewing Deno code or answering advanced Deno questions.544skills.sh installs
6vintasoftware avatarcdrf-expertvintasoftware/django-ai-pluginsExpert guidance for Django REST Framework class-based views using Classy DRF (https://www.cdrf.co). Use when selecting or debugging APIView, GenericAPIView, con544skills.sh installs