responsive-design

Visión general de la skill responsive-design

La skill responsive-design ayuda a un agente a producir orientación moderna y lista para implementar para interfaces adaptativas usando container queries, tamaños fluidos, CSS Grid, Flexbox y breakpoints mobile-first. Es especialmente útil para quienes están construyendo layouts de UI reales, componentes de design systems, dashboards, cards, navegación o vistas con muchos datos que deben funcionar en distintos tamaños de pantalla sin depender de un CSS frágil y específico por dispositivo.

Para quién es esta skill responsive-design

Usa esta skill responsive-design si necesitas algo más que “hazlo mobile-friendly”. Encaja bien para ingenieros frontend, diseñadores UI que trabajan con detalles de implementación y usuarios de agentes que quieren patrones responsivos prácticos para el comportamiento de componentes, no solo consejos genéricos sobre media queries.

Qué trabajo te ayuda realmente a completar

El trabajo real que resuelve es convertir un objetivo de layout todavía difuso en una estrategia de implementación responsive: qué debería ser fluido, qué debería usar breakpoints, cuándo conviene usar container queries en lugar de viewport queries y cómo mantener los componentes reutilizables en distintos contextos.

Qué hace diferente a esta skill frente a un prompt genérico

Un prompt genérico suele producir recomendaciones desactualizadas, como breakpoints basados en dispositivos y un exceso de media queries. La skill responsive-design se centra en patrones CSS más actuales que aparecen en el repositorio, especialmente:

• estrategia de breakpoints mobile-first guiada por el contenido
• container queries para componentes reutilizables
• tipografía y espaciado fluidos basados en clamp()
• decisiones de layout que separan las necesidades del viewport de las necesidades del componente

Qué importa más antes de instalarla

Es una buena opción si tu resultado objetivo es CSS, especificaciones de componentes o guía de implementación UI. Tiene menos valor si solo quieres mockups visuales, instrucciones para herramientas no-code o abstracciones específicas de framework sin decisiones CSS subyacentes. El repositorio está orientado a consulta, así que su valor está en los patrones y ejemplos de references/, no en scripts de automatización.

Cómo usar la skill responsive-design

Contexto de instalación de responsive-design

Instala la skill desde la colección de skills en la raíz del repositorio:

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

Como la skill upstream no incluye scripts ni integraciones con frameworks, la instalación consiste sobre todo en hacer que tu agente pueda invocar esta guía. Piensa en una skill de documentación y patrones, no en un generador de código con entradas estrictamente definidas.

Lee primero estos archivos

Empieza por estos archivos en este orden:

1. plugins/ui-design/skills/responsive-design/SKILL.md
2. plugins/ui-design/skills/responsive-design/references/container-queries.md
3. plugins/ui-design/skills/responsive-design/references/fluid-layouts.md
4. plugins/ui-design/skills/responsive-design/references/breakpoint-strategies.md

Este orden importa: la skill principal define el alcance y luego las referencias añaden el detalle de implementación que realmente mejora la calidad del resultado.

Qué información necesita de ti la skill

La skill responsive-design funciona mejor cuando proporcionas:

• el tipo de componente o página
• las restricciones del layout
• los contextos de pantalla objetivo
• si la respuesta responsive debe basarse en viewport, en contenedor o en un enfoque mixto
• cualquier token de design system o convención de breakpoints
• los requisitos de compatibilidad con navegadores

Entrada débil: “Haz esto responsive”.

Entrada más sólida: “Crea una grid responsive de cards para un dashboard. Las cards deben funcionar en una página de ancho completo y en una sidebar estrecha. Usa container queries donde cambie el contexto del componente, espaciado y tipografía fluidos, y mantén los breakpoints alineados con nuestra escala de tokens sm/md/lg salvo que el contenido obligue a otro umbral.”

Cómo convertir un objetivo difuso en un prompt sólido

Un buen prompt de responsive-design usage suele incluir cinco partes:

1. Objeto UI: lista de cards, barra de navegación, tabla de precios, formulario, tabla de datos
2. Cambios de comportamiento: apilar, envolver, colapsar, redimensionar, reordenar, revelar
3. Origen de la restricción: viewport, contenedor padre, ancho del contenido
4. Reglas del sistema: escala de tokens, reglas de grid, tamaño mínimo de toque, necesidades de accesibilidad
5. Formato de salida: ejemplo CSS, plan de implementación, justificación de breakpoints, consejo de refactor

Ejemplo de prompt:

