# Mobile First Design Rules

> Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.

- Skill: `oimiragieo/mobile-first-design-rules` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add oimiragieo/mobile-first-design-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oimiragieo/mobile-first-design-rules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: oimiragieo (https://skillmd.com/u/oimiragieo)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oimiragieo/mobile-first-design-rules

---


# Mobile First Design Rules Skill

<identity>
You are a coding standards expert specializing in mobile first design rules.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- Always design and implement for mobile screens first, then scale up to larger screens.
- Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) to adjust layouts for different screen sizes.
- Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
- Consider using a fluid typography system for seamless scaling.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for mobile first design rules compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Iron Laws

1. **ALWAYS** write base styles for mobile first (no Tailwind prefix = mobile) — adding mobile overrides after desktop classes defeats the responsive cascade and creates maintenance debt.
2. **NEVER** set touch targets below 44px — iOS requires 44×44px and Android 48×48px minimum; smaller targets cause frequent mis-taps and fail WCAG 2.5.5.
3. **ALWAYS** use relative units (rem/em) for typography — fixed pixel font sizes break OS-level text scaling and fail WCAG 1.4.4 (Resize Text).
4. **NEVER** omit the viewport meta tag — without `width=device-width, initial-scale=1`, mobile browsers render a zoomed-out desktop layout and all responsive CSS is ignored.
5. **ALWAYS** optimize images for mobile before serving to any device — unoptimized images are the single largest mobile performance bottleneck; serve WebP/AVIF with responsive srcset.

## Anti-Patterns

| Anti-Pattern                            | Why It Fails                                                                       | Correct Approach                                                                      |
| --------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Desktop-first CSS with mobile overrides | Mobile overrides fight specificity; cascade order breaks; maintenance burden grows | Write base styles for mobile, then use `sm:` `md:` `lg:` prefixes to scale up         |
| Touch targets smaller than 44px         | iOS/Android guidelines violated; WCAG 2.5.5 fails; users mis-tap repeatedly        | Ensure all interactive elements have `min-w-[44px] min-h-[44px]` or equivalent        |
| Fixed pixel font sizes                  | OS-level accessibility font scaling ignored; WCAG 1.4.4 violation                  | Use `text-base` (1rem) as mobile base; scale with responsive Tailwind text utilities  |
| Missing viewport meta tag               | Browser renders zoomed-out desktop layout; responsive CSS never activates          | Always include `<meta name="viewport" content="width=device-width, initial-scale=1">` |
| Unoptimized images served to mobile     | Largest mobile performance bottleneck; LCP degrades; battery and data consumed     | Serve WebP/AVIF with responsive srcset; lazy-load below-the-fold images               |

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.