skills.rest
Leandelosantos
LeandelosantosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-design

Apply MUI v6 responsive breakpoints and touch targets to the Maestro Dashboard.

Updated Apr 4, 2026
Search Tags:#performance#dashboard#mobile#mui#responsive-design#touch-guidelines
One-click install
npx skills add https://github.com/Leandelosantos/huevos-point-maestro --skill mobile-design-leandelosantos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/Leandelosantos/huevos-point-maestro/tree/main/.claude/skills/mobile-design
Command: npx skills add https://github.com/Leandelosantos/huevos-point-maestro --skill mobile-design-leandelosantos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill codifies the mobile-first responsive requirements for the Maestro Dashboard so the superadmin can manage the entire control panel comfortably on phones with reliable layouts, accessible tables, and ergonomic touch zones.

Core Features & Use Cases

  • Breakpoints & Layouts: Prescribes MUI v6 breakpoints, sidebar behaviors, grid spans, and card sizing to keep the panel usable from xs through desktop while keeping tables and metric cards readable on small screens.
  • Touch & Interaction Psychology: Reinforces mobile touch targets, spacing, haptics, thumb-zone placement, and gesture alternatives so every interactive element feels natural and avoids AI anti-patterns.
  • Performance & Checklist Discipline: Emphasizes lazy loading, skeletons, mobile debugging, testing matrices, and checkpoint rituals to prevent janky experiences, while referencing mandatory documents before any design work.

Quick Start

Start by reviewing the referenced mobile-design-thinking.md and apply the specified breakpoints, touch targets, and responsive card rules to the Maestro Dashboard layout.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I make a React MUI dashboard responsive on mobile phones?▼

To make a React MUI dashboard responsive on mobile phones, apply MUI v6 breakpoints, collapsible sidebars, and responsive grid spans. This ensures the panel adapts from xs to desktop while keeping tables and metric cards readable on small screens.

What are the touch target guidelines for mobile responsive design in React?▼

Mobile responsive design in React requires enforced touch targets, spacing, haptics, and thumb-zone placement. Reinforcing mobile touch psychology ensures interactive elements feel natural and avoids AI anti-patterns.

Does the mobile-design skill work with MUI v6 for superadmin dashboards?▼

Yes, the mobile-design skill works with MUI v6 for superadmin dashboards. It applies platform-aware navigation behavior, responsive tables, and touch-first performance decisions specifically for React + MUI v6 dashboard work.

How do I prevent janky performance when displaying responsive tables on small screens?▼

To prevent janky performance with responsive tables on small screens, emphasize lazy loading, skeletons, and mobile debugging. Apply testing matrices and checkpoint rituals to validate touch-first performance decisions.

Why does my MUI dashboard layout break on small screens despite using breakpoints?▼

MUI dashboard layouts break on small screens when touch target spacing and platform-aware navigation behavior are ignored. Avoid anti-patterns by applying mandatory references, runtime scripts, and responsive card rules before executing mobile design choices.

Related Skills

Explore More Design & Creative Skills→
blencorpblencorp
101

mui

Provides MUI v7 styling and theming patterns via sx and components.

Official
Intermediate
verivendverivend

responsive-grid-view

Render responsive data tables that switch between AG Grid and mobile card lists.

Official
Intermediate
siriwatknpsiriwatknp
2.4k

build-app-layout

Create React application layouts with header, footer, content, and sidebar components.

Community
Intermediate
nccasianccasia

responsive-design

Implement container queries, fluid typography, CSS Grid, and mobile-first strategies.

Official
Intermediate