skills.rest
malikkotb
malikkotbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-first

Enforces mobile-first Tailwind responsive utilities and bans max-* breakpoint variants.

Updated Sep 6, 2026
Search Tags:#code review#responsive design#mobile-first#tailwind#breakpoints#css utilities
One-click install
npx skills add https://github.com/malikkotb/shellpluscore --skill mobile-first-malikkotb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-first
Source: https://github.com/malikkotb/shellpluscore/tree/main/.agents/skills/mobile-first
Command: npx skills add https://github.com/malikkotb/shellpluscore --skill mobile-first-malikkotb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Responsive CSS written desktop-first with max-* variants is hard to reason about and inconsistent with a min-width design system. This Skill enforces a single mobile-first convention for Tailwind utilities so every breakpoint override only adds behavior going wider. ## Core Features & Use Cases - Mobile-first enforcement: Base unprefixed utilities describe the phone; sm:/md:/lg:/xl:/2xl: prefixes only add or override for wider screens. - max- ban*: Detects and converts max-md:hidden-style variants into mobile-first equivalents like hidden md:flex. - Visibility toggle rules: Provides a cheat sheet for showing/hiding elements per breakpoint while restoring the correct natural display (flex, block, inline, grid). - Use Case: While reviewing a diff that adds a responsive navbar, flag flex max-md:hidden and rewrite it as hidden md:flex so the phone layout stays the unprefixed default. ## Quick Start Review this component's Tailwind classes and convert any max-* responsive variants into mobile-first utilities.

Frequently Asked Questions about mobile-first

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

FAQPage Schema
How do I hide an element on mobile but show it on desktop with Tailwind?▼

Use `hidden md:flex` (or `md:block`, `md:inline`, `md:grid` matching the element's natural display). The unprefixed `hidden` covers the phone, and the `md:` prefix restores the display at wider screens. Never write `flex max-md:hidden`.

How do I show an element only on mobile with Tailwind?▼

Write the base display unprefixed and hide it at the breakpoint, for example `flex md:hidden`. This is already mobile-first because the phone layout is the default and the prefix only removes it going wider.

Why should I avoid max-md and max-lg variants in Tailwind?▼

Max-* variants describe the small screen by subtracting from a desktop default, which inverts the mobile-first mental model and causes inconsistent overrides. In this design system breakpoints are re-declared as min-width only, so no max-* breakpoint token exists.

What breakpoints does this Tailwind setup use?▼

Breakpoints are re-declared in src/styles/tailwind.css as min-width values: sm 40rem, md 48rem, lg 64rem, xl 80rem, and 2xl 96rem. All are min-width only, with no max-* tokens by design.

How do I check a diff for desktop-first responsive classes?▼

Grep the diff for `max-` variants; any match is the tell of desktop-first thinking. Convert each one to its mobile-first equivalent, then run `npm run format` and `npm run check` to validate the change.

Related Skills

Explore More Software Engineering Skills→
TyrizxTyrizx

ux-css-layout

Applies VS Code CSS conventions for layouts, sizing tokens, and text truncation.

Official
Intermediate
Project-X-VietnamProject-X-Vietnam
1

web-test

Execute browser-based QA tests with Playwright MCP across multiple viewport sizes.

Official
Intermediate
AsyrafHussinAsyrafHussin
62

tailwind-best-practices

Enforce consistent Tailwind CSS patterns for breakpoints, colors, typography, and components.

Community
Intermediate
djankiesdjankies

using-container-queries

Configure Tailwind v4 container queries with @container and breakpoint utilities.

Community
Advanced