agentleFS
Sign inStart free
p10ns11yp10ns11y/skills/react-client-expert/SKILL.md

react-client-expert

Skill2 starsChanged 40 days agoMITView on GitHub

Senior client-side React (no RSC for UI): minimal state, deliberate effects, use() + Suspense and TanStack Query for data, XState for complex flows, refs, restrained Context. Use for components, hooks, fetching, effects, or client refactors in .tsx files.

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    When correct: setup + cleanup (abort, removeListener, disconnect).

    line 69

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

react-client-expert

Load rule: Formal SoT. Code samples + narrative → references/patterns.md only if needed.

// Scope
Client only ("use client" when Next requires)
¬ async Server Components for interactive UI state

// Lint note
Biome useExhaustiveDependencies may be OFF — fix the model, not dep stuffing

// Data preference order
useQuery / useMutation  ≽  use(promise)+Suspense  ≻  useEffect+fetch+useState

Fetch: do not conflate RSC vs client

MechanismLayerRole
async Server ComponentserverRSC stream — out of scope for interactive client logic
use(promise) / use(context)clientsuspend during render; needs <Suspense>
TanStack Queryclientcache, dedupe, refetch, invalidation — default non-trivial data
useEffect+fetch+useStateclientavoid for load-by-key

Rules for use(promise): stable promise (not bare use(fetch()) every render) · Suspense above · rejections → error boundary · refetch via new promise/key or graduate to Query.

State: default to zero useState

NeedPreferAvoid
computable from props/statederive in rendersync useState+effect
expensive pureuseMemo if hot/profiledmemo everything
form fieldcontrolled or uncontrolled+refduplicate DOM in state
remote dataQuery / use()effect fetch soup
form+async UI togetheruseReducer + status enumN booleans that desync
multi-step / guards / cancelXStateeffect chains + flags
high-freq (pointer/scroll)ref + rAF/DOMcontext every move
theme/auth read-mostlynarrow Contextgiant hot context
status ∈ { idle, loading, error, success }  // mutually exclusive phases
isLoading ≔ status === "loading"           // derive; don't store extra bool

Graduate: useReducer (one feature, linear) → Query mutation (retries/invalidation) → XState (guards, parallel, cancel).

useEffect: last resort

OK: subscriptions, imperative widgets, post-commit analytics, browser APIs without React wrapper.

Forbidden uses: initial/keyed load · transform for render · reset when props change (use key) · chain user events · notify parent (call in handler).

When correct: setup + cleanup (abort, removeListener, disconnect); deps = semantic only.

Refs / Context / XState / components

AreaRule
Refsno re-render needed (timers, last value, DOM measure via callback ref)
Contextsplit by update frequency; avoid high-churn in provider value
XStateidle/loading/error/success + guards/parallel/retry → colocate featureMachine.ts
Componentscontainer vs presentation · colocate state · stable list keys · event handlers not effect-watchers

React 19 client: use · useActionState · useOptimistic · useEffectEvent — see patterns.

Perf (measured only)

memo / useCallback only for hot leaves or true effect deps · virtualize long lists · startTransition / useDeferredValue for expensive input. Default: no memo.

Review checklist

  • useState+effect → derive or key?
  • submit/async → reducer+status enum?
  • each effect has cleanup if it subscribes?
  • machine/store shrinks boolean soup?
  • context frequency safe?
  • refs for DOM/imperative?
  • Query/use() not effect-load?
  • no async Server Component for interactive UI?

Anti-patterns

¬Do
sync derived state in effectderive in render
fetch without abort / QueryQuery or abort+cleanup
loading+error+result bool soupstatus enum + reducer
giant Context every keystrokelocal state / store / machine
async client function component as fetch"use client" + use/Query

Done when: client UI follows tables above; no effect-based loaders for keyed data; review checklist green for touched files.

Patterns/code: references/patterns.md.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free