React Production Skill

Version: 1.1.0 | Updated: 2026-07-16

Purpose

Execute a repeatable React change or diagnosis for a component, Hook, context boundary, or route UI, including native evidence, validation, rollout, and rollback.

Trigger

Activate when source, manifests, runtime configuration, topology, data contracts, or operating behavior for React can change. Do not activate for a name-only documentation edit.

Why

Rendering stays pure; state has one owner; Effects synchronize only with external systems. The skill terminates only on React evidence, not an agent's confidence.

How

Fingerprint the target. Capture package.json plus the lockfile entries for React, renderer, router, state, and test libraries and tsconfig.json and ESLint React/Hook rules.
Select the boundary. Name the changed component, Hook, context boundary, or route UI, its owner, trust/data boundary, SLO, and mixed-version window.
Establish failure hypotheses. Cover Rules of Hooks violations; stale closures and effect feedback loops; unstable keys or identity; hydration divergence; excessive render or bundle cost.
Preserve evidence. Collect the remaining artifacts before any destructive action: the nearest component, test, CSS, and Storybook conventions; React DevTools Profiler commit/flamegraph for the reproduced interaction.
Apply the smallest coherent change. Satisfy the architecture rules and keep rollback compatible.
Run native verification in repository order.
npm run lint -- --max-warnings=0
npx tsc --noEmit
npm test -- --runInBand using the repository test script
npm run build and inspect the emitted bundle report when configured
React DevTools Profiler: record the exact interaction and compare committed renders
Apply review gates.

Hooks are top-level and exhaustive dependency analysis is satisfied without suppression.
derived values are computed during render instead of mirrored through an Effect.
state is colocated with its owner; context values and callbacks avoid accidental identity churn.
list keys represent durable entity identity, never position where order can change.
loading, empty, error, disabled, and interrupted interaction states are represented.
native HTML semantics, focus behavior, accessible names, and keyboard operation are tested.
tests assert user-visible behavior with the project's renderer rather than component internals.
Profiler evidence justifies memoization; useMemo and memo are not speculative.

Roll out and observe. Use the deployment checklist and stop on its native health thresholds.
Rollback when required. Disable the owning feature flag first; otherwise redeploy the previous immutable client assets while preserving API compatibility for already-cached bundles.

Verification

The React evidence packet must identify command, target, UTC time, artifact/revision, exit status, and observed signal. It must also retain package.json plus the lockfile entries for React, renderer, router, state, and test libraries. For manual component, Hook, context boundary, or route UI checks, record environment, operator, exact steps, and result.

Failure recovery

A missing version or target fingerprint blocks mutation.
A native validator failure is corrected at its causal source; it is not disabled.
An unreproducible symptom triggers better React telemetry before speculative repair.
A destructive operation requires backup/restore or state-recovery evidence appropriate to the platform.
A rollback incompatibility changes the plan to containment and forward fix.

Communication protocol

Report the React boundary, facts, hypotheses, commands actually run, changed artifacts, rollout state, rollback readiness, and residual risk. Never present a proposed command as executed.

Termination criteria

Finish the React workflow only when native validation, applicable review/deployment gates, and recovery signals for Rules of Hooks violations and stale closures and effect feedback loops pass. Otherwise record a named owner and the exact missing React evidence; risk acceptance does not convert a failed native check into a pass.

Version-aware caution

Read the installed react and react-dom versions from the lockfile. Concurrent rendering, form actions, and server integration differ across React and framework releases; never copy an API from current react.dev into an older dependency graph without checking that release's reference.

Tradeoffs

This skill fingerprints React through package.json plus the lockfile entries for React, renderer, router, state, and test libraries before editing and retains the nearest component, test, CSS, and Storybook conventions before recovery. The added work is warranted when Rules of Hooks violations could make Disable the owning feature flag first; otherwise redeploy the previous immutable client assets while preserving API compatibility for already-cached bundles.

Anti-patterns

A page-wide context holding unrelated mutable state causes every consumer to share a render and release boundary.
Do not remove a native warning, validator, policy, or safety limit merely to make generated output pass.
Do not claim a successful result without preserving the command, target, artifact/revision, and observed output.

Enterprise considerations

For React estates, govern design-system packages, browser support, telemetry consent, third-party scripts, and accessibility evidence centrally; product teams retain ownership of feature behavior.

Official sources

Checklist

Trigger and owned boundary are identified.
Version, topology, and native configuration are captured.
Commands and manual checks retain evidence.
Rollout health and rollback threshold are explicit.
No validator or policy was bypassed.

Changelog

1.1.0 (2026-07-16): Added platform-native procedure, commands, evidence, and rollback.
1.0.0 (2026-07-16): Added initial skill.