Mobile-First Responsive Design
CommunityDesign for mobile first, deliver flawless UX everywhere.
AuthorRomualdP
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures optimal user experience across all devices by enforcing a Mobile-First responsive design approach with Tailwind CSS, preventing broken layouts and poor performance on smaller screens.
Core Features & Use Cases
- Progressive Enhancement: Guides on designing for mobile first and then progressively enhancing layouts, typography, and spacing for larger screens using Tailwind's breakpoints.
- Touch-Friendly Design: Emphasizes creating large, accessible touch targets and appropriate spacing for mobile interactions.
- Responsive Patterns: Provides templates for common responsive UI elements like navigation (burger menu to horizontal), card grids (stack to grid), and forms (stack to grid).
- Use Case: When building a new dashboard, start by designing its layout and components for a small mobile screen. Then, use
md:andlg:prefixes in Tailwind to adapt and enhance the layout for tablets and desktops, ensuring a consistent and performant experience.
Quick Start
To implement a mobile-first layout, define base styles without prefixes for mobile, then use sm:, md:, and lg: prefixes for tablet and desktop-specific styles. Ensure touch targets are at least 44x44px.
Dependency Matrix
Required Modules
tailwindcssnextreact
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: Mobile-First Responsive Design Download link: https://github.com/RomualdP/hoki/archive/main.zip#mobile-first-responsive-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.