# Responsive Design > Implementa layouts responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first. Fuente: https://skillsagentes.com/skills/wshobson/agents/responsive-design Markdown: https://skillsagentes.com/skills/wshobson/agents/responsive-design.md Repositorio: https://github.com/wshobson/agents Autor: wshobson Licencia: MIT Actualizado: hace 4 meses Coste de contexto: 61 tok instalada, 497 tok al activarse, 11k tok con todos los archivos del bundle Bundle: 5 archivos, 43 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add wshobson/agents --skill responsive-design --agent claude-code # Cursor npx -y skills add wshobson/agents --skill responsive-design --agent cursor # Codex npx -y skills add wshobson/agents --skill responsive-design --agent codex # Gemini CLI npx -y skills add wshobson/agents --skill responsive-design --agent gemini # Windsurf npx -y skills add wshobson/agents --skill responsive-design --agent windsurf # Cline npx -y skills add wshobson/agents --skill responsive-design --agent cline ``` ## Qué hace - 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 ## Cuándo usarla - 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 ## Qué la activa - "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" ## Archivos - 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 Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés. # 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 ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Hermes Tweet](https://skillsagentes.com/skills/wshobson/agents/hermes-tweet.md): Instala y opera Hermes Tweet, un plugin de Hermes Agent para investigar X/Twitter, leer timelines, analizar tweets y ejecutar operaciones privadas o de cambio de estado con aprobación previa. - [Superself](https://skillsagentes.com/skills/wshobson/agents/superself.md): Úsalo cuando un proyecto guarda su estado en Superself: lee `self context` al iniciar sesión, vincula el trabajo a una work unit, reporta con evidencia y registra decisiones confirmadas. - [Grounded Vault](https://skillsagentes.com/skills/wshobson/agents/grounded-vault.md): Úsalo para mantener un almacén Markdown de conocimiento donde cada afirmación compilada se rastrea hasta una fuente inmutable y el drift se detecta con git diff sin gastar tokens. - [Postgresql Table Design](https://skillsagentes.com/skills/wshobson/agents/postgresql-table-design.md): Úsalo al diseñar o revisar un esquema específico de PostgreSQL: buenas prácticas, tipos de datos, indexación, restricciones, patrones de rendimiento y funciones avanzadas. - [Prompt Engineering Patterns](https://skillsagentes.com/skills/wshobson/agents/prompt-engineering-patterns.md): Úsalo cuando pidan optimizar un prompt, mejorar su rendimiento, diseñar una plantilla, aplicar chain-of-thought, few-shot prompting o técnicas avanzadas de prompt engineering para producción. ## Skills relacionadas - [Brand Landingpage](https://skillsagentes.com/skills/wshobson/agents/brand-landingpage.md): Diseñador de landing pages centrado en marca: hace una entrevista de identidad visual y luego genera e itera la página con Stitch, entregando HTML listo para desplegar. - [Web Component Design](https://skillsagentes.com/skills/wshobson/agents/web-component-design.md): Domina patrones de componentes en React, Vue y Svelte: CSS-in-JS, estrategias de composición y arquitectura de componentes reutilizables para design systems. - [Visual Design Foundations](https://skillsagentes.com/skills/wshobson/agents/visual-design-foundations.md): Aplica principios de tipografía, teoría del color, sistemas de espaciado e iconografía para crear diseños visuales coherentes, útil al definir design tokens, guías de estilo o mejorar la jerarquía visual. - [Mobile Ios Design](https://skillsagentes.com/skills/wshobson/agents/mobile-ios-design.md): Domina las Human Interface Guidelines de iOS y los patrones de SwiftUI para construir apps nativas. Úsalo al diseñar interfaces iOS, implementar vistas SwiftUI o seguir los principios de diseño de Apple. - [Mobile Android Design](https://skillsagentes.com/skills/wshobson/agents/mobile-android-design.md): Domina Material Design 3 (Material You) y Jetpack Compose para construir apps Android nativas, modernas y adaptativas, integradas con el ecosistema Android. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)