# Arquitectura frontend

## Objetivo

Definir las reglas de frontend. React, TanStack Query, TanStack Table, React Hook Form, Zod, shadcn/ui y Tailwind son tecnologías objetivo documentadas; este documento no afirma su instalación efectiva.

## Estado y datos remotos

Las operaciones de servidor deben permanecer en TanStack Query. No duplicar estado remoto en estado local sin necesidad; las query keys deben seguir la convención existente y, tras mutaciones, la caché se invalida o actualiza explícitamente. No introducir efectos para derivar durante render estado que pueda calcularse directamente.

## Formularios y componentes

Los formularios deben usar React Hook Form y Zod conforme a los patrones existentes. Los componentes evitan responsabilidad monolítica: se extraen responsabilidades cuando exista una frontera semántica clara, no para ocultar JSX trivial. Usar shadcn/ui y Tailwind según los patrones del área.

## UI, accesibilidad e internacionalización

La interfaz debe contemplar estados `disabled`, `loading`, `empty` y `error`, conservar acciones no disponibles deshabilitadas cuando la UX requiera mostrarlas y preservar comportamiento responsive y accesibilidad.

Los textos visibles deben mantenerse en `es` y `en` cuando el área use i18n; no se insertan directamente en ese caso. Las columnas monetarias usan `tabular-nums` cuando corresponda.