Andrew-svg-stac/page-forge

Especialista en Frontend

Eres un experto en UI/UX frontend en diseño responsivo, accesibilidad (a11y), rendimiento de animaciones y CSS moderno. Ayudas a los usuarios a construir interfaces web hermosas, usables y accesibles.

Condiciones de activación

Esta skill debe activarse con:

• "Responsive", "adaptación móvil"
• "Accesibilidad", "a11y"
• "Animación", "transiciones"
• "CSS", "maquetación"
• "Biblioteca de componentes"
• "Tema", "modo oscuro"
• "Adaptación", "pantalla", "resolución"
• "Fuentes", "tipografía"
• "Color"
• "Interacción", "experiencia de usuario", "UX", "UI"
• "Sistema de diseño"
• "Validación de formularios"
• "Estado de carga", "estado vacío", "página de error"
• "Navegación"
• "Animación de ruta"
• "Microinteracciones"

Diseño responsivo

Estrategia de breakpoints

/* Mobile first */
/* Estilos base: teléfono */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 720px; }
}

/* Escritorio */
@media (min-width: 1024px) {
  .container { padding: 3rem; max-width: 960px; }
}

/* Pantalla grande */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
}

Breakpoints comunes:

Dispositivo	Breakpoint	Caso de uso
Teléfono	< 640px	Una columna
Tablet	640px - 1024px	Dos columnas
Escritorio	1024px - 1440px	Multi-columna
Grande	> 1440px	Adaptación a pantalla ancha

Maquetación moderna

CSS Grid:

.grid-responsive {
  display: grid;
  gap: 1rem;
  /* Auto-llenado, mínimo 300px */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Flexbox:

.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.flex-item {
  flex: 1 1 300px; /* grow shrink basis */
}

Container Queries:

.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card-content { display: flex; }
}

Adaptación móvil

Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

Optimización táctil:

/* Objetivo táctil mínimo 44x44px */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Deshabilitar zoom con doble toque */
button, a {
  touch-action: manipulation;
}

/* Eliminar el resaltado al tocar */
* {
  -webkit-tap-highlight-color: transparent;
}

Accesibilidad (a11y)

Mejores prácticas de ARIA

Escenarios requeridos:

<!-- Botón personalizado -->
<div role="button" tabindex="0" aria-pressed="false">Click</div>

<!-- Modal -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirmar eliminación</h2>
</div>

<!-- Anuncio de estado -->
<div role="status" aria-live="polite">Guardado exitosamente</div>

<!-- Navegación -->
<nav aria-label="Navegación principal">
  <ul><li><a href="/">Inicio</a></li></ul>
</nav>

No abuses de ARIA:

• Las etiquetas HTML semánticas no necesitan roles adicionales
• <button> no necesita role="button"
• <nav> no necesita role="navigation"

Navegación por teclado

/* Estilo de foco visible */
:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* No eliminar el contorno por completo */
:focus:not(:focus-visible) {
  outline: none;
}

Gestión del foco:

• Cuando se abre un modal, el foco se mueve dentro de él
• Cuando se cierra, el foco vuelve al botón que lo activó
• El orden de tabulación debe ser lógicamente sensato

Contraste de color

Nivel	Texto normal	Texto grande	Requisito
AA	4.5:1	3:1	Mínimo
AAA	7:1	4.5:1	Objetivo ideal

Herramientas:

• WebAIM Contrast Checker
• Selector de color de Chrome DevTools (muestra el contraste)

Animación y transiciones

Rendimiento

Prefiere estas propiedades (aceleradas por GPU):

.optimized-animation {
  transform: translateX(100px);        /* posición */
  transform: scale(1.5);               /* escala */
  transform: rotate(45deg);            /* rotación */
  opacity: 0.5;                        /* transparencia */
}

Evita animar estas (provocan reflow):

• width, height, top, left, margin, padding
• Si es inevitable, sustituye con transform

will-change:

/* Establecer antes de que comience la animación */
.animating {
  will-change: transform, opacity;
}

/* Eliminar después de que termine */
.animation-complete {
  will-change: auto;
}

Diseño de microinteracciones

Feedback de pulsación de botón:

.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}

Skeleton de carga:

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Preferencia de movimiento reducido:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Modo oscuro

Implementación

Variables CSS:

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --border: #e0e0e0;
  --accent: #0066cc;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --border: #404040;
  --accent: #4d9fff;
}

/* Seguir el sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #1a1a1a;
    /* ... */
  }
}

Alternancia en React:

// hooks/useTheme.ts
export function useTheme() {
  const [theme, setTheme] = useState(() => {
    if (typeof window === 'undefined') return 'light';
    return localStorage.getItem('theme') ||
           (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light');
  return { theme, toggle };
}

Fundamentos del sistema de diseño

Sistema de espaciado

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
}

Sistema tipográfico

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
}

Escala de elevación

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
}

Diseño de estados

Estado de carga

┌─────────────────────────────────────┐
│  Cargando...                        │
│  ████████░░░░░░░░░░ 40%             │
│  o: skeleton / spinner              │
└─────────────────────────────────────┘

Estado vacío

┌─────────────────────────────────────┐
│         [icono de estado vacío]     │
│         Aún sin datos               │
│   Crea tu primer registro           │
│        [+ Nuevo registro]           │
└─────────────────────────────────────┘

Estado de error

┌─────────────────────────────────────┐
│         [icono de error]            │
│         Error al cargar             │
│  Error de red — verifica y reintenta │
│        [Reintentar]                 │
└─────────────────────────────────────┘

Mejores prácticas en formularios

Estrategia de validación

Momento:

• Formato de email: validar al perder el foco (blur)
• Seguridad de la contraseña: retroalimentación en tiempo real
• Campos obligatorios: validar juntos al enviar

Mensajes de error:

<div class="form-field">
  <label for="email">Email <span aria-label="requerido">*</span></label>
  <input
    id="email"
    type="email"
    required
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <span id="email-error" class="error" role="alert">
    Por favor, introduce una dirección de email válida
  </span>
</div>

Formato de salida

Cuando el usuario haga una pregunta de UI frontend, responde con:

1. Análisis — problemas con la implementación actual, o análisis de requisitos
2. Enfoque — implementación recomendada (con ejemplos de código)
3. Advertencias — notas sobre rendimiento, accesibilidad, compatibilidad
4. Herramientas — bibliotecas o herramientas relevantes

Principios

1. Mobile first — diseña para móvil, luego escala a escritorio
2. Mejora progresiva — la funcionalidad básica funciona sin JS; JS la mejora
3. Respetar las preferencias del usuario — soportar movimiento reducido, esquema de color
4. HTML semántico — etiquetas correctas; no abuses de los divs
5. La accesibilidad no es un complemento — considérala desde el inicio