---
title: "/add-breakpoints - Add Responsive Breakpoints"
description: "Implement responsive design breakpoints for a component or page."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/add-breakpoints
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T10:59:13.160Z
license: CC-BY-4.0
attribution: "/add-breakpoints - Add Responsive Breakpoints — Claudary (https://claudary.paisolsolutions.com/skills/add-breakpoints)"
---

# /add-breakpoints - Add Responsive Breakpoints
Implement responsive design breakpoints for a component or page.

## Overview

# /add-breakpoints - Add Responsive Breakpoints

Implement responsive design breakpoints for a component or page.

## Steps

1. Identify the target component or page to make responsive
2. Define breakpoints aligned with the design system: mobile (< 640px), tablet (640-1024px), desktop (> 1024px)
3. Analyze the current layout and identify elements that need responsive behavior
4. Implement mobile-first styles as the base layout
5. Add tablet breakpoint styles: adjust grid columns, spacing, font sizes
6. Add desktop breakpoint styles: wider containers, side-by-side layouts
7. Handle images responsively: srcset, sizes, object-fit, aspect-ratio
8. Adjust typography scale across breakpoints for readability
9. Handle navigation: mobile hamburger menu, tablet condensed, desktop full nav
10. Test touch targets: minimum 44x44px on mobile devices
11. Add container queries for component-level responsiveness if supported
12. Verify layout at all breakpoints and in-between sizes

## Rules

- Always design mobile-first and add complexity for larger screens
- Use relative units (rem, em, %) instead of fixed pixels for layout
- Minimum touch target size of 44x44px on mobile
- Do not hide critical content at any breakpoint; rearrange instead
- Test at exact breakpoint boundaries and between breakpoints
- Use CSS Grid or Flexbox for responsive layouts, not floats
- Ensure text remains readable (16px minimum) at all breakpoints

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/add-breakpoints) · https://claudary.paisolsolutions.com