just-vibeReact · inspect by default
/react-audit
Review components, hooks, state ownership, and behavioral risks
Use for React correctness inspection; react-rerenders requires performance evidence and react-effects targets synchronization.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select react-audit from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv react-audit, /just-vibe react-audit and /jv:react-audit in Claude. See shortcut setup and context examples.
/just-vibe:react-audit Audit checkout hooks and state ownership for reachable behavioral bugs./just-vibe:react-audit Audit a reordered editable list and a component with an early return before a hook./just-vibe:react-audit Review React source without a browser; mark interaction behavior unverified.What the agent does
- Identify the React/framework version, the server/client boundary and existing tests.
- Trace props, state ownership, hook order, key identity and lifecycle through reachable interaction states, and rank concrete risks by their reachable failure paths.
Inputs
- component tree/feature and behavioral concerns.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Hooks, ownership, identity, effects, async boundaries, and component contracts.
- Writes
- No source changes in inspect/plan. Save only requested planning artifacts. A separately requested repair uses the relevant implementation workflow.
- Mode
- Inspect; component tree/feature and behavioral concerns.
- Prerequisites
- Component source, React/framework versions, state/data conventions, and relevant test tooling. Browser/profiler evidence is needed for measured rendering claims. Preserve existing framework and state libraries unless changing them is part of the request.
Expected output
- Findings with component location, triggering interaction, state transition, severity rationale and a repair suggestion.
How the work is checked
- A conditional hook or unstable key problem includes its trigger; a stylistic preference is not presented as a correctness bug.
When to stop or clarify
- Do not rewrite components during an audit or infer runtime rendering cost solely from source size.
Handling missing context
- Infer
- Read component callers, ownership of state, installed React/framework versions and existing interaction tests.
- Assume
- Retain the framework and state library; preserve intended loading/error/empty behavior while resolving the named bug.
- Ask
- Ask when product semantics such as persistence, optimistic failure or reset behavior have conflicting evidence; missing profiler access only blocks measured performance claims.
Technical guidance
- Evidence
- Inspect component ownership, hook dependencies, keys, server/client boundaries and concrete interactions.
- Method
- Trace props and state across an actual transition; apply security guidance only to changed trust boundaries such as raw HTML or server actions.
- Pitfall
- Missing memoization is not automatically a defect, and ordinary JSX text is escaped by React.
- Check
- Tie each finding to a reproducible state/trigger and check the caller or framework guard before reporting it.
Situational decisions
When source suggests excess rendering without a profile: Report a performance hypothesis separately from demonstrated correctness defects.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.