# Responsive Design

> Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

Source: https://skillsagentes.com/skills/wshobson/agents/responsive-design
Repository: https://github.com/wshobson/agents
Author: wshobson
License: MIT
Updated: hace 2 meses
Context cost: 61 tok installed, 497 tok once triggered, 11k tok with every bundled file
Bundle: 5 files, 43 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add wshobson/agents --skill responsive-design --agent claude-code
```

## What it does

- Implementa layouts responsivos con container queries, tipografía fluida y CSS Grid
- Establece estrategias de breakpoints mobile-first basadas en contenido
- Aplica buenas prácticas de rendimiento, imágenes y touch targets responsivos

## Use it when

- Al implementar layouts responsivos mobile-first
- Al usar container queries para responsividad a nivel de componente
- Al crear tipografía y espaciados fluidos
- Al construir layouts complejos con CSS Grid y Flexbox

## What triggers it

- "Ayúdame a crear un layout mobile-first con CSS Grid"
- "Necesito implementar container queries en mis componentes"
- "Cómo defino una escala de tipografía fluida"

## Files

- SKILL.md — 2 KB
- references/breakpoint-strategies.md — 10 KB
- references/container-queries.md — 10 KB
- references/details.md — 10 KB
- references/fluid-layouts.md — 10 KB

## SKILL.md

Reproduced verbatim from wshobson/agents under MIT. This section is the upstream document and is in English.

# Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

## When to Use This Skill

- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
- Building complex layouts with CSS Grid and Flexbox
- Designing breakpoint strategies for design systems
- Implementing responsive images and media
- Creating adaptive navigation patterns
- Building responsive tables and data displays

## Detailed patterns and worked examples

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

## Best Practices

1. **Mobile-First**: Start with mobile styles, enhance for larger screens
2. **Content Breakpoints**: Set breakpoints based on content, not devices
3. **Fluid Over Fixed**: Use fluid values for typography and spacing
4. **Container Queries**: Use for component-level responsiveness
5. **Test Real Devices**: Simulators don't catch all issues
6. **Performance**: Optimize images, lazy load off-screen content
7. **Touch Targets**: Maintain 44x44px minimum on mobile
8. **Logical Properties**: Use inline/block for internationalization

## Common Issues

- **Horizontal Overflow**: Content breaking out of viewport
- **Fixed Widths**: Using px instead of relative units
- **Viewport Height**: 100vh issues on mobile browsers
- **Font Size**: Text too small on mobile
- **Touch Targets**: Buttons too small to tap accurately
- **Aspect Ratio**: Images squishing or stretching
- **Z-Index Stacking**: Overlays breaking on different screens

---

Skills Agentes — https://skillsagentes.com/skills/wshobson/agents/responsive-design