skills.rest
cbemister
cbemisterCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-patterns

Automate mobile navigation patterns and responsive grid layouts for UI projects.

Updated Feb 4, 2026
Search Tags:#navigation#responsive#bottom-nav#drawer#mobile-patterns#thumb-ergonomics
One-click install
npx skills add https://github.com/cbemister/claude-code-utils --skill mobile-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-patterns
Source: https://github.com/cbemister/claude-code-utils/tree/main/.claude/skills/mobile-patterns
Command: npx skills add https://github.com/cbemister/claude-code-utils --skill mobile-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the adoption of mobile-navigation patterns and responsive layouts to improve usability on small screens.

Core Features & Use Cases

  • Bottom navigation for thumb-friendly access to top-level sections
  • Drawer menus for scalable navigation with deeper hierarchies
  • Responsive grids with mobile-first breakpoints for fluid layouts
  • Component adaptations for mobile (cards to lists, modals to sheets)

Quick Start

Automatically convert desktop navigation to mobile-friendly patterns and apply bottom navigation, drawers, and responsive grids to the project.

Frequently Asked Questions about mobile-patterns

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

FAQPage Schema
How do I implement bottom navigation for thumb-friendly mobile access?▼

Bottom navigation for thumb-friendly access is implemented by automatically converting desktop navigation into mobile-friendly patterns, placing top-level sections within easy thumb reach on small screens.

What's the best way to add drawer menus for deeper mobile navigation hierarchies?▼

Drawer menus for deeper mobile navigation hierarchies are added by applying scalable navigation patterns that accommodate complex structures while maintaining usability on small screens.

How do I create responsive grids with mobile-first breakpoints for fluid layouts?▼

Responsive grids with mobile-first breakpoints are created by applying breakpoint-driven grid adaptation, ensuring layouts fluidly adjust across various device sizes.

Can I automatically adapt desktop UI components like modals and cards for mobile screens?▼

Yes, desktop UI components are automatically adapted for mobile screens by converting cards to lists and modals to sheets, ensuring interfaces remain usable on small displays.

Does mobile navigation pattern selection include safe-area awareness for notched devices?▼

Mobile navigation pattern selection includes safe-area awareness, ensuring that bottom navigation and drawer menus account for device notches and screen edges without obstructing interaction.

Related Skills

Explore More Software Engineering Skills→
bfree-trainerbfree-trainer
60

adapt

Adapts UI/UX designs across screen sizes using responsive techniques like CSS Grid and container queries.

Official
Intermediate
mahg-esmahg-es
3

responsive

Create mobile-first responsive layouts with CSS Grid and Flexbox.

Official
Intermediate
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
efekrbasefekrbas
41

material-design

Transform generic interfaces into Material Design layouts with consistent elevation and motion.

Community
Basic