技能 react-dev

📦

react-dev

Name: react-dev
Author: softaworks

v1.0.0 内容修订 r1 安全 ⚙️ 外部命令⚡ 包含脚本🌐 网络访问🔑 环境变量📁 文件系统访问

构建类型安全的 React 组件

React TypeScript 工作通常需要精确的事件、hook 和路由类型。此技能提供针对类型化组件、React 19 API 和路由的聚焦模式。

支持: Claude Codex Code(CC)

🥈 82 白银

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "react-dev" from https://skillstore.io/skills/softaworks-react-dev.md and its manifest at https://skillstore.io/api/skills/softaworks-react-dev/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/softaworks-react-dev.md 已签名 manifest GET /api/skills/softaworks-react-dev/manifest 已签名 lockfile GET /api/skills/softaworks-react-dev/lockfile

测试它

正在使用“react-dev”。我需要一个用于 text 和 number inputs 的类型化 form field 组件。

预期结果:

该技能会建议扩展原生 input props、使用类型化 value model、精确的 change handlers，以及可访问的 error identifiers。

正在使用“react-dev”。我正在将一个 React 18 组件迁移到 React 19。

预期结果:

该技能会识别已弃用的 forwardRef 或 useFormState 用法，并提出 ref-as-prop 和 useActionState 模式。

正在使用“react-dev”。我需要类型化的 route params 和 search params。

预期结果:

该技能会概述 TanStack Router 或 React Router 模式，用于经过验证的 params、loader data 和导航。

安全审计

安全

v6 • 2026/7/9 打开版本化报告

All 132 static findings were reviewed against the Markdown-only skill content. They are false positives caused by fenced code blocks, TypeScript template literals, React key and event terminology, normal fetch and dynamic import examples, server-only environment access examples, and generated router paths. No prompt injection, executable malware behavior, or malicious semantic intent was found.

已扫描文件

5,219

分析行数

复核项

已忽略误报

风险因素

⚙️ 外部命令 (50)

examples/generic-components.md:109-132 examples/generic-components.md:237-244 examples/generic-components.md:305-317 examples/generic-components.md:324-339 examples/generic-components.md:339-349 examples/generic-components.md:349-368 examples/generic-components.md:459-462 examples/generic-components.md:462-495 examples/server-components.md:38-44 examples/server-components.md:149-150 examples/server-components.md:150-166 README.md:212-238 references/event-handlers.md:42-58 references/event-handlers.md:277-296 references/react-19-patterns.md:111-118 references/react-19-patterns.md:480-506 references/react-router.md:184-192 references/react-router.md:226-233 references/react-router.md:531-533 references/react-router.md:797-810 references/tanstack-router.md:135-138 SKILL.md:30-39 SKILL.md:39-43 SKILL.md:43-52 SKILL.md:52-56 SKILL.md:56-61 SKILL.md:61-71 SKILL.md:71-79 SKILL.md:79-83 SKILL.md:83-89 SKILL.md:89-93 SKILL.md:93-104 SKILL.md:104-112 SKILL.md:112-133 SKILL.md:133-143 SKILL.md:143-146 SKILL.md:146-150 SKILL.md:150-153 SKILL.md:153-157 SKILL.md:157-168 SKILL.md:168-172 SKILL.md:172-178 SKILL.md:178-182 SKILL.md:182-190 SKILL.md:190-202 SKILL.md:202-235 SKILL.md:235-239 SKILL.md:239-245 SKILL.md:245-257 SKILL.md:257-262

⚡ 包含脚本 (2)

examples/server-components.md:440 references/react-router.md:307

🌐 网络访问 (6)

examples/server-components.md:38 examples/server-components.md:38 references/hooks.md:263 references/react-19-patterns.md:428 references/react-19-patterns.md:480 references/tanstack-router.md:135

🔑 环境变量 (3)

examples/server-components.md:436 examples/server-components.md:436 examples/server-components.md:436

📁 文件系统访问 (1)

