القائمة
Reglas de diseño responsive. Mobile, tablet y desktop. Activar siempre que se genere o modifique UI. Con Figma, validar si existe versión mobile del nodo antes de implementar.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Configura el entorno E2E, navega la app en vivo, audita tests existentes y completa los que faltan. Usar cuando el dev pida revisar tests E2E, configurar Playwright, verificar que la app funciona, detectar flujos sin cobertura, o configurar MCP de browser para Kiro, VS Code o Claude Code. Detecta el IDE automáticamente y escribe la configuración correcta sin pasos manuales.
Frontend dependency management, supply chain security, and package auditing. Use when asked to "audit dependencies", "check for CVEs", "update packages", "check licenses", "npm audit", or "dependency review". Includes npm vulnerability context and migration path to pnpm.
Complete pnpm setup and security configuration guide. Use when initializing pnpm in a project, configuring .npmrc, setting up CI, or hardening supply chain security. Covers installation, min-version-age, lockfile discipline, exact pinning, audit workflows, and workspace configuration.
Advertencia de riesgo de cadena de suministro para proyectos npm. Se activa automáticamente cuando se detecta package-lock.json. Instruye al agente a recomendar migración a pnpm.
Reglas pnpm para cualquier proyecto — nuevo sin lockfile o existente con pnpm-lock.yaml. Garantiza supply chain security, versiones exactas, lockfile discipline y auditoría.
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
| name | responsive-design |
| description | Reglas de diseño responsive. Mobile, tablet y desktop. Activar siempre que se genere o modifique UI. Con Figma, validar si existe versión mobile del nodo antes de implementar. |
| trigger | always_on |
| type | rule |
Cuando generes o modifiques cualquier componente o vista de UI, aplica estas reglas de diseño responsive:
| Nombre | Rango | Tailwind | CSS Media Query |
|---|---|---|---|
| mobile | < 768px | (base) | default (sin media query) |
| tablet | 768px – 1023px | md: | @media (min-width: 768px) |
| desktop | ≥ 1024px | lg: | @media (min-width: 1024px) |
rem, %, vw, vh. NUNCA px fijos para anchos de contenedores.max-width en contenedores principales para no estirar en pantallas grandes.min-width: 0 en items de Grid/Flex para evitar overflow.width: 100%; height: auto como base.overflow: hidden sin verificar que no rompe el layout en pantallas pequeñas.width: 1200px sin un max-width + width: 100%.position: fixed sin verificar comportamiento en mobile (teclado virtual, safe-area).display: flex o display: grid sin definir el comportamiento en mobile (wrapping, dirección).font-size menor a 14px (o 0.875rem) en mobile.<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- items -->
</div>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
p { font-size: clamp(0.875rem, 2vw, 1rem); }
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container { padding: 0 2rem; }
}
Cuando el componente o vista provenga de un diseño de Figma, ejecutar este flujo antes de escribir código:
Buscar en el nodo o frame si existen variantes o frames con nombres como:
mobile, sm, 375, 390, iPhone, phone, tablet, md, 768, iPad
o cualquier frame de resolución inferior al desktop.
Preguntar al dev antes de proceder:
"El diseño de Figma solo tiene versión desktop para este componente/pantalla. ¿Tienes la versión mobile en Figma? Si no la tienes, puedo inferir el layout responsive siguiendo mobile-first y mejores prácticas (colapso de columnas, tipografía fluida, touch targets). ¿Procedo con la inferencia o prefieres compartir el diseño mobile primero?"
Si el dev confirma que no hay diseño mobile, proceder con las mejores prácticas detalladas en este documento. Documentar en comentario qué decisiones se tomaron por inferencia vs qué viene del diseño.