/react-component

Make it your own.

In Claude Code, use the slash command and add your context. In Codex, select react-component from the just-vibe skill picker, then send the same brief.

Version 0.11.0 also supports /jv react-component, /just-vibe react-component and /jv:react-component in Claude. See shortcut setup and context examples.

What the agent does

1. Inspect existing primitives and the consumer contract. Choose state ownership, semantics and interaction behavior before implementing the narrow component API. On React 19 or later, accept ref as a regular prop; use forwardRef only for supported older versions.
2. Select only the relevant scenario guide for dialogs, menus and other non-dialog overlays, comboboxes or date inputs; implement normal and recovery states, then verify real interactions and parent-controlled updates.

Inputs

• purpose, props/API, visual constraints, states, and usage context.

Optional context: scope, references, constraints, successCriteria, environment, mode, budget.

Scope

Reads

Reusable component plus necessary integration/example; no unrelated design-system replacement.

Writes

Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.

Mode

Apply; purpose, props/API, visual constraints, states, and usage context.

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

• Component, documented contract, usage, and meaningful checks.
• Component API, rendered states, keyboard behavior and consumer example.

How the work is checked

• Controlled updates behave consistently; keyboard users can perform the primary interaction.

When to stop or clarify

• Avoid speculative configuration options and new libraries without need. Missing design details use established conventions rather than blocking routine work.

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

Read the semantic interaction contract, controlled/uncontrolled API, state variants and existing component primitive.

Method

Use the relevant dialog, combobox or date scenario; prefer a native control or proven primitive when it meets requirements.

Pitfall

ARIA labels alone do not implement keyboard behavior, focus management or controlled value semantics.

Check

Exercise keyboard, pointer, disabled/invalid states and two instances; verify focus return and announced errors where applicable.

Situational decisions

When the component opens a modal or non-modal dialog: Specify initial/contained/return focus and dismissal with the dialog guide.

When it is a menu button, tabs, disclosure, tooltip or popover: Apply the matching pattern from the menu guide: roving tabindex or aria-activedescendant, arrow keys and typeahead where the pattern has them, Escape returning focus to the trigger, and Tab leaving without a focus trap. Prefer native details, the popover attribute or an existing primitive.

When search text and selection are different states: Use the combobox guide for ownership, keyboard/IME behavior and late search results.

When the value contains dates or ranges: Resolve date-only versus instant semantics, locale, invalid input and range boundaries before choosing storage.

When parent state changes after mount: Preserve a consistent controlled ownership contract and test reset and two independent instances.

The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.

Keep exploring