responsive-designpor Seth Hobson

Responsive Design Skill.

Una skill de Claude Code y Codex para diseño UI: layouts responsivos con container queries, tipografía fluida, CSS Grid y breakpoints mobile-first.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: 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. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Front matter y encabezados de sección leídos del archivo original el 14/09/2026 · 1.989 caracteres en total

01 Qué hace

Qué Hace el Skill responsive-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill implementa diseños responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first. Cubre la responsividad a nivel de componente, escalas de tipografía y espaciado fluidos, layouts complejos con CSS Grid y Flexbox, y estrategias de breakpoints para sistemas de diseño. El skill aborda imágenes y medios responsivos, patrones de navegación adaptativa, y tablas y visualizaciones de datos responsivas.

Enfatiza el desarrollo mobile-first, breakpoints basados en el contenido en lugar de en el dispositivo, y container queries para la adaptación a nivel de componente. El skill incluye orientación sobre objetivos táctiles, propiedades lógicas para internacionalización, y optimización del rendimiento mediante el manejo de imágenes y lazy loading.

Código UI

Ver el ejemplo de prompt ↗

Cómo funciona

01
Empezar mobile-first
Comience con estilos móviles como base y luego mejore progresivamente para pantallas más grandes, en lugar de trabajar de escritorio hacia abajo.
02
Definir Breakpoints basados en el contenido
Defina los breakpoints según dónde necesite reajustarse el contenido, no según las dimensiones específicas de un dispositivo.

02 Encuentra tu caso de uso

Cuándo usar el skill responsive-design

Usa el skill responsive-design en Claude Code o Codex cuando el trabajo sea diseño de interfaz de este tipo. El alcance y límites a continuación provienen del archivo propio del skill.

Buen caso de uso

Implementación de layouts responsivos mobile-first
Uso de container queries para responsividad basada en componentes
Creación de escalas de tipografía y espaciado fluidas
Diseño de estrategias de breakpoints para design systems
Construcción de tablas y visualizaciones de datos responsivas

03 Dentro del skill

Reglas que el Skill responsive-design da a Claude Code y Codex

1 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente — la parte del archivo que cambia el resultado.

Optimizar y Aplicar Lazy Load
Optimice las imágenes para el rendimiento y aplique lazy load al contenido que aparece fuera de pantalla inicialmente.

04 Ponlo a trabajar

Instala responsive-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añade responsive-design a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/wshobson/agents --skill responsive-design

Formulario genérico de la CLI skills para plugins/ui-design/skills/responsive-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

El resultado se entrega como código de interfaz, según lista el catálogo para este skill.
El agente nombra el skill responsive-design en su plan o transcripción antes de producir el resultado.
Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign importe responsive-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/ui-design/skills/responsive-design/SKILL.md Checksum de contenido registrado en la verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39,635 Captura de GitHub tomada el 2026-09-14 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un conteo de uso para responsive-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo Usar Este SkillEnumera ocho escenarios, incluidos diseños mobile-first, container queries, tipografía fluida y visualizaciones de datos responsivas
Patrones detallados y ejemplos desarrolladosRemite a references/details.md para documentación de patrones más profunda cuando sea necesario
Mejores PrácticasOcho principios fundamentales, incluidos el enfoque mobile-first, los breakpoints de contenido, los valores fluidos, las container queries y el rendimiento
Problemas ComunesSiete problemas frecuentes como el desbordamiento horizontal, los anchos fijos, la altura del viewport y el tamaño de los objetivos táctiles

La descripción propia del Skill

"Implementa layouts responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first. Usa cuando construyas interfaces adaptativas, implementes layouts fluidos o crees comportamiento responsivo a nivel de componente."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 1,989 caracteres. Lee el archivo completo en GitHub.

Responsive Design

Ejecuta responsive-design en una Tarea Real de Diseño de Interfaz.

Descarga OpenDesign, importa responsive-design desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills