playbooks

home / skills / oimiragieo / agent-studio / mobile-first-design-rules

mobile-first-design-rules skill

/.claude/skills/mobile-first-design-rules

This skill analyzes code for mobile-first design rules, applying Tailwind responsive utilities and fluid typography to optimize for small screens.

npx playbooks add skill oimiragieo/agent-studio --skill mobile-first-design-rules

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
1.7 KB
---
name: mobile-first-design-rules
description: Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: '**/*.{tsx,jsx}'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# 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>

## 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.

Overview

This skill guides developers to apply mobile-first design rules and responsive typography using Tailwind CSS. It focuses on pragmatic, code-level recommendations to ensure layouts and type scale cleanly from small screens upward. The goal is actionable feedback and refactors that improve usability and maintainability across breakpoints.

How this skill works

The skill reviews code for mobile-first patterns, Tailwind responsive prefixes, and typography utilities. It identifies places where desktop-first assumptions exist, suggests responsive utility swaps (e.g., base -> md:), and recommends fluid typography techniques for smoother scaling. It can produce concrete code snippets and refactors to bring implementations in line with the guidelines.

When to use it

  • When auditing layouts that appear optimized for desktop first
  • When implementing responsive UI with Tailwind and you need consistent type scaling
  • When converting a project to mobile-first design approach
  • When setting or refining a typographic system across breakpoints
  • When onboarding team members to a shared responsive pattern set

Best practices

  • Start styles from the smallest viewport and add responsive prefixes for larger screens (sm:, md:, lg:, xl:)
  • Use Tailwind text utilities at the base size and override with responsive prefixes rather than setting large defaults
  • Adopt fluid typography (clamp, calc, or Tailwind plugin) to reduce jarring jumps between breakpoints
  • Prefer utility combinations that preserve rhythm: adjust line-height and spacing alongside font-size changes
  • Keep breakpoint-specific overrides minimal and focused—use component-level classes to encapsulate behavior

Example use cases

  • Review a component that appears cramped on mobile and suggest replacing desktop-sized utilities with base and md: overrides
  • Refactor a page to implement clamp-based font sizes and convert fixed rem sizes to fluid values
  • Audit a Tailwind config for missing responsive utilities or inconsistent breakpoints across components
  • Provide a pattern for scalable headings and body text that stays legible across small to large screens
  • Convert a desktop-first grid layout into a mobile-first stack with responsive columns added at md: and lg:

FAQ

Should I always use fluid typography?

Fluid typography is recommended for smoother scaling, but evaluate complexity and browser support; combine clamp-based sizes with breakpoint overrides when needed.

How do I convert desktop-first utilities to mobile-first in Tailwind?

Move the current desktop utility to a responsive prefix (e.g., md: or lg:) and set the base utility for mobile. Test spacing and line-height alongside font-size changes.