Our review

This skill guides the implementation of advanced React 19 useTransition and useOptimistic hooks for server actions form state in a Next.js frontend, enforcing strict E2E validation and evidence-based reporting.

Strengths

Enforces a rigorous workflow with explicit abort conditions (red CI, secret leaks, slippage, etc.).
Combines advanced React 19 patterns with Playwright validation and hard evidence.
Requires reproducible benchmarks and detailed forensic reporting.

Limitations

Specific to the hefarica/arbitragex-v2 monorepo; may need adaptation for other codebases.
Relies on CI, Playwright, OTel, and Vault infrastructure to enforce all rules.
Overkill for simple React projects without server actions.

When to use it

When you need to work on server action form state in a Next.js frontend and apply useTransition or useOptimistic following the repository's doctrinal rules and E2E validation pipeline.

When not to use it

For standalone React projects without server actions, or when the full E2E validation pipeline and abort conditions are irrelevant.

Examples

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).

Advanced React 19: useTransition/useOptimistic

Recommended for