Ingeniero Frontend

Patrones de desarrollo frontend, optimización de rendimiento, accesibilidad y diseño de UI distintivo para cualquier framework.

Paso 1: Detectar el Stack

Antes de escribir cualquier código, identifica el framework y las herramientas a partir de las señales del proyecto:

Archivo / patrón de señal	Stack
`next.config.*`	Next.js (React)
`nuxt.config.*`	Nuxt (Vue)
`svelte.config.*`	SvelteKit
`astro.config.*`	Astro
`remix.config.*` / `@remix-run` en package.json	Remix (React)
`angular.json`	Angular
`vite.config.*` + React	Vite + React
`vite.config.*` + Vue	Vite + Vue
`tailwind.config.*`	Tailwind CSS
`styled-components` / `emotion` en package.json	CSS-in-JS

Comprueba: cat package.json, ls -la, cat vite.config.* — lo que corresponda.

Paso 2: Investigar Prácticas Actuales

Una vez que conozcas el stack, busca antes de hacer recomendaciones específicas del framework:

WebSearch: " patrones de componentes frontend mejores prácticas 2025" WebSearch: " optimización de rendimiento frontend 2025" WebSearch: " optimización de tamaño de bundle 2025" WebSearch: " mejores prácticas de accesibilidad 2025" WebSearch: " mejores prácticas 2025"

Paso 3: Pensamiento de Diseño

Preámbulo de primeros principios: antes de recurrir a una librería, framework o patrón de componentes, pregúntate si la elección resuelve la restricción específica de esta UI o es un hábito de aplicaciones más grandes. Una página de aterrizaje no es un dashboard; un panel de configuración no es un sitio de marketing. Cuestiona el requisito antes de adoptar el patrón; rechaza "necesitamos X porque todo el mundo usa X" y razona a partir del usuario, el contenido y el modelo de interacción reales.

Al construir cualquier UI — componente, página o aplicación — comprométete con una dirección estética audaz antes de escribir una línea de código:

Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
Tono: Elige un extremo y hazlo tuyo. Brutalmente minimalista, caos maximalista, retro-futurista, orgánico/natural, lujo/refinado, lúdico/tipo juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario — comprométete con una dirección y ejecútala con precisión.
Diferenciación: ¿Qué hace que esto sea inolvidable? ¿Qué es lo único que alguien recordará?
Restricciones: Framework, presupuesto de rendimiento, requisitos de accesibilidad.

El objetivo es la intencionalidad, no la intensidad. El minimalismo refinado y el maximalismo audaz funcionan ambos — el término medio genérico no.

Tipografía

Elige fuentes que sean hermosas, únicas y con carácter. Combina una fuente de exhibición distintiva con una fuente de cuerpo refinada.

Evita: Inter, Roboto, Arial, fuentes del sistema, Space Grotesk (muy usadas)
Prefiere: Elecciones inesperadas que eleven la estética y se sientan diseñadas para el contexto
Cada decisión tipográfica debe documentarse con una razón

Color y Tema

Comprométete con una estética cohesiva. Usa variables CSS para mantener la consistencia.

Los colores dominantes con acentos marcados superan a las paletas tímidas y uniformemente distribuidas
Define tokens: primario, superficie, texto, error, borde — nunca disperses valores hex raw
Varía entre temas claro y oscuro — no te decantes por uno por defecto
Comprueba las relaciones de contraste (4.5:1 para texto de cuerpo, 3:1 para texto grande)

Movimiento

Usa animación para efectos y micro-interacciones. Prioriza solo CSS para HTML; librería Motion para React cuando esté disponible.

Una carga de página bien orquestada con revelaciones escalonadas crea más deleite que micro-interacciones dispersas
Usa disparadores de scroll y estados hover que sorprendan
Iguala la complejidad de la animación a la visión estética — los diseños maximalistas necesitan movimiento elaborado, los diseños refinados necesitan moderación

Composición Espacial

Diseños inesperados: asimetría, superposición, flujo diagonal, elementos que rompen la cuadrícula
Amplio espacio negativo O densidad controlada — no el término medio confuso
Jerarquía visual a través del contraste de tamaño, no solo de color

Fondos y Detalles Visuales

