frontend-responsive
Crear interfaces frontend responsivas
Los diseños frontend a menudo se rompen en pantallas móviles, tabletas y de escritorio. Esta skill guía la implementación responsiva en React, Tailwind y CSS con patrones mobile-first.
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 "frontend-responsive" from https://skillstore.io/skills/devanb-frontend-responsive.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-responsive/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 "frontend-responsive". Un panel de React usa columnas fijas y controles móviles apretados.
Resultado esperado:
La respuesta identifica paneles de ancho fijo, propone un diseño móvil apilado, ajusta breakpoints y recomienda objetivos táctiles más grandes.
Usando "frontend-responsive". Una barra de navegación Tailwind no cabe en pantallas pequeñas.
Resultado esperado:
La respuesta recomienda un menú móvil compacto, espaciado específico por breakpoint, reglas de ajuste más claras y controles accesibles mediante teclado.
Usando "frontend-responsive". Una página de producto usa imágenes grandes y tipografía fija.
Resultado esperado:
La respuesta sugiere tamaños de imagen responsivos, escalas tipográficas fluidas y pasos de prueba para pantallas móviles, de tableta y de escritorio.
Auditoría de seguridad
SeguroMost static findings are false positives caused by frontend terms and inline Markdown backticks. The relative link at SKILL.md line 28 is confirmed because it traverses outside the skill package and depends on an external local file. No prompt injection or data exfiltration intent was found.
Elementos de revisión de capacidades (1)
Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
Factores de riesgo
⚙️ Comandos externos (1)
📁 Acceso al sistema de archivos (1)
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/devanb-frontend-responsive/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/devanb-frontend-responsive?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/devanb-frontend-responsive?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-responsive/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-responsive.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
DevanB. (2026). frontend-responsive security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-responsive/audits/10Cita BibTeX
@techreport{devanb-devanb-frontend-responsive-2026,
author = {DevanB},
title = {frontend-responsive security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/devanb-frontend-responsive/audits/10},
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: "frontend-responsive security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-responsive/audits/10"
identifiers:
- type: other
value: "skillstore:devanb-frontend-responsive:audit:10"
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
eis-its-frontend-responsive
2026-09-09
devanb-frontend-responsive
2026-09-09
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Adaptar pantallas React
Hacer que las pantallas React existentes se adapten limpiamente a distintos tamaños de viewport.
Estandarizar componentes
Revisar componentes para garantizar breakpoints, espaciado, tipografía y objetivos táctiles consistentes.
Planificar comprobaciones responsivas
Crear escenarios de prueba responsivos para diseños móviles, de tableta y de escritorio.
Prueba estos prompts
Revisa este componente React y actualiza el diseño para pantallas móviles, de tableta y de escritorio. Mantén la intención de diseño existente.
Reemplaza las decisiones de diseño con muchos píxeles fijos por unidades relativas y espaciado responsivo. Explica los principales cambios de diseño.
Adapta este menú de navegación para pantallas pequeñas con controles táctiles, breakpoints claros y estados de interacción accesibles.
Audita esta página para detectar riesgos responsivos en la estructura React, las clases Tailwind, la tipografía, los recursos multimedia y el comportamiento de breakpoints. Prioriza las correcciones por impacto.
Mejores prácticas
- Comienza con el diseño móvil antes de añadir breakpoints para tableta y escritorio.
- Usa unidades relativas y contenedores fluidos cuando los píxeles fijos romperían los diseños.
- Prueba los flujos de trabajo clave en anchos móviles, de tableta y de escritorio.
Evitar
- Añadir estilos solo para escritorio antes de definir un diseño móvil utilizable.
- Usar anchos fijos que fuerzan el desplazamiento horizontal en pantallas pequeñas.
- Reducir el tamaño visual sin comprobar los objetivos táctiles y la tipografía legible.