React Dev 技能：给表单事件和组件属性加类型
EnglishClaude Code 安装步骤
- 从 GitHub 固定提交获取完整的 `cli-tool/components/skills/development/react-dev` 目录。
- 复制到目标项目的 `.claude/skills/`，确认 `.claude/skills/react-dev/SKILL.md`，再从项目根目录启动 Claude Code，输入 `/react-dev`。
中文摘要
用 Claude Code 为 React 组件、输入事件和通用属性补齐 TypeScript 类型，并核对 React 18 与 19 的 API 使用范围。
SKILL.md 中文导读
可复现示例
给已有 SearchBox 加 onQueryChange: (query: string) => void。输入 camera，再删成空字符串，检查父组件收到字符串 camera 和空字符串。运行项目的 TypeScript 检查。工作步骤
- 将 SearchBox 的 value 和 onQueryChange 定义为明确的 props。让输入事件沿 React 的 ChangeEvent<HTMLInputElement> 类型读取 currentTarget.value。
- 沿用项目现有类型检查命令，补测空字符串、普通文字和按退格清空时的回调值。
验收方法
类型检查通过，父组件能收到用户输入的字符串。调用方误传数值时，编译器指出属性不匹配。
GitHub 原文 · 更新日期
适用环境
准备启用 TypeScript 的 React 项目。按现有 react 和 @types/react 版本核对可用 API，示例可在 React 18 或 19 上实现。
常见问题
这个输入框要用 React 19 的 ref 属性吗？
这里仅处理 value 和 change 事件。需要暴露 DOM ref 时再检查项目的 React 主版本和既有组件约定。