Skills Guide

Advanced React 19 useTransition/useOptimistic

VerifiedSafe

Advanced skill for implementing React 19 useTransition and useOptimistic for server actions in a Next.js monorepo, including Playwright E2E tests.

Sby Skills Guide Bot
DevelopmentAdvanced
409/2/2026
Claude CodeCursorWindsurfCopilotCodex
#react-19#usetransition#useoptimistic#server-actions#nextjs

Recommended for

Code reviewClaude CodeBackend developerCursorFrontend developerCopilot

Our review

This skill applies the OMEGA doctrine of the arbitragex-v2 monorepo to use React 19's useTransition and useOptimistic for server-action-driven form state, validated with Playwright E2E.

Strengths

  • Focused on advanced React 19 optimistic UI and pending-state management for server actions.
  • Enforces a strict validation pipeline: lint, typecheck, build, tests, audit, and E2E.
  • Provides explicit abort conditions to prevent silent regressions.
  • Can be triggered by targeted prompts such as 'server actions form state'.

Limitations

  • Tightly coupled to the hefarica/arbitragex-v2 monorepo and its OMEGA doctrine.
  • Requires a full CI/E2E setup to reproduce the claimed guarantees.
  • Not directly reusable in generic React projects without heavy adaptation.
When to use it

When working on a Next.js form in the arbitragex-v2 repo that relies on server actions and needs advanced transition or optimistic-state handling.

When not to use it

For an isolated React component or a project that does not follow the architecture and contracts of the arbitragex-v2 repo.

Security analysis

Safe
Quality score75/100

The skill contains standard development and validation commands (pnpm, gh, cargo, playwright) for a specific repository, with no destructive, exfiltration, or obfuscation instructions. It even includes a safeguard to abort and rotate if secrets are found in plaintext.

No concerns found

Examples

Optimistic server action form
Use G005 advanced React 19 useTransition/useOptimistic to refactor the order form state in arbitragex-v2 so that server action submissions are optimistic, with no mocks and full Playwright E2E coverage.
Investigate blocking form state
The frontend form in frontend/app/* blocks after a server action. Apply the arbitragex-v2 G005 skill: add useTransition and useOptimistic, then run the E2E contract tests for DEGRADED/UP/DOWN states.
Audit against OMEGA doctrine
Audit my React 19 server action form state implementation in arbitragex-v2 using the G005 skill, check that useTransition/useOptimistic are correctly applied, and provide forensic evidence with playwright traces and 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

  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

Next.js App Router Expert

Development

A skill that turns Claude into a Next.js App Router expert.

Claude CodeCursoradvanced
890
234
3,494
Admin

README Generator

Development

Creates professional and comprehensive README.md files for your projects.

claudeCursorWindsurfbeginner
259
72
1,393
Admin

API Documentation Writer

Development

Generates comprehensive API documentation in OpenAPI/Swagger format.

claudeCursorWindsurfintermediate
156
44
1,275
Admin