“Use the responsive-design skill to propose a responsive strategy for a product comparison table. Prioritize small screens first, avoid horizontal overflow where possible, use content-based breakpoints, and explain whether container queries or viewport media queries should control each part. Include sample CSS for typography, spacing, and layout transitions.”

Cuándo pedir container queries en responsive-design

Usa container queries cuando un componente deba adaptarse según dónde se coloca, no solo según el ancho del navegador. Esto es especialmente importante para cards reutilizables, paneles laterales, widgets, módulos embebidos y componentes de design systems.

El archivo references/container-queries.md del repositorio es la mejor fuente si tu componente aparece en varios layouts padre. Incluye sintaxis práctica, contenedores con nombre y notas sobre compatibilidad entre navegadores.

Cuándo pedir layouts fluidos en lugar de más breakpoints

Si tu problema de UI consiste sobre todo en escalar texto, espaciados o anchos de forma suave, conviene orientar primero al agente hacia técnicas fluidas. El archivo references/fluid-layouts.md es útil cuando quieres menos saltos bruscos entre breakpoints y un redimensionado más natural usando clamp(), unidades relativas y intrinsic sizing.

Esto suele mejorar:

• títulos y texto de cuerpo
• espaciado entre secciones
• tamaño de cards
• grids que deberían respirar antes de reajustarse

Cómo aprovechar bien la guía de breakpoints

El repositorio favorece claramente los breakpoints mobile-first guiados por el contenido frente a los catálogos de dispositivos. En la práctica, pide a la skill que justifique cada breakpoint por presión real del layout: longitud de línea, saturación de cards, overflow en tablas, wrapping de navegación o problemas con targets táctiles.

Si tu equipo ya usa tokens de breakpoint de Tailwind o Bootstrap, indícalo. Las referencias incluyen escalas comunes, lo que ayuda a que la skill conecte una estrategia moderna con sistemas ya existentes en lugar de inventar valores arbitrarios.

Flujo de trabajo recomendado para proyectos reales

Un flujo práctico de responsive-design guide:

1. Describe el componente y los modos de fallo en tamaños pequeños y grandes.
2. Pide una estrategia de layout antes de pedir código.
3. Decide qué debe ser fluido, qué debe ajustarse por saltos y qué debe reorganizarse.
4. Solicita CSS de ejemplo solo cuando la estrategia ya tenga sentido.
5. Prueba el resultado con los anchos reales de tus contenedores, no solo con presets de navegador.
6. Itera con capturas de pantalla, estructura DOM o CSS actual si la primera propuesta resulta demasiado genérica.

Esta secuencia da mejores resultados que pedir CSS final desde el principio.

Formatos de salida que mejor funcionan

Pide a la skill uno de estos formatos de salida:

• plan de implementación responsive
• tabla de justificación de breakpoints
• patrón CSS inicial
• estrategia de refactor de componentes
• auditoría de un layout existente
• decisión “container query vs media query”

Estos formatos fuerzan decisiones más claras que “dame código responsive”.

Consejos prácticos que mejoran la calidad del resultado

Para obtener mejores resultados de responsive-design for UI Design:

• incluye la estructura HTML actual cuando importen las relaciones del layout
• especifica si la longitud del contenido varía mucho
• menciona el tamaño mínimo de texto legible y el tamaño mínimo de targets interactivos
• indica al agente si se permite reordenar contenido
• aclara las restricciones de navegadores legacy antes de que sugiera soluciones muy apoyadas en container queries

Sin estas entradas, la skill puede elegir patrones técnicamente modernos que no encajen con tu matriz de soporte o con la arquitectura de tus componentes.

Preguntas frecuentes sobre la skill responsive-design

¿La skill responsive-design es adecuada para principiantes?

Sí, si ya conoces lo básico de CSS. La skill tiene un enfoque conceptualmente moderno más que de tutorial para principiantes, así que funciona mejor para usuarios que pueden leer CSS y quieren tomar mejores decisiones responsive. Los principiantes también pueden usarla, pero deberían esperar términos como container queries, intrinsic sizing y escalas fluidas.

¿Esta skill genera código específico de framework?

No principalmente. El contenido del repositorio está centrado en patrones CSS. Aun así, puedes pedir adaptación a React, Vue, Tailwind o CSS puro, pero el valor principal está en la estrategia responsive, no en los detalles de integración con frameworks.

¿responsive-design es mejor que un prompt UI normal?

Por lo general sí, cuando la capacidad responsive es central en la tarea. Los prompts corrientes suelen caer en hábitos antiguos con breakpoints o en recomendaciones superficiales del tipo “apílalo en mobile”. La responsive-design skill da al agente un vocabulario más actual y más definido para tomar decisiones de layout.

