nextjs-frontend-audit

Files (1)

• SKILL.md

SKILL.md (first lines)

# Auditoría de Frontend Next.js + TypeScript

Audita en este orden. Reporta solo hallazgos reales con archivo y línea; no inventes problemas para llenar el reporte.

## 1. Diagnóstico automatizado (correr primero)

```bash
npx tsc --noEmit              # errores de tipos
npx eslint . --max-warnings=0 # lint (o npx next lint en versiones < 15)
npm audit --omit=dev          # vulnerabilidades de dependencias de producción
npx next build 2>&1 | tail -40 # confirma que compila; revisa warnings y tamaños de bundle
```

Si algo falla, eso ya es un hallazgo. Anota la salida relevante.

## 2. Configuración

- `tsconfig.json`: `strict: true` es obligatorio. Marcar si falta o si hay `strictNullChecks: false`, `noImplicitAny: false`.
- `next.config.*`: marcar `typescript.ignoreBuildErrors: true` y `eslint.ignoreDuringBuilds: true` como hallazgos altos.
- Verificar que exista configuración de ESLint con `eslint-config-next`.

## 3. TypeScript

Buscar con grep y revisar contexto:

```bash
grep -rn "any\b" --include="*.ts" --include="*.tsx" src/ app/ | grep -v "// eslint"
grep -rn "@ts-ignore\|@ts-nocheck\|as unknown as" --include="*.ts*" .
```

- `any` explícito, `@ts-ignore`, dobles casteos: deuda de tipos.
- Props sin tipar, respuestas de API sin interfaz/zod: hallazgo medio.

## 4. Next.js específico

- **Server vs Client Components** (App Router): `"use client"` en componentes que no usan estado, efectos ni eventos es innecesario y agranda el bundle. Components con fetch de datos deberían ser Server Components cuando sea posible.
- **Imágenes**: `<img>` en vez de `next/image` (pierde optimización y lazy loading).
- **Fuentes**: links a Google Fonts en vez de `next/font`.
- **Navegación**: `<a>` interno en vez de `next/link`; `window.location` para rutas internas.
- **Data fetching**: fetch en `useEffect` cuando podría ser Server Component, route handler o librería como React Query; falta de manejo de loading/error.
- **Metadata/SEO**: páginas sin `metadata` o `generateMetadata`; falta de `alt` en imágenes.

## 5. React y rendimiento

- Dependencias incorrectas o faltantes en `useEffect`/`useMemo`/`useCallback` (eslint-plugin-react-hooks debe estar activo).
- `useEffect` que actualiza estado de sus propias dependencias (loops).
- Listeners, intervals o suscripciones sin cleanup (memory leaks).
- `key={index}` en listas dinámicas.
- Objetos/funciones inline pasados a componentes memorizados.
- Componentes gigantes (>300 líneas) que mezclan datos, lógica y UI.
- Imports pesados sin `next/dynamic` (gráficas, editores, mapas).

## 6. Seguridad

```bash
grep -rn "NEXT_PUBLIC_" .env* 2>/dev/null
grep -rn "dangerouslySetInnerHTML\|eval(" --include="*.tsx" --include="*.ts" .
grep -rni "api[_-]key\|secret\|password\s*=" --include="*.ts*" src/ app/ lib/
```

- Secretos o API keys con prefijo `NEXT_PUBLIC_` (quedan expuestos al cliente): hallazgo crítico.
- Secretos hardcodeados en el código: crítico.
- `dangerouslySetInnerHTML` sin sanitizar (XSS): alto.
- Tokens en `localStorage` sin estrategia de expiración; lógica de autorización solo en el cliente.
- Falta de validación de inputs en route handlers / server actions.

## 7. Accesibilidad (revisión rápida)

- `div`/`span` con `onClick` en vez de `button`.
- Inputs sin `label` o `aria-label`; imágenes sin `alt`.
- Contraste y foco visibles si hay estilos personalizados de focus.

## 8. Formato del reporte

Entregar un reporte con esta estructura, ordenado por severidad:

```
# Auditoría Frontend: <proyecto>

## Resumen
2-4 frases: estado general, riesgos principales, qué priorizar.

## Hallazgos
### Crítico
- [archivo:línea] Descripción del problema. Por qué importa. Cómo corregirlo.
### Alto / Medio / Bajo
(mismo formato)

## Lo que está bien
2-5 puntos positivos concretos.

## Plan de acción sugerido
Lista numerada, máximo 7 pasos, del más urgente al menos.
```

Severidades: **Crítico** = seguridad o build roto; **Alto** = bugs probables o impacto fuerte en rendimiento; **Medio** = deuda técnica y malas prácticas; **Bajo** = estilo y mejoras opcionales.

From 2003gdb/My-Claude-Workflows, MIT.

More from 2003gdb/My-Claude-Workflows