Notre avis

Ce skill guide l'implémentation des hooks avancés useTransition et useOptimistic de React 19 pour les actions serveur dans un frontend Next.js, en appliquant une doctrine stricte de validation E2E et de reporting.

Points forts

Encadre un workflow rigoureux avec des conditions d'abandon explicites (CI rouge, fuite de secrets, slippage, etc.).
Intègre des patterns React 19 avancés avec validation Playwright et preuves chiffrées.
Exige des benchmarks reproductibles et un reporting forensique détaillé.

Limites

Spécifique au monorepo hefarica/arbitragex-v2, nécessite une adaptation pour d'autres projets.
Dépend d'une infrastructure CI, Playwright, OTel et Vault pour appliquer toutes les règles.
Surdimensionné pour des projets React simples sans actions serveur.

Quand l'utiliser

Lorsqu'il faut modifier des états de formulaire utilisant des actions serveur dans un frontend Next.js, avec implémentation de useTransition ou useOptimistic et validation complète selon la doctrine du repo.

Quand l'éviter

Pour des projets React autonomes sans actions serveur ou lorsqu'aucune chaîne de validation E2E et conditions d'abandon ne sont requises.

Exemples

Implement optimistic UI for trade form

In the arbitragex-v2 frontend, implement useOptimistic for the trade form state using server actions. Follow the G005 skill doctrine, add E2E assertions for DEGRADED/UP/DOWN states, and run the full validation pipeline.

Add useTransition to server action form

Refactor the order submission form to use useTransition and useOptimistic from React 19 for server actions form state. Apply the fail-closed doctrine and verify with Playwright tests.

Validate React 19 hooks with Playwright

Use the G005 skill to update server actions form state with useOptimistic in the Next.js app, then run lint, typecheck, build, tests, audit, and E2E. Provide evidence of the CI checks.

name: arbx-g-g005-advanced-react-19-usetransitionuseoptimistic description: "Post-Doc skill alineada al monorepo hefarica/arbitragex-v2 (Frontend Doctrinal (Next.js + Playwright)). Se activa cuando: server actions form state. Doctrina OMEGA Zero-Mocks · Fail-Closed · El Remoto Manda."

G005 — Advanced React 19 useTransition/useOptimistic

Dominio: Frontend Doctrinal (Next.js + Playwright) Nivel: Post-Doc Trigger: server actions form state Repos de referencia: vercel/next.js · facebook/react · microsoft/playwright · TanStack/query · shadcn-ui/ui · radix-ui/primitives · wevm/viem · wagmi-dev/wagmi Archivos del repo: frontend/app/* · frontend/components/* · frontend/tests/e2e/* · packages/schemas/*

Quick Start

ARBX_BUILD_FOR_LOCAL_E2E=1 ARBX_ASSUME_NO_RPC=1 pnpm playwright test --reporter=list,html

Core Workflow

Cargar contexto del repo hefarica/arbitragex-v2 (rama actual, último PR, estado de CI).
Identificar el subsistema impactado dentro de los archivos del repo listados arriba.
Aplicar la doctrina del nivel Post-Doc sin desviaciones.
Validar contra: lint → typecheck → build → tests → audit → E2E → deploy.
Reportar evidencia en formato Markdown forense (logs, traces, métricas, hash de commit).

Doctrina del Nivel

Aporte de investigación: paper o RFC referenciado.
Benchmarks reproducibles con criterio estadístico (95% CI).
Comparativa contra estado del arte público.

Reglas de Ejecución

| Condición | Acción | |-----------|--------| | CI rojo en main | ABORT — fix-forward, nunca skip | | Drift schema producer↔consumer | ABORT — restaurar isomorfismo Zod/struct | | Cobertura E2E < contrato iter 18 | ABORT — añadir testid + assertion DEGRADED/UP/DOWN | | Secret en plaintext fuera de Vault/age | ABORT — rotar y reportar | | Profit neto ≤ gas + flashloan_fee | ABORT (skill C/E) | | Slippage > banda RiskGate | RESIZE o ABORT (skill C/E) |

Activation Triggers (regex parciales)

server actions form state
advanced react 19 usetransition/useoptimistic
arbitragex-v2 g

Output Esperado

Diff atómico (rustfmt aparte de semántica).
Evidencia: gh pr checks <N>, cargo nextest, traces OTel, screenshots Playwright.
ADR si la decisión cambia contrato (docs/adr/NNNN-*.md).

React 19 avancé : useTransition/useOptimistic

Recommandé pour