mobile-development

Adapt desktop base-joy UIs to mobile with touch interactions and responsive layouts.

Updated Aug 23, 2026

Search Tags:#patterns #mobile #responsive #touch #drawer

Ready to run

npx skills add https://github.com/sernstberger/base-joy --skill mobile-development-sernstberger

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-development
Source: https://github.com/sernstberger/base-joy/tree/main/.claude/skills/mobile-development
Command: npx skills add https://github.com/sernstberger/base-joy --skill mobile-development-sernstberger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile development patterns for desktop-to-mobile adaptation, covering responsive layouts, touch considerations, and mobile-friendly interactions.

Core Features & Use Cases

Desktop → Mobile mapping (dialogs to bottom sheets, modals to full-screen)
Drawer bottom sheets and responsive CardGrid usage
Touch targets, swipe gestures, pull-to-refresh patterns
Responsive layouts with Tailwind-like patterns for mobile and desktop
Accessibility considerations for touch interactions

Quick Start

Apply bottom sheets for mobile dialogs, enable responsive columns, and ensure touch targets meet 44x44px minimum.

Frequently Asked Questions about mobile-development

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

FAQPage Schema

How do I adapt desktop UI layouts for mobile devices?▼

Desktop-to-mobile UI adaptation uses responsive layout patterns to transform desktop components into mobile-optimized versions—for example, converting dialogs to bottom sheets and modals to full-screen drawers. Apply Tailwind-like responsive patterns and ensure touch targets meet the 44×44 pixel minimum for accessibility.

What are best practices for touch interactions on mobile?▼

Touch interaction patterns include swipe-to-close, pull-to-refresh, and gesture-based navigation. Design touch targets at minimum 44×44 pixels, handle mobile keyboard display, and test responsive behavior across devices to ensure accessible and intuitive mobile experiences.

How do I implement responsive drawers and bottom sheets?▼

Responsive drawer patterns map desktop drawers to mobile bottom sheets and full-screen drawers depending on screen size. Use responsive column layouts for CardGrid, apply mobile-first breakpoints, and ensure touch-friendly interaction areas for gesture control.

Can I use base-joy components for mobile development?▼

Yes. Base-joy components support mobile adaptation through responsive layout mappings, accessible touch targets, and gesture interactions. Apply desktop-to-mobile patterns to transform components like dialogs and modals into mobile-friendly equivalents such as bottom sheets and full-screen overlays.

What accessibility considerations apply to mobile touch interactions?▼

Mobile accessibility requires touch targets of at least 44×44 pixels, clear gesture affordances, proper keyboard handling, and tested responsive behavior. Ensure all interactive elements meet touch-friendly sizing standards and support assistive technologies across device sizes.

How do I test responsive behavior across mobile and desktop?▼

Test responsive layouts by validating component behavior at multiple breakpoints, confirming touch targets meet 44×44 pixel minimums, and verifying gesture interactions like swipe-to-close and pull-to-refresh work correctly. Include keyboard handling and accessibility checks for mobile keyboards.