theus-cli-linux-arm64 0.2.84

package/vendor/theus-arsenal/skills/patrones-react/SKILL.md

@@ -0,0 +1,339 @@
+---
+name: patrones-react
+description: Patrones de React 18/19 que incluyen disciplina de hooks, fronteras entre componentes de servidor/cliente, Suspense + error boundaries, form actions, obtención de datos, árboles de decisión para la gestión de estado y composición con accesibilidad primero. Úsala al escribir o revisar componentes React.
+---
+
+# Patrones de React
+
+Patrones idiomáticos de React 18/19 para construir árboles de componentes robustos, accesibles y de buen rendimiento.
+
+## Cuándo activar
+
+- Al escribir o modificar componentes de función de React, hooks personalizados o árboles de componentes
+- Al revisar archivos JSX/TSX
+- Al diseñar la forma del estado o la composición de componentes
+- Al migrar componentes de clase o código antiguo cargado de `forwardRef`/`useEffect`
+- Al elegir entre estado local, estado elevado, contexto y stores externos
+- Al trabajar con Server Components / Client Components (Next.js App Router, RSC)
+- Al implementar formularios con actions de React 19 o inputs controlados
+- Al conectar la obtención de datos con TanStack Query / SWR / RSC
+
+## Principios centrales
+
+### 1. El render es una función pura de props y estado
+
+```tsx
+// Bien: derivar durante el render
+function Cart({ items }: { items: CartItem[] }) {
+  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
+  return <span>{formatMoney(total)}</span>;
+}
+
+// Mal: estado derivado almacenado por separado
+function Cart({ items }: { items: CartItem[] }) {
+  const [total, setTotal] = useState(0);
+  useEffect(() => {
+    setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
+  }, [items]);
+  return <span>{formatMoney(total)}</span>;
+}
+```
+
+El estado derivado en `useEffect` añade un ciclo de render, puede desincronizarse y oscurece el flujo de datos.
+
+### 2. Los efectos secundarios fuera del render
+
+Los efectos, mutaciones, llamadas de red y suscripciones viven en manejadores de eventos o en `useEffect` — nunca en el cuerpo del render.
+
+### 3. Composición sobre herencia
+
+React no tiene un modelo de herencia para componentes. Compón con `children`, render props o props de componente.
+
+## Disciplina de hooks
+
+Puntos clave:
+
+- Solo en el nivel superior, nunca condicionales
+- Limpia toda suscripción, intervalo y listener
+- Actualizador funcional (`setX(prev => prev + 1)`) cuando el nuevo estado depende del anterior
+- Posición por defecto: no memoizar — añade `useMemo`/`useCallback` solo cuando un profiler o una cadena de dependencias demuestre que importa
+- Extrae un hook personalizado solo cuando la misma secuencia de hooks aparece en 2 o más componentes
+
+## Árbol de decisión para ubicar el estado
+
+```
+¿Lo usa un solo componente?
+  -> useState dentro de él
+
+¿Lo usan el padre y unos pocos descendientes?
+  -> elévalo al ancestro común más cercano
+
+¿Se usa en ramas distantes Y con lecturas de baja frecuencia (tema, auth, locale)?
+  -> React Context
+
+¿Actualizaciones de alta frecuencia compartidas por todo el árbol?
+  -> store externo (Zustand, Jotai, Redux Toolkit)
+
+¿Se deriva de un servidor?
+  -> librería de estado de servidor (TanStack Query, SWR, fetch en RSC)
+```
+
+La mayoría de las páginas no necesita contexto ni un store global. Resiste la abstracción hasta que la elevación duplicada resulte dolorosa.
+
+## Componentes de servidor / cliente (RSC)
+
+```tsx
+// Server Component - por defecto, async, nunca envía JS propio al cliente
+export default async function ProductPage({ params }: { params: { id: string } }) {
+  const product = await db.product.findUnique({ where: { id: params.id } });
+  if (!product) notFound();
+  return <ProductView product={product} />;
+}
+
+// Client Component - se activa con "use client"
+"use client";
+export function AddToCartButton({ productId }: { productId: string }) {
+  const [pending, startTransition] = useTransition();
+  return (
+    <button
+      disabled={pending}
+      onClick={() => startTransition(() => addToCart(productId))}
+    >
+      {pending ? "Agregando..." : "Agregar al carrito"}
+    </button>
+  );
+}
+```
+
+Fronteras:
+
+- Servidor -> Cliente: pasa props serializables o `children`
+- Cliente -> Servidor: invoca Server Actions vía `<form action={...}>` o de forma imperativa desde manejadores de eventos
+- Nunca hagas `import` de un Server Component desde un archivo de Client Component — compónlos vía `children`
+
+## Suspense + error boundaries
+
+```tsx
+<ErrorBoundary fallback={<ErrorView />}>
+  <Suspense fallback={<UserSkeleton />}>
+    <UserDetail id={id} />
+  </Suspense>
+</ErrorBoundary>
+```
+
+- Coloca las fronteras de Suspense cerca de los datos, no en la raíz de la ruta — revela el contenido progresivamente
+- El Error Boundary sigue siendo una API de clase; usa `react-error-boundary` para un wrapper compatible con hooks
+- Una boundary captura errores lanzados durante el render, el ciclo de vida y los constructores de sus hijos — NO en manejadores de eventos ni en código async
+
+## Formularios
+
+### Form actions de React 19 (preferidas para código nuevo)
+
+```tsx
+"use client";
+import { useActionState } from "react";
+
+const initial = { error: null as string | null };
+
+async function updateUserAction(_prev: typeof initial, formData: FormData) {
+  "use server";
+  const parsed = UserSchema.safeParse(Object.fromEntries(formData));
+  if (!parsed.success) return { error: "Entrada inválida" };
+  await db.user.update({ where: { id: parsed.data.id }, data: parsed.data });
+  return { error: null };
+}
+
+export function UserForm() {
+  const [state, formAction, pending] = useActionState(updateUserAction, initial);
+  return (
+    <form action={formAction}>
+      <input name="name" required />
+      <button type="submit" disabled={pending}>Guardar</button>
+      {state.error && <p role="alert">{state.error}</p>}
+    </form>
+  );
+}
+```
+
+### Inputs controlados
+
+Usa controlados cuando el valor dirige otra parte de la UI, formatea en cada pulsación o implementa validación en tiempo real.
+
+### Formularios complejos
+
+Para formularios de varios pasos, arrays de campos dinámicos o validación entre campos: usa una librería (React Hook Form, TanStack Form). Gestionar el estado de formularios a mano más allá de la complejidad trivial es una trampa de mantenimiento.
+
+## Matriz de decisión para obtención de datos
+
+| Necesidad | Herramienta |
+|---|---|
+| Datos por petición en Next.js App Router | `await fetch()` en RSC |
+| Caché en cliente + mutaciones + invalidación | TanStack Query |
+| Caché ligera en cliente + revalidación | SWR |
+| Suscripciones en tiempo real | Server-Sent Events, WebSockets, o la API de suscripción de la librería |
+| Disparo único sin seguimiento | `fetch()` en un manejador de eventos |
+
+Evita `useEffect` + `fetch` para datos de aplicación — condiciones de carrera, sin caché, sin reintentos, sin integración con Suspense.
+
+## Recetas de composición
+
+### Slot vía `children`
+
+```tsx
+<Layout>
+  <Header />
+  <Main>{content}</Main>
+</Layout>
+```
+
+### Slots con nombre
+
+```tsx
+<Page header={<Nav />} sidebar={<Filters />}>
+  <Results />
+</Page>
+```
+
+### Componentes compuestos (estado compartido vía Context)
+
+```tsx
+<Tabs defaultValue="profile">
+  <Tabs.List>
+    <Tabs.Trigger value="profile">Perfil</Tabs.Trigger>
+    <Tabs.Trigger value="settings">Configuración</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Panel value="profile"><Profile /></Tabs.Panel>
+  <Tabs.Panel value="settings"><Settings /></Tabs.Panel>
+</Tabs>
+```
+
+### Render prop / función como hijo
+
+Útil cuando el padre necesita pasar parámetros a la salida renderizada:
+
+```tsx
+<DataLoader id={id}>
+  {({ data, isLoading }) => isLoading ? <Spinner /> : <UserCard user={data} />}
+</DataLoader>
+```
+
+Alternativa moderna: un hook (`useData(id)`) que devuelve la misma forma — normalmente más limpio.
+
+## Rendimiento
+
+### Cuándo `React.memo` realmente ayuda
+
+Envuelve un componente en `React.memo` solo cuando:
+
+1. Se re-renderiza con frecuencia
+2. Sus props suelen ser las mismas entre renders
+3. Su render es medible y costoso
+
+`React.memo` añade una comprobación de igualdad en cada render. Si las props difieren en la mayoría de los renders, la comprobación es sobrecarga pura.
+
+### Evitar cascadas de renders
+
+- Baja el estado (lift down) en lugar de subirlo cuando sea posible
+- Divide el contexto: un contexto por preocupación, para que un cambio en `themeContext` no re-renderice a los consumidores de auth
+- Usa `useSyncExternalStore` para librerías de estado externas — requerido para un renderizado concurrente seguro
+
+### Listas
+
+- Provee props `key` estables (id de base de datos, no el índice del array)
+- Virtualiza listas largas con `@tanstack/react-virtual` o `react-window` cuando el número de ítems visibles supere ~50 con filas no triviales
+
+## Composición con accesibilidad primero
+
+- Renderiza siempre HTML semántico (`<button>`, `<a>`, `<nav>`, `<main>`) antes de recurrir a atributos `role`
+- Todo elemento interactivo debe ser alcanzable por teclado
+- Los inputs de formulario necesitan etiquetas — `<label htmlFor>` o `aria-label` si están etiquetados visualmente con un icono
+- Gestiona el foco en cambios de ruta y al abrir/cerrar modales
+- Ejecuta `axe` en los tests de componentes (ver [skills/testing-react](../testing-react/SKILL.md))
+- Enlace cruzado: [skills/accesibilidad/SKILL.md](../accesibilidad/SKILL.md) cubre criterios WCAG y librerías de patrones
+
+## Enrutamiento
+
+Esta skill es agnóstica del router. Los patrones anteriores funcionan con React Router, TanStack Router, Next.js App Router y Remix Router. Los patrones específicos de cada router (loaders, actions, layouts anidados) siguen la documentación del router — son preocupaciones del framework por encima del núcleo de React.
+
+## Fuera de alcance (secciones de referencia)
+
+- **Particularidades de Next.js**: carga de datos del App Router, Route Handlers, Middleware, Parallel Routes — preocupación aparte, usa la documentación de Next.js
+- **React Native**: los patrones específicos de plataforma difieren lo suficiente como para justificar una skill separada (aún no existe)
+- **Remix**: las convenciones de loader/action se solapan con RSC pero siguen la documentación de Remix
+
+## Relacionados
+
+- Skills: [rendimiento-react](../rendimiento-react/SKILL.md) para el conjunto de reglas de rendimiento, [patrones-frontend](../patrones-frontend/SKILL.md) para preocupaciones de UI entre frameworks, [accesibilidad](../accesibilidad/SKILL.md)
+- Agentes: `revisor-react` para revisión de código, `resolutor-builds-react` para errores de build/bundler
+- Comandos: `/revisar-react`, `/build-react`, `/test-react`
+
+## Ejemplos
+
+### Hook personalizado para búsqueda con debounce
+
+```tsx
+function useDebounce<T>(value: T, delay = 300): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+}
+
+function SearchBox() {
+  const [query, setQuery] = useState("");
+  const debounced = useDebounce(query, 300);
+  const { data } = useQuery({
+    queryKey: ["search", debounced],
+    queryFn: () => searchApi(debounced),
+    enabled: debounced.length > 0,
+  });
+  return (
+    <>
+      <input value={query} onChange={(e) => setQuery(e.target.value)} />
+      <Results items={data ?? []} />
+    </>
+  );
+}
+```
+
+### UI optimista con `useOptimistic` de React 19
+
+```tsx
+"use client";
+import { useOptimistic } from "react";
+
+export function MessageList({ messages }: { messages: Message[] }) {
+  const [optimistic, addOptimistic] = useOptimistic(
+    messages,
+    (state, newMessage: Message) => [...state, newMessage],
+  );
+
+  async function send(formData: FormData) {
+    const text = String(formData.get("text"));
+    addOptimistic({ id: "pending", text, sender: "me" });
+    await saveMessage(text);
+  }
+
+  return (
+    <>
+      <ul>{optimistic.map((m) => <li key={m.id}>{m.text}</li>)}</ul>
+      <form action={send}>
+        <input name="text" />
+        <button type="submit">Enviar</button>
+      </form>
+    </>
+  );
+}
+```
+
+### Dividir el contexto para evitar cascadas de renders
+
+```tsx
+// Dos contextos: uno cambia rara vez, el otro con frecuencia
+const ThemeContext = createContext<Theme>("light");
+const NotificationsContext = createContext<Notification[]>([]);
+
+// Un componente que solo consume ThemeContext NO se re-renderiza cuando cambian las notificaciones
+```

