performance

name	performance
description	Reglas de performance frontend. Core Web Vitals, bundle size, rendering. Activar siempre que se genere código frontend.
trigger	always_on
type	rule

Cuando generes o modifiques código frontend, aplica estas reglas de rendimiento:

Reglas de Performance Frontend

Core Web Vitals — Prohibiciones

• NUNCA usar lazy loading en imágenes above-the-fold (LCP).
• NUNCA crear tareas síncronas >50ms en el hilo principal (INP).
• NUNCA renderizar imágenes/video sin width y height explícitos (CLS).
• NUNCA cargar datos del LCP element vía useEffect + spinner — usar SSR/SSG.

Bundle Size — Prohibiciones

• NUNCA importar librerías completas: import _ from 'lodash'.
• NUNCA usar moment.js — reemplazar con date-fns o dayjs.
• NUNCA usar barrel imports que anulen tree shaking.
• NUNCA dejar rutas sin code-splitting.

Rendering — Obligaciones

• SIEMPRE usar React.memo() en componentes hijos costosos.
• SIEMPRE usar useMemo/useCallback cuando se pasen como props a memorizados.
• SIEMPRE usar keys estables en listas (IDs, no índices).
• SIEMPRE usar ChangeDetectionStrategy.OnPush en Angular.
• SIEMPRE derivar estado con useMemo o computed() — NUNCA con useEffect + setState.

Data Fetching

• NUNCA crear cascadas de fetches secuenciales cuando pueden ser paralelos.
• SIEMPRE implementar cache strategy.
• SIEMPRE usar AbortController en fetches dentro de useEffect.