Skills
.Work. You
Rest

Dashboard Mobile Patterns

Community

Mobile dashboard patterns for responsive UX.

Design & Creative#testing#css#dashboard#responsive-design#pattern-library#ux-patterns#mobile-patterns
AuthorJDL440
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Dashboard usability often deteriorates on mobile due to dense layouts and non-collapsible navigation, making key actions hard to reach. This skill provides a mobile-first pattern library to ensure dashboards adapt gracefully to small screens and maintain accessible interactions.

Core Features & Use Cases

  • Shared Shell with a responsive header and a toggleable navigation to conserve space on phones.
  • Breakpoint Cascade with clearly defined 320px, 480px, 768px, and 1024px+ breakpoints to maintain consistent layouts across devices.
  • Mobile-First Components that enforce touch-friendly sizing, clear tap targets, and scalable UI blocks.
  • Table-to-Card Transform to convert wide data tables into card-like surfaces on small viewports, reducing horizontal overflow.
  • Sidebar disclosure patterns to collapse side panels into expandable sections on mobile.
  • Single-column detail layouts for routes that do not require a persistent sidebar, maximizing content area.

Quick Start

Apply these mobile patterns to a dashboard route to enable a hamburger menu, responsive grid, and card-based data displays.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Dashboard Mobile Patterns
Download link: https://github.com/JDL440/nfl-eval/archive/main.zip#dashboard-mobile-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.