package/vendor/theus-arsenal/skills/patrones-react-native/SKILL.md

@@ -0,0 +1,325 @@
+---
+name: patrones-react-native
+description: Patrones para apps React Native y Expo — navegación con Expo Router, separación de estado (servidor/cliente/ruta/formulario), fetching de datos con TanStack Query y Zod, listas performantes, estilos con NativeWind/StyleSheet, APIs nativas y almacenamiento seguro. Úsala al construir o editar pantallas, componentes, navegación o capas de datos en React Native / Expo.
+---
+
+# Patrones de React Native / Expo
+
+Patrones prácticos para construir apps React Native de producción con Expo. Cubre navegación, estado, fetching de datos, listas, estilos y APIs nativas.
+
+Las bibliotecas mencionadas (NativeWind, Zustand/Jotai, TanStack Query) son opciones habituales y bien establecidas, mostradas a modo ilustrativo — los patrones importan más que el paquete concreto, y cualquier equivalente funciona. Se usa Zod para la validación por coherencia con las reglas `typescript/` del plugin.
+
+Estos patrones asumen el flujo managed de Expo (Expo Router, EAS, módulos `expo-*`) sobre la New Architecture (la opción por defecto en los SDK recientes de Expo, obligatoria desde el SDK 55+). NO asumen el DOM del navegador — React Native no tiene `<div>`, ni barra de URL, ni los valores por defecto de fetching web.
+
+## Cuándo usarla
+
+Usa esta skill cuando:
+
+- Construyas o edites pantallas, componentes o navegación de React Native / Expo
+- Configures rutas con Expo Router (directorio `app/` basado en archivos)
+- Decidas dónde vive el estado (caché de servidor vs store de cliente vs parámetros de ruta vs formulario)
+- Conectes el fetching de datos con TanStack Query y valides respuestas con Zod
+- Renderices listas largas o pesadas
+- Elijas o apliques un enfoque de estilos (NativeWind o StyleSheet)
+- Accedas a APIs nativas del dispositivo (cámara, ubicación, notificaciones) o a almacenamiento seguro
+- Revises código RN en busca de problemas específicos de móvil
+
+NO uses aquí los patrones de web/React-DOM — la URL como estado, `<div>` y SWR-para-navegador no aplican a React Native.
+
+## Conceptos clave
+
+### Estructura del proyecto (Expo Router)
+
+Enrutamiento basado en archivos bajo `app/`. Mantén los archivos de ruta delgados: leen y validan los parámetros, y delegan en un componente de pantalla que vive en `components/` o `features/`.
+
+```
+app/
+  _layout.tsx          # stack raíz
+  (tabs)/
+    _layout.tsx        # navegador de pestañas
+    index.tsx          # Inicio
+  user/[id].tsx        # ruta dinámica
+components/
+features/
+  user/UserProfile.tsx
+```
+
+### Navegación: valida los parámetros de ruta
+
+Los deep links y las rutas dinámicas entregan strings no confiables. Valídalos con Zod antes de usarlos.
+
+```tsx
+// app/user/[id].tsx
+import { useLocalSearchParams, router } from 'expo-router'
+import { z } from 'zod'
+import { UserProfile } from '@/features/user/UserProfile'
+
+const Params = z.object({ id: z.string().uuid() })
+
+export default function UserRoute() {
+  const parsed = Params.safeParse(useLocalSearchParams())
+  if (!parsed.success) {
+    router.replace('/not-found')
+    return null
+  }
+  return <UserProfile userId={parsed.data.id} />
+}
+```
+
+### Estado: separa las responsabilidades
+
+No dupliques datos del servidor en un store de cliente. Cada responsabilidad tiene su propio hogar.
+
+| Responsabilidad | Opciones habituales |
+|---------|------|
+| Estado de servidor (datos remotos) | una biblioteca de caché de servidor (TanStack Query, SWR) |
+| Estado de cliente/UI | un store ligero (Zustand, Jotai) o Context |
+| Estado de ruta/navegación | parámetros de Expo Router |
+| Estado de formularios | una biblioteca de formularios (p. ej. React Hook Form) + validación por esquema |
+| Secretos / tokens | `expo-secure-store` |
+| Persistencia no secreta | `AsyncStorage` / MMKV |
+
+Prefiere `useState` local hasta que el estado realmente necesite compartirse.
+
+### Fetching de datos: una biblioteca de caché + Zod
+
+Usa una biblioteca de caché de servidor (TanStack Query, SWR) en lugar de fetch dentro de `useEffect`. Valida en la frontera e infiere los tipos desde el esquema. Maneja explícitamente los estados de carga, error y vacío. (El ejemplo usa TanStack Query.)
+
+```tsx
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+
+const User = z.object({ id: z.string(), email: z.string().email() })
+type User = z.infer<typeof User>
+
+export function useUser(id: string) {
+  return useQuery({
+    queryKey: ['user', id],
+    queryFn: async (): Promise<User> => User.parse(await api.getUser(id)),
+  })
+}
+
+export function useUpdateEmail(id: string) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (email: string) => api.updateEmail(id, email),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['user', id] }),
+  })
+}
+```
+
+### Listas: virtualiza, nunca mapees un array grande dentro de un ScrollView
+
+```tsx
+import { FlatList } from 'react-native'
+
+<FlatList
+  data={items}
+  keyExtractor={(item) => item.id}
+  renderItem={renderItem}          // memoizado
+  initialNumToRender={10}
+  windowSize={5}
+/>
+```
+
+Usa `FlashList` (Shopify) para listas grandes o heterogéneas.
+
+### Estilos: elige un solo sistema
+
+`StyleSheet.create()` es la opción nativa del framework; las bibliotecas de clases utilitarias (p. ej. NativeWind) son una alternativa habitual. Elige una y sé consistente. Nunca construyas objetos de estilo inline en JSX en rutas calientes.
+
+```tsx
+// NativeWind
+<View className="p-4 rounded-2xl bg-white">
+  <Text className="text-base font-semibold">Hola</Text>
+</View>
+
+// StyleSheet
+const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 16, backgroundColor: '#fff' } })
+<View style={styles.card}>...</View>
+```
+
+### APIs nativas: envuélvelas en hooks y limpia los efectos
+
+Mantén las llamadas al SDK de Expo y las suscripciones dentro de hooks `use*`, no en el JSX. Limpia siempre.
+
+```tsx
+import { useEffect, useState } from 'react'
+import * as Location from 'expo-location'
+
+type LocationState =
+  | { status: 'loading' }
+  | { status: 'denied' }
+  | { status: 'granted'; coords: Location.LocationObjectCoords }
+
+export function useCurrentLocation() {
+  // Registra el estado, no solo las coordenadas — así la UI puede distinguir
+  // "todavía cargando" de "permiso denegado" y mostrar un mensaje accionable.
+  const [state, setState] = useState<LocationState>({ status: 'loading' })
+
+  useEffect(() => {
+    let active = true
+    ;(async () => {
+      const { status } = await Location.requestForegroundPermissionsAsync()
+      if (status !== 'granted') {
+        if (active) setState({ status: 'denied' })
+        return
+      }
+      const pos = await Location.getCurrentPositionAsync({})
+      if (active) setState({ status: 'granted', coords: pos.coords })
+    })()
+    return () => { active = false }   // ignora resultados obsoletos tras el desmontaje
+  }, [])
+
+  return state
+}
+```
+
+### Almacenamiento seguro para tokens
+
+```tsx
+import * as SecureStore from 'expo-secure-store'
+
+await SecureStore.setItemAsync('auth_token', token)   // Keychain / Keystore
+const token = await SecureStore.getItemAsync('auth_token')
+```
+
+## Ejemplos de código
+
+### Una pantalla completa: ruta → query → lista → estados
+
+```tsx
+// app/(tabs)/orders.tsx
+import { memo, useCallback } from 'react'
+import { FlatList, Text, View } from 'react-native'
+import { useQuery } from '@tanstack/react-query'
+import { z } from 'zod'
+
+const OrderSchema = z.object({ id: z.string(), total: z.number(), status: z.string() })
+const OrdersSchema = z.array(OrderSchema)
+type Order = z.infer<typeof OrderSchema>
+
+function useOrders() {
+  return useQuery({
+    queryKey: ['orders'],
+    queryFn: async () => OrdersSchema.parse(await api.listOrders()),
+  })
+}
+
+// Memoizado para que su referencia sea estable entre renders (ver la guía de listas).
+const OrderRow = memo(function OrderRow({ item }: { item: Order }) {
+  return (
+    <View className="px-4 py-3 border-b border-neutral-200">
+      <Text className="font-medium">#{item.id}</Text>
+      <Text className="text-neutral-500">{item.status} · ${item.total}</Text>
+    </View>
+  )
+})
+
+export default function OrdersScreen() {
+  const { data, isLoading, isError, refetch, isRefetching } = useOrders()
+  const renderItem = useCallback(({ item }: { item: Order }) => <OrderRow item={item} />, [])
+
+  if (isLoading) return <Centered><Text>Cargando…</Text></Centered>
+  if (isError) return <Centered><Text accessibilityRole="alert">No se pudieron cargar los pedidos.</Text></Centered>
+  if (!data?.length) return <Centered><Text>Aún no hay pedidos.</Text></Centered>
+
+  return (
+    <FlatList
+      data={data}
+      keyExtractor={(o) => o.id}
+      onRefresh={refetch}
+      refreshing={isRefetching}
+      renderItem={renderItem}
+    />
+  )
+}
+```
+
+### Un formulario: React Hook Form + resolver de Zod
+
+```tsx
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { TextInput, Button, Text } from 'react-native'
+
+const Schema = z.object({ email: z.string().email('Correo inválido') })
+type FormValues = z.infer<typeof Schema>
+
+export function EmailForm({ onSubmit }: { onSubmit: (v: FormValues) => void }) {
+  const { control, handleSubmit, formState: { errors } } = useForm<FormValues>({
+    resolver: zodResolver(Schema),
+    defaultValues: { email: '' },
+  })
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="email"
+        render={({ field: { value, onChange, onBlur } }) => (
+          <TextInput
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            accessibilityLabel="Correo electrónico"
+          />
+        )}
+      />
+      {errors.email && <Text accessibilityRole="alert">{errors.email.message}</Text>}
+      <Button title="Guardar" onPress={handleSubmit(onSubmit)} />
+    </>
+  )
+}
+```
+
+## Antipatrones
+
+```tsx
+// MAL: array grande mapeado dentro de un ScrollView (sin virtualización, con tirones, alto consumo de memoria)
+<ScrollView>{items.map((i) => <Row key={i.id} item={i} />)}</ScrollView>
+// BIEN: FlatList / FlashList
+
+// MAL: datos del servidor copiados a un store de cliente (dos fuentes de verdad, datos obsoletos)
+const useStore = create((set) => ({ users: [], setUsers: (u) => set({ users: u }) }))
+useEffect(() => { getUsers().then(setUsers) }, [])
+// BIEN: useQuery es dueño del estado de servidor; deriva lo que necesites
+
+// MAL: tokens en AsyncStorage (sin cifrar)
+await AsyncStorage.setItem('auth_token', token)
+// BIEN: expo-secure-store
+
+// MAL: confiar en los parámetros de un deep link
+const { id } = useLocalSearchParams(); fetchUser(id)
+// BIEN: valida con Zod antes de usar
+
+// MAL: objeto de estilo inline recreado en cada render en una ruta caliente
+<View style={{ padding: 16, backgroundColor: '#fff' }} />
+// BIEN: StyleSheet.create a nivel de módulo, o className de NativeWind
+
+// MAL: secreto real incluido en el bundle
+const STRIPE_SECRET = 'sk_live_...'
+// BIEN: mantén las llamadas privilegiadas en el servidor; distribuye solo claves públicas protegidas por reglas del backend
+```
+
+## Buenas prácticas
+
+- Mantén los archivos de ruta delgados; pon la lógica en componentes de pantalla y hooks `use*`.
+- Valida toda entrada externa (respuestas de API, parámetros de ruta, payloads de push) con Zod.
+- Deja que TanStack Query sea dueño del estado de servidor; mantén los stores de cliente pequeños.
+- Renderiza siempre los estados de carga, error y vacío — nunca solo un spinner sin fallback.
+- Virtualiza las listas; memoiza `renderItem`; proporciona un `keyExtractor` estable.
+- Usa `react-native-reanimated` para animación (hilo de UI); evita trabajo pesado en el hilo JS.
+- Guarda los tokens en `expo-secure-store`; nunca confíes en el cliente para la autorización.
+- Respeta las safe areas, el Dynamic Type y los roles/etiquetas de accesibilidad desde el inicio.
+- Confirma la compatibilidad de cada dependencia nativa con la New Architecture antes de cada release.
+
+## Skills relacionadas
+
+- `patrones-frontend` — patrones de React/Next.js (web); útil para conceptos compartidos de React, pero específico del DOM.
+- `estandares-codigo` — modismos de TypeScript/JavaScript que aplican al código RN.
+- `flujo-tdd`, `testing-e2e` — proceso de testing (usa Jest + React Native Testing Library, y Maestro/Detox para RN).
+- `revision-seguridad` — checklist general de seguridad que complementa la guía de bundle/secretos de RN de arriba.