React Dev Skill for Typed Form Events in Claude Code
Use the React Dev skill to type component props and browser events and choose APIs supported by the project's React version.
中文Install in Claude Code
Use a React TypeScript project. The example works on React 18 or 19. Check the installed react and @types/react versions before using version-specific APIs.
- Get the complete `cli-tool/components/skills/development/react-dev` directory from the pinned GitHub commit.
- Copy it into the target project's `.claude/skills/`. Check `.claude/skills/react-dev/SKILL.md`, start Claude Code at the project root, and call `/react-dev`.
Example task
Give SearchBox a value prop and onQueryChange: (query: string) => void. Type its handler as React.ChangeEvent<HTMLInputElement>. Enter camera, clear it, and run the project type check.What to check
The parent receives camera and then an empty string. Supplying a number where value expects a string produces a type error.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does the input require React 19's ref prop?
The example only uses value and onChange. Match the installed React version and project conventions when you add a ref.