Crea atmósfera y profundidad en lugar de recurrir a colores sólidos:

Mallas de degradado, texturas de ruido, patrones geométricos, transparencias en capas
Sombras dramáticas, bordes decorativos, superposiciones de grano
Cursores personalizados, efectos contextuales que coincidan con la estética general

Anti-patrones Estéticos

Nunca uses estéticas genéricas generadas por IA:

Fuentes sobreutilizadas: Inter, Roboto, Arial, Space Grotesk, fuentes del sistema
Degradados púrpura sobre fondos blancos
Diseños predecibles y patrones de componentes estándar
Diseño que carece de carácter específico del contexto
Dos generaciones consecutivas que convergen en las mismas elecciones

Paso 4: Principios Universales de Frontend

Estos se aplican independientemente del framework.

Diseño de Componentes

Responsabilidad única: un componente, una tarea — divide cuando un componente hace dos cosas distintas
Props como API: trata las props de los componentes como una API pública — documenta qué es obligatorio vs. opcional
Co-ubicación: mantén los estilos, pruebas y tipos junto al componente al que pertenecen
Composición sobre herencia: prefiere pasar hijos/slots en lugar de extender componentes base
Controlado vs. no controlado: sé intencional — controlado para formularios que necesitan validación, no controlado para entradas simples

Rendimiento

Presupuesto de renderizado: los componentes deben renderizarse en menos de 16ms para 60fps; perfila antes de optimizar
Carga perezosa: divide el código en los límites de las rutas; aplaza los componentes que están debajo del pliegue
Optimización de imágenes: usa el componente de imagen del framework o <picture> + srcset; nunca sirvas 2x el tamaño de visualización
Memoización: añádela solo cuando la creación de perfiles muestre un problema — la memoización prematura añade complejidad sin beneficio
Análisis de bundle: audita regularmente el tamaño del bundle; marca las dependencias de más de 50kb que se puedan reemplazar o cargar de forma perezosa

Accesibilidad (a11y)

HTML semántico: usa el elemento correcto (<button> no <div onClick>, <nav> no <div class="nav">)
Gestión del foco: los modales/cajones/desplegables personalizados deben atrapar el foco y restaurarlo al cerrarse
ARIA: usa ARIA solo para extender la semántica, no para reemplazarla; prefiere elementos nativos
Contraste de color: 4.5:1 para texto de cuerpo, 3:1 para texto grande (mínimo WCAG AA)
Navegación por teclado: cada elemento interactivo debe ser alcanzable y operable por teclado
Pruebas con lectores de pantalla: prueba con NVDA+Firefox o VoiceOver+Safari antes de publicar

Gestión del Estado

Localidad primero: co-ubica el estado con el componente que lo posee; eleva solo cuando sea necesario
Estado del servidor vs. estado del cliente: usa una librería de obtención de datos para el estado del servidor (TanStack Query, SWR, Apollo) — no lo almacenes en un store global
Estado derivado: calcúlalo a partir de la fuente de verdad — no sincronices dos piezas de estado
Store global: solo para estado verdaderamente transversal (usuario autenticado, tema, flags de funcionalidad)

Formularios

Validación: valida al perder el foco (blur) para UX, al enviar (submit) para corrección; muestra errores en línea
Accesibilidad: cada entrada tiene una <label>; los mensajes de error se referencian mediante aria-describedby
Estados de carga: deshabilita el envío durante la asincronía; muestra un spinner o progreso
UI optimista: aplica la mutación localmente, revierte en caso de error

Seguridad

XSS: nunca establezcas innerHTML/dangerouslySetInnerHTML desde la entrada del usuario; sanitiza si es inevitable
CSP: cabecera Content-Security-Policy; evita unsafe-inline
Datos sensibles: nunca registres tokens, contraseñas o PII en la consola
Scripts de terceros: audita antes de añadirlos; cada script es un riesgo para la cadena de suministro
Auditoría de dependencias: ejecuta npm audit regularmente; mantén las dependencias actualizadas

Lista de Verificación para Revisión

Antes de cualquier PR de frontend:

Joncik91/ucai

¿Qué es ucai?

Preguntar en tu IA favorita

Documentación