Give state one owner.
Navigation in the URL. Remote records in the query cache. Unsaved values in the form. Derived values are not another store.
React State Ownership →← Frontend EngineeringInterfaces that
01 02 03 An icon is not
A small React fixture.
25 ORIGINAL SKILLS · THREE FOCUSED BUNDLES
Interfaces that
hold together.
React architecture, deliberate data flow and a coherent design system. Build the happy path—and the states that make an interface dependable.
ReactNext.jsTanStack QueryTailwindReact Hook FormReact Icons
START WITH OWNERSHIP
Three decisions before more code.
Make failure a real state.
Keep useful same-identity data when refresh fails. Restore an owned optimistic update without erasing a newer result.
TanStack Query Engineering →Make the action understandable.
A coherent icon family, a named button, visible focus and a responsive layout. The glyph supports meaning; it does not replace it.
Icon System Integration →DESIGN MEETS BEHAVIOR
An icon is not
an accessible name.
Use the existing family, import deliberately and name the action on the button. Keep the SVG decorative when the control already carries its meaning.
React Icons and its source icon families remain external libraries. The fixture preserves their notices; the original skill is the integration procedure.
Read the icon integration skill →Original React recipe / Bootstrap family
import { BsArrowClockwise } from 'react-icons/bs';
<button type="button" aria-label="Refresh items" onClick={refresh}>
<BsArrowClockwise aria-hidden="true" focusable="false" />
</button>Named imports · Keyboard semantics · Decorative SVG · Family notices
BEYOND THE HAPPY PATH
A state matrix you can inspect.
A background refresh fails
Keep the same workspace’s previously accepted rows, show a refresh error and retain a reachable retry action.
Open the responsible skill →The server rejects a form
Keep the draft, map the error to its field and focus a useful control. Reset only after an accepted save.
Open the responsible skill →An old search finishes late
The new filter owns the view. Query identity and cancellation prevent the obsolete result from replacing it.
Open the responsible skill →A narrow screen hides an action
Adapt the layout while preserving required controls and reading order. Do not hide the entire document’s overflow to conceal a defect.
Open the responsible skill →EXECUTABLE SOURCE, SEPARATE FROM THE GUIDE
A small React fixture.
A clear testing boundary.
The optional local example actually uses React, TanStack Query, React Hook Form, Tailwind and React Icons. Its test-controlled API uses synthetic data. This public guide is static—it does not run that app or connect to a product.
Inspect, install deliberately, then qualify.
npm ci --prefix evals/frontend --ignore-scripts
npm --prefix evals/frontend run check
npm --prefix evals/frontend run build
npm --prefix evals/frontend testNot a Next.js deployment, live-agent evaluation, screen-reader certification or field performance result.