⚛️ Protocolo Antigravity: Skill Frontend (React)

Core Principle: Componentes puros, predecibles y compostables. UI declarativa sobre imperativa.

1. Stack & Principios

• •React: Functional Components + Hooks (Prohibido Class Components).
• •TypeScript: Strict Mode. any está prohibido (usar unknown o generics).
• •Styling: Tailwind CSS (Utility-first).

2. Estructura de Archivos (Feature-First)

Organizar el código por funcionalidad ("Features") en lugar de por tipo técnico.

src/
  features/
    auth/
      components/  # Componentes exclusivos de Auth
      hooks/       # Hooks exclusivos de Auth
      types/       # Interfaces de Auth
    dashboard/
  components/      # Componentes UI compartidos (Button, Input)
  hooks/           # Hooks compartidos

3. Diseño de Componentes

• •SRP: Un componente hace una cosa. Si tiene demasiados useEffect o estados, divídelo.
• •Contenedor vs Presentacional: Separar lógica (hooks, data fetching) de vista (JSX, estilos).
• •Props: Interfaces explícitas. Usar destructuring. Evitar prop-drilling excesivo (usar Context o Composition).

4. Estado y Hooks

• •useState: Para estado local UI simple.
• •useReducer: Para estado complejo interdependiente.
• •Context: Para estado global temático o de sesión (evitar abusar para data frecuente).
• •Custom Hooks: Extraer lógica reutilizable siempre (useForm, useFetch).

5. Rendimiento

• •Re-renders: Entender cuándo y por qué ocurre un render.
• •Memoización: Usar useMemo y useCallback solo ante problemas de performance medidos, o para estabilidad referencial en dependencias de efectos.
• •Code Splitting: React.lazy para rutas y modales pesados.
• •Imágenes: loading="lazy", formatos modernos (WebP), dimensiones explícitas.

6. JSX Limpio

• •Condicionales: Ternarios para casos simples. Short-circuit (&&) con cuidado (cuidado con 0).
• •Listas: key única y estable (IDs de DB, no índices de array).
• •No Lógica en View: Extraer cálculos complejos fuera del return.

7. Tailwind Best Practices

• •Usar clases utilitarias directamente.
• •Extraer a componentes (<Button>) para reutilización, NO usar @apply indiscriminadamente.
• •Mantener consistencia con tailwind.config.js (colores, espaciado).

8. Testing Check

• • ¿Testeas lo que el usuario ve (Behavior), no la implementación interna?
• • ¿Cubres casos de éxito y error?
• • ¿Componentes accesibles (roles ARIA)?

9. Tooling & Calidad

Consulta la skill quality-assurance para detalles de configuración.

• •Linter: ESLint obligatorio (npm run lint). Prohibido ignorar reglas de hooks.
• •Formatting: Prettier (npm run format).
• •Commits: Pre-commit hooks activados.

Recuerda: El frontend es lo que el usuario toca. Haz que se sienta sólido, rápido y profesional.