Habilidades responsive-design
📱

responsive-design

Seguro

Crear diseños web responsivos

También disponible en: wshobson

Crea sitios web que se adaptan beautifully a cualquier tamaño de pantalla usando principios de diseño mobile-first, CSS Grid, Flexbox y técnicas modernas responsivas.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "responsive-design". Crear un diseño grid mobile-first con tarjetas

Resultado esperado:

Código CSS mostrando un grid que comienza como 1 columna, se convierte en 2 columnas en 640px y 3 columnas en 1024px, con gap fluido y padding usando unidades rem.

Usando "responsive-design". Hacer la tipografía responsiva sin media queries

Resultado esperado:

CSS usando la función clamp() para tamaños de fuente fluidos que escalan suavemente entre valores mínimos y máximos basados en el ancho del viewport.

Auditoría de seguridad

Seguro
v1 • 3/11/2026

This skill is a legitimate documentation resource for responsive web design. The static scanner produced false positives by misidentifying CSS code examples, markdown links, and reference URLs as security vulnerabilities. All 86 detected patterns are false positives - the skill contains only documentation and CSS/HTML code examples with no executable code, network calls to external services, or file system operations beyond standard documentation references.

2
Archivos escaneados
529
Líneas analizadas
3
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (3)
SKILL.md:27-513
CSS Code Examples Misidentified as External Commands
Static scanner incorrectly flagged CSS syntax (`.container`, `@media`, etc.) as Ruby/shell backtick execution. These are legitimate CSS code blocks in documentation.
SKILL.md:496-499
Documentation Reference URLs Misidentified as Network Security Issue
Static scanner flagged reference URLs (MDN, CSS-Tricks) as hardcoded URLs. These are legitimate documentation links in the References section.
SKILL.md:509-510
Markdown Relative Links Misidentified as Path Traversal
Static scanner flagged `../ui-component-patterns/SKILL.md` as path traversal. These are standard markdown relative links to related skills.
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
36
Comunidad
99
Seguridad
87
Cumplimiento de la especificación

Lo que puedes crear

Desarrollo de nuevos sitios web

Crear diseños responsivos para nuevas aplicaciones web usando enfoque mobile-first con CSS Grid y Flexbox.

Modernización de sitios legacy

Convertir diseños de ancho fijo a diseños responsivos que funcionan en todos los dispositivos.

Creación de bibliotecas de componentes

Crear componentes responsivos reutilizables usando container queries para sistemas de diseño modulares.

Prueba estos prompts

Diseño responsivo básico 
Crear un diseño responsivo usando CSS mobile-first con un contenedor, grid y breakpoint en 768px. Mostrar cómo cambia el diseño de móvil a tablet.
Navegación responsiva 
Crear un componente de navegación responsivo con menú hamburguesa en móvil que se expande a menú horizontal en tablet y desktop.
Galería de imágenes responsiva 
Crear una galería de imágenes responsiva que muestra 1 columna en móvil, 2 en tablet y 4 en desktop usando CSS Grid.
Componentes con container queries 
Crear un componente de tarjeta que adapta su diseño basándose en el tamaño de su contenedor usando CSS container queries.

Mejores prácticas

  • Siempre comenzar con estilos para móvil como predeterminados, luego agregar breakpoints más grandes
  • Usar unidades relativas (rem, em, %, vw/vh) en lugar de píxeles fijos para escalabilidad
  • Usar CSS Grid para diseños bidimensionales y Flexbox para diseños unidimensionales

Evitar

  • Evitar anchos fijos como width: 1200px - usar max-width en su lugar
  • No duplicar estilos en todos los breakpoints - usar herencia mobile-first
  • Evitar usar media queries con max-width para los estilos base - esto crea código desktop-first

Preguntas frecuentes

¿Qué es el diseño mobile-first?
El diseño mobile-first significa comenzar con estilos para las pantallas más pequeñas como predeterminados, luego agregar breakpoints más grandes con media queries min-width. Este enfoque asegura que la experiencia core funcione en todos los dispositivos.
¿Cuándo debo usar CSS Grid vs Flexbox?
Usar CSS Grid para diseños bidimensionales (filas y columnas juntas). Usar Flexbox para diseños unidimensionales (una fila O una columna). Grid es mejor para el diseño general de la página, Flexbox para alineación a nivel de componente.
¿Qué son las container queries?
Las container queries te permiten estilizar elementos basándote en el tamaño de su contenedor padre en lugar del tamaño del viewport. Esto habilita componentes responsivos verdaderamente reutilizables.
¿Cómo hago que las imágenes sean responsivas?
Usar el atributo srcset para proporcionar múltiples tamaños de imagen, el elemento picture para dirección de arte (diferentes imágenes en diferentes tamaños), y CSS background-image con image-set para pantallas de alta densidad.
¿Cuáles son los breakpoints estándar?
Los breakpoints comunes son: Móvil (320-767px), Tablet (768-1023px), Desktop (1024-1439px), y Pantallas grandes (1440px+). Ajustar estos basándose en las necesidades de tu contenido.
¿Cómo hago la tipografía responsiva?
Usar la función CSS clamp() para tipografía fluida que escala entre valores mínimos y máximos. Ejemplo: font-size: clamp(1rem, 2.5vw, 1.5rem) escala suavemente con el ancho del viewport.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/responsive-design/

Ref.

main

Estructura de archivos

📄 SKILL.md

📄 SKILL.toon