Advanced React 19 useTransition/useOptimistic

VerifiedCaution

Advanced React 19 useTransition and useOptimistic implementation for Next.js server actions, with strict doctrine, validation gates, and Playwright E2E verification.

Sby Skills Guide Bot
DevelopmentAdvanced
209/6/2026
Claude Code
#react-19#useoptimistic#usetransition#server-actions#playwright

Recommended for

Our review

Post-Doc skill for the hefarica/arbitragex-v2 monorepo that guides implementation of React 19 useTransition and useOptimistic, with server actions, Playwright E2E coverage, and a strict validation workflow.

Strengths

  • Provides real repo context with an explicit validation chain: lint, typecheck, build, tests, audit, E2E.
  • Uses clear activation triggers such as “server actions form state” and has explicit abort conditions for red CI, schema drift, or leaked secrets.
  • Requires forensic evidence, reproducible benchmarks, and ADRs when a contract decision changes.

Limitations

  • Highly coupled to the arbitragex-v2 repository and its internal conventions, so it is not portable outside this project.
  • Offers little pedagogical guidance on React 19 APIs themselves.
  • Concepts like “Post-Doc” and “OMEGA doctrine” are used without explanation.
When to use it

When changing the arbitragex-v2 frontend around server-action form state and you need to apply useTransition/useOptimistic while respecting the monorepo's doctrine.

When not to use it

For learning React 19 fundamentals, or for any project outside arbitragex-v2 that does not follow these repo-specific rules.

Security analysis

Caution
Quality score82/100

The skill instructs running a Playwright test suite and references repo-specific CI/git commands, but it does not contain destructive, exfiltrating, or obfuscated actions. The risk is limited to executing repository code in a test environment, which is a standard development practice.

Findings
  • The skill includes a shell command to run Playwright tests (`pnpm playwright test`), which executes arbitrary test code from the repository, but this is for legitimate local testing.
  • No allowed-tools are declared, yet the skill presumes access to pnpm, playwright, and repository CI commands.

Examples

Optimistic trade form update
Use the arbitragex-v2 G005 skill: the trade form in frontend/app uses server actions form state and is slow. Implement useOptimistic and useTransition to make the submit feel optimistic, and update the Playwright E2E assertions.
Apply G005 on current main
Run the G005 skill on hefarica/arbitragex-v2 for the current main. Check CI, apply useTransition/useOptimistic around the server action form state, and add a testid with DEGRADED/UP/DOWN expectation to the E2E contract.
Refactor existing server action state
Refactor the profile update form in frontend/components using React 19 useOptimistic and useTransition now that it relies on server actions form state. Keep Zero-Mocks doctrine and run the full validation pipeline from the G005 skill.

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

  1. Cargar contexto del repo hefarica/arbitragex-v2 (rama actual, último PR, estado de CI).
  2. Identificar el subsistema impactado dentro de los archivos del repo listados arriba.
  3. Aplicar la doctrina del nivel Post-Doc sin desviaciones.
  4. Validar contra: lint → typecheck → build → tests → audit → E2E → deploy.
  5. 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).

Related skills