responsive-design
Crear diseños web responsivos
Los diseños fijos fallan en teléfonos, tabletas y pantallas anchas. Esta skill guía sobre CSS mobile-first, puntos de interrupción, imágenes y patrones de diseño.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/supercent-io-responsive-design.md and its manifest at https://skillstore.io/api/skills/supercent-io-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "responsive-design". Una página de listado de productos debe funcionar en móvil, tableta, escritorio y pantallas grandes.
Resultado esperado:
Un plan de cuadrícula mobile-first con estados de una, dos, tres y cuatro columnas, además de orientación sobre espaciado y tamaño de imágenes.
Usando "responsive-design". Una barra de navegación de escritorio necesita un menú móvil.
Resultado esperado:
Un enfoque de navegación responsiva con un toggle móvil, etiquetas de estado accesibles y enlaces horizontales en pantallas más anchas.
Usando "responsive-design". Una página heredada usa anchos fijos e imágenes grandes.
Resultado esperado:
Una lista de verificación de refactorización que cubre contenedores max-width, unidades relativas, imágenes responsivas y pasos de prueba de viewport.
Auditoría de seguridad
SeguroAll static findings were false positives caused by Markdown code fences, CSS examples, reference links, and related-skill documentation links. No prompt injection, malware intent, credential access, data exfiltration, runtime command execution, or filesystem access was found in SKILL.md or SKILL.toon.
Factores de riesgo
⚙️ Comandos externos (36)
🌐 Acceso a red (4)
📁 Acceso al sistema de archivos (2)
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/supercent-io-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/supercent-io-responsive-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citas académicas (APA · BibTeX · CFF)
Cita APA
supercent-io. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/supercent-io-responsive-design/audits/5Cita BibTeX
@techreport{supercent-io-supercent-io-responsive-design-2026,
author = {supercent-io},
title = {responsive-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/supercent-io-responsive-design/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "responsive-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "supercent-io"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/supercent-io-responsive-design/audits/5"
identifiers:
- type: other
value: "skillstore:supercent-io-responsive-design:audit:5"
description: "Skillstore immutable audit report identifier"
Comparar variantes
2 variantes instalablesCada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.
Por qué esta variante es la primera
supercent-io-responsive-design
2026-09-09
wshobson-responsive-design
2026-09-09
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Lanzar una página mobile-first
Crea un diseño que comienza con una vista de teléfono y se expande de forma limpia para pantallas de tableta y escritorio.
Modernizar un diseño fijo
Reemplaza anchos fijos con cuadrículas flexibles, espaciado relativo y ajustes basados en puntos de interrupción.
Preparar requisitos de UI responsiva
Documenta el comportamiento de los puntos de interrupción, el manejo de imágenes y las expectativas de diseño para una nueva interfaz web.
Prueba estos prompts
Usa la skill responsive-design para crear un diseño mobile-first para una landing page simple con secciones de encabezado, contenido y pie de página.
Usa la skill responsive-design para convertir este diseño de ancho fijo en un diseño responsivo mobile-first con puntos de interrupción claros.
Usa la skill responsive-design para diseñar una cuadrícula de tarjetas que cambie de una columna en móvil a cuatro columnas en pantallas grandes.
Usa la skill responsive-design para auditar esta interfaz en busca de desbordamiento de diseño, duplicación de puntos de interrupción, escalado de imágenes y problemas de tipografía.
Mejores prácticas
- Comienza con la pantalla compatible más pequeña y añade complejidad en puntos de interrupción más anchos.
- Usa Grid para diseños bidimensionales y Flexbox para alineación unidimensional.
- Prueba contenido real en cada punto de interrupción antes de finalizar el espaciado y el comportamiento de las imágenes.
Evitar
- No dependas de anchos de página fijos para los contenedores principales del diseño.
- No dupliques los mismos estilos en cada punto de interrupción.
- No trates las imágenes responsivas como opcionales cuando el rendimiento de la página importa.
Preguntas frecuentes
¿Esta skill escribe CSS de producción?
¿Puede ayudar con diseños existentes?
¿Admite CSS Grid y Flexbox?
¿Incluye orientación sobre imágenes responsivas?
¿Reemplaza las pruebas de accesibilidad?
¿Qué herramientas pueden usar esta skill?
Detalles del desarrollador
Autor
supercent-ioLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Repositorio
https://github.com/supercent-io/skills-template/tree/main/.agent-skills/responsive-design/Ref.
f93e9bb0daca99badb6a7e574b97737155d57cb3
Actualidad del mantenimiento
23/7/2026
Uso
23 descargas · 139 vistas
Estructura de archivos
📄 SKILL.md