references/react-router.md:23

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/softaworks-react-dev/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/softaworks-react-dev/security.svg)](https://skillstore.io/skills/softaworks-react-dev?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/softaworks-react-dev?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/softaworks-react-dev/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/softaworks-react-dev.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

softaworks. (2026). react-dev security audit report (audit version 6) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/softaworks-react-dev/audits/6

BibTeX 引用

@techreport{softaworks-softaworks-react-dev-2026,
  author = {softaworks},
  title = {react-dev security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/softaworks-react-dev/audits/6},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-dev security audit report (audit version 6)"
version: "1.0.0"
type: report
authors:
  - name: "softaworks"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/softaworks-react-dev/audits/6"
identifiers:
  - type: other
    value: "skillstore:softaworks-react-dev:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

100

可维护性

内容

社区

规范符合性

你能构建什么

创建类型化组件

构建可复用的 React 组件，并具备准确的 props、children、refs 和变体类型。

采用 React 19 模式

在 TypeScript 中使用 ref as prop、useActionState、use()、Server Components 和 server actions。

实现类型化路由

应用类型安全的 route params、loader data、search params 和导航模式。

试试这些提示

为基础组件添加类型

帮我用 TypeScript 为一个 React 组件添加类型。它应扩展原生 button props，并支持 primary 和 secondary 变体。

为事件处理器添加类型

审查我的 React 表单处理器，并将宽泛的事件类型替换为用于 inputs、submit 和 keyboard actions 的精确 TypeScript 事件类型。

创建泛型组件

设计一个泛型 React table 组件，它能从数据类型推断 column keys，并支持自定义 render functions。

规划 React 19 路由

帮助将这个 React TypeScript 功能迁移到 React 19，并使用 Server Components、useActionState 和类型安全的 router loader data。

最佳实践

使用具体的 React 事件类型，并用 currentTarget 实现特定元素的类型定义。
使用可辨识联合来建模组件变体，而不是宽泛的可选 props。
通过文件边界和 directive 将 Server Components 与 Client Components 分离。

避免

对事件处理器或泛型 render props 使用 any。
在新代码中使用 React 19 forwardRef 或已弃用的 useFormState。
在同一个模块中混用 server-only APIs 和 client components。

常见问题

此技能面向哪些 React 版本？

它涵盖 React 18 和 React 19，并为 React 19 迁移模式提供明确指导。

它是否包含 React Native 指导？

不包括。该技能专注于使用 TypeScript 和浏览器事件类型的 Web React。

它能帮助处理类型化 hooks 吗？

可以。它涵盖 useState、useRef、useReducer、useContext、自定义 hooks 和 tuple return typing。

它支持路由示例吗？

支持。它包含 TanStack Router 和 React Router v7 模式，用于类型化 params、loaders 和 search state。

它能生成生产就绪代码吗？

它提供可靠的 TypeScript 模式，但项目特定的验证、授权和数据访问仍需审查。

此技能只适合高级用户吗？

不是。它包含基础组件类型定义、中级事件模式，以及高级泛型或路由示例。

开发者详情

作者

softaworks

许可证

MIT

作者版本

v1.0.0

Skillstore 修订

仓库

https://github.com/softaworks/agent-toolkit/tree/main/skills/react-dev/

引用

3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88

维护新鲜度

2026/7/18

使用量

9 次下载 · 523 次浏览

文件结构

📁 examples/

📄 generic-components.md

📄 server-components.md

📁 references/

📄 event-handlers.md

📄 hooks.md

📄 react-19-patterns.md

📄 react-router.md

📄 tanstack-router.md

📄 README.md

📄 SKILL.md

softaworks 的更多技能

查看全部

📦

meme-factory

使用 Memegen 生成表情包

团队经常需要快速制作视觉幽默内容，而不必打开设计工具。此技能可根据提示生成表情包 URL、Markdown 嵌入内容和文字表情包格式。

设计与创意查看

📦

humanizer

用自然编辑让 AI 草稿更像人写

AI 草稿通常听起来 polished 但泛泛而谈。此技能会找出常见的 AI 写作模式，并用更清晰、更自然的措辞重写文本。

写作与内容查看

📦

database-schema-designer

设计生产数据库架构

团队需要既能保持数据完整性，又能在产品增长时维持高性能的架构。此技能可将领域需求转化为带有索引、约束和迁移指导的 SQL 或 MongoDB 设计。

数据与分析查看

📦

reducing-entropy

降低代码库熵

代码库会不断增长，因为每次变更通常都会添加比移除更多的结构。此技能为 Claude、Codex 和 Claude Code 提供一种删除优先的审查方法，以得到更小的最终设计。

编码与开发查看

📦

mermaid-diagrams

为软件文档创建 Mermaid 图表

团队通常需要清晰的图表，并且这些图表应与代码和文档保持紧密关联。此技能将指导 Claude、Codex 和 Claude Code 使用 Mermaid 语法创建可维护的可视化模型。

文档查看

📦

writing-clearly-and-concisely

撰写清晰、简洁的文字

AI 辅助草稿常常变得含糊、冗长或带有宣传口吻。此技能应用基于 Strunk 的规则和 AI 写作模式检查，使文字更直接。

写作与内容查看

查看全部

📦

senior-frontend

构建可用于生产的前端功能

由 davila7

前端团队需要在各项目中获得一致的 React 和 Next.js 指导。此技能提供用于前端分析的参考工作流、质量实践和辅助脚本。

编码与开发查看

📦

react-nextjs-development

构建现代 React 和 Next.js 应用

由 sickn33

React 和 Next.js 项目通常需要在路由、组件、样式、数据、表单、测试和部署方面保持一致的设置选择。此技能为 Claude、Codex 和 Claude Code 提供基于阶段的工作流，用于规划和构建现代前端应用。

编码与开发查看

📦

playwright-testing

提升 Playwright 测试覆盖率

由 C0ntr0lledCha0s

当配置、定位器和 fixtures 不一致时，Playwright 测试套件可能会变得不稳定。此技能提供可靠浏览器测试、调试和可复用页面对象的实用模式。

编码与开发查看

📦

nestjs-code-audit

Audit NestJS Code with Evidence-Backed Findings

由 amirtaherkhani

NestJS repositories can hide boundary flaws and runtime risks that lint results alone cannot reveal. This skill combines local evidence collection and semantic review into one prioritized report.

编码与开发查看

📦

starknet-js

使用 starknet.js 构建 Starknet 应用

由 internet-court

Starknet 集成需要精确处理提供程序、账户、交易和费用。此技能为 Claude、Codex 和 Claude Code 提供实用的 starknet.js v9 模式。

编码与开发查看

📦

vue-best-practices

提升 Vue 3 代码质量

由 vuejs-ai

Vue 项目常常会随着时间积累响应式、组件和性能方面的问题。此技能为更安全的模式和更清晰的代码提供有针对性的 Vue 3 指导。

编码与开发查看

react-dev

使用我的智能体安装

Agent 可读资源

测试它

安全审计

风险因素

复制报告链接

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 评分

你能构建什么

创建类型化组件

采用 React 19 模式

实现类型化路由

试试这些提示

最佳实践

避免

常见问题

开发者详情

softaworks 的更多技能

meme-factory

humanizer

database-schema-designer

reducing-entropy

mermaid-diagrams

writing-clearly-and-concisely

相关技能

senior-frontend

react-nextjs-development

playwright-testing

nestjs-code-audit

starknet-js

vue-best-practices