Dashboard Mobile System-First

Audit dashboard pages for mobile layout failures and prescribe a shared responsive shell.

Updated Mar 13, 2026

Search Tags:#layout #dashboard #mobile #ux #ui-patterns #responsiveness #system-first

Ready to run

npx skills add https://github.com/JDL440/nfl-eval --skill dashboard-mobile-system-first

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Dashboard Mobile System-First
Source: https://github.com/JDL440/nfl-eval/tree/main/.squad/skills/dashboard-mobile-system-first
Command: npx skills add https://github.com/JDL440/nfl-eval --skill dashboard-mobile-system-first

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dashboards render poorly on small screens, causing information density and navigation to break. This Skill identifies and prescribes a shared mobile shell and primitives to restore a consistent mobile experience across pages.

Core Features & Use Cases

Audit the shared shell and header for mobile breakpoints and ensure layout collapses gracefully
Separate must-be-mobile-native components (navigation, action clusters, filter controls) from content that can fallback to scroll/overflow
Provide a system-wide sequence of fixes to normalize mobile layouts across primary workflow pages and admin pages
Document common primitives and CSS/layout contracts to enable rapid adoption

Quick Start

Audit a dashboard page to surface mobile-layout issues and implement the shared mobile shell system.

Frequently Asked Questions about Dashboard Mobile System-First

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

FAQPage Schema

Why does my dashboard layout break on mobile screens?▼

Dashboard layouts break on mobile screens due to high information density and ungraceful breakpoint collapses. Auditing the shared shell and separating mobile-native navigation components from scroll-fallback content restores the responsive UX.

How do I audit a dashboard page for mobile UX failures?▼

Audit a dashboard page by checking the shared shell and header for mobile breakpoint failures. Separate must-be-mobile-native components like navigation and filter controls from content that can fallback to scroll or overflow.

What is a system-first approach to responsive dashboard design?▼

A system-first approach normalizes mobile layouts across primary workflow and admin pages using a shared responsive shell. It documents common primitives and CSS layout contracts to enable rapid adoption and consistent UX.

Can I use a shared mobile shell for both core workflow and admin dashboard pages?▼

Yes, a shared mobile shell applies to both core workflow and admin dashboard pages. This system-first strategy ensures a consistent mobile UX across the editor and runs by prescribing a unified shell contract and primitives.

How do I separate mobile-native components from scroll-fallback content in a dashboard?▼

Identify must-be-mobile-native components like navigation, action clusters, and filter controls to keep them interactive. Route remaining dashboard content into scroll or overflow fallbacks to preserve layout stability on small screens.

What are common primitives for a mobile dashboard shell contract?▼

Common primitives for a mobile dashboard shell contract include responsive header elements, navigation clusters, and filter controls. Documenting these CSS and layout contracts enables rapid adoption and consistent mobile rendering.