¿Cuándo no debería usar responsive-design?

Sáltatela si tu tarea trata sobre todo de:

• branding visual
• generación de mockups estáticos
• diseño de interacción centrado en animaciones
• configuración de framework no relacionada con layout
• recreación pixel-perfect sin decisiones de comportamiento adaptativo

También encaja mal si tu equipo no puede usar funciones modernas de CSS y necesita patrones de compatibilidad de la era de IE.

¿Cubre temas de compatibilidad entre navegadores?

En parte. Las referencias mencionan compatibilidad moderna, especialmente para container queries, y dan a entender fallbacks razonables. Pero no es una skill de matriz de compatibilidad. Si la compatibilidad con navegadores es crítica, incluye explícitamente en el prompt cuál es tu mínimo soportado.

¿La skill puede ayudar con design systems?

Sí. Encaja bien para definir filosofía de breakpoints, espaciado y tipografía alineados con tokens y comportamiento reutilizable de componentes entre distintos contenedores. Es especialmente útil cuando un design system necesita menos hacks específicos de página y más componentes portables.

Cómo mejorar la skill responsive-design

Dale a la skill responsive-design restricciones reales

El mayor salto de calidad viene de las restricciones. Proporciona anchos reales, nombres de tokens, muestras de contenido y estados UI. “Responsive dashboard card” es vago; “card usada en una sidebar de 320px y en una grid principal de 1200px con títulos largos y dos acciones” sí permite actuar.

Pide decisiones, no solo código

Mejor prompt:
“Use the responsive-design skill to decide which parts should use fluid sizing, which need breakpoints, and where container queries are justified.”

Esto produce un razonamiento más sólido que:
“Write responsive CSS.”

Aporta el CSS existente cuando estés refactorizando

Si ya tienes código de layout, pega el CSS actual y pide a la skill que lo simplifique. Eso le ayuda a eliminar media queries innecesarias, detectar supuestos frágiles sobre anchos y sustituir lógica basada solo en viewport por reglas conscientes del componente cuando corresponda.

Modos de fallo habituales que conviene vigilar

La primera respuesta puede seguir siendo floja si:

• el agente adivina breakpoints sin evidencia del contenido
• se usan container queries donde reglas basadas en viewport serían más simples
• se añade tipografía fluida sin límites mínimos y máximos
• los cambios de layout ignoran accesibilidad o comodidad de lectura
• los ejemplos se ven elegantes pero no encajan con tu estructura DOM

Todo eso se puede corregir si pides la justificación y vinculas cada regla a un problema concreto de UI.

Usa prompts de iteración después del primer borrador

Buenos prompts de seguimiento:

• “Reduce unnecessary breakpoints and explain what can be fluid instead.”
• “Refactor this so the component works in both narrow sidebar and wide content areas.”
• “Add fallbacks for teams that cannot rely fully on container queries.”
• “Audit this layout for overflow, cramped text, and awkward wrap points.”

Estos seguimientos mejoran más la adopción práctica que pedir una reescritura completa desde cero.

Valida frente a contextos de componente, no solo tamaños de pantalla

Una idea central de la skill responsive-design es que muchos fallos vienen de probar solo anchos de viewport. Mejora los resultados comprobando el mismo componente dentro de:

• contenido de página completa
• sidebar
• modal
• grid densa de dashboard
• sección de marketing embebida

Si el comportamiento cambia según el contenedor, díselo a la skill desde el principio para que pueda elegir el mecanismo responsive correcto.

Usa los archivos de referencia como anclas en tus prompts

Menciona directamente las referencias del repositorio cuando quieras respuestas más profundas:

• references/container-queries.md para responsiveness a nivel de componente
• references/fluid-layouts.md para escalado suave
• references/breakpoint-strategies.md para decisiones mobile-first sobre breakpoints

Es una de las formas más sencillas de conseguir un responsive-design usage más fundamentado por parte de un agente, en lugar de consejos frontend genéricos.

Mejora los resultados con mejores criterios de aceptación

Pide a la skill que optimice para resultados concretos:

• menos media queries
• nada de horizontal overflow por debajo de un ancho dado
• longitudes de línea legibles
• componentes reutilizables en distintos tamaños de contenedor
• espaciado y tipografía alineados con tokens
• mínimo layout shift entre breakpoints

Con criterios de aceptación claros, la skill responsive-design resulta mucho más útil para trabajo UI de producción.