📦
prompt-engineering-patterns
86优化生产环境 LLM 提示词
LLM 提示词经常失败，是因为指令、示例和评估标准不清晰。此技能提供模板和工作流，用于改进 Claude、Codex、Claude Code 以及类似工具中的提示词。
效率 查看
技能 react-state-management
📦
react-state-management
内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
选择 React 状态管理工具
React 应用程序经常在没有清晰边界的情况下混合本地数据、共享数据和服务器数据。此技能可帮助选择并应用 Redux Toolkit、Zustand、Jotai 和 React Query 模式。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "react-state-management" from https://skillstore.io/skills/wshobson-react-state-management.md and its manifest at https://skillstore.io/api/skills/wshobson-react-state-management/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“react-state-management”。 一个小型 dashboard 需要 theme state、modal state 和缓存的 user lists。
预期结果:
推荐方案：Zustand 用于 UI state，React Query 用于 user data。将 theme 和 modal actions 保留在 UI store 中。让 React Query 负责 cache freshness、loading state 和 refetch behavior。
正在使用“react-state-management”。 一个大型 commerce app 具有 cart、user、inventory 和 checkout flows。
预期结果:
- 将 Redux Toolkit 用于需要可预测 actions 的 cart 和 checkout workflows。
- 将 React Query 用于 inventory 和 user profile requests。
- 避免在全局客户端 store 中重复 API responses。
正在使用“react-state-management”。 一个团队希望对独立 filters 和 preferences 进行细粒度更新。
预期结果:
当独立 atoms 可以减少 rerenders 并简化 derived values 时，Jotai 非常适合。仅持久化非敏感 preferences。
安全审计
安全v8 • 2026/7/8 打开版本化报告
I reviewed SKILL.md and found no executable installer code, prompt injection, or malicious intent. The static findings are false positives from Markdown fences, TypeScript examples, relative API calls, and public documentation links.
1
已扫描文件
430
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (19)
SKILL.md:33-38 SKILL.md:38-44 SKILL.md:44-82 SKILL.md:82-88 SKILL.md:88-114 SKILL.md:114-116 SKILL.md:116-142 SKILL.md:142-183 SKILL.md:183-187 SKILL.md:187-232 SKILL.md:232-236 SKILL.md:236-254 SKILL.md:254-277 SKILL.md:277-281 SKILL.md:281-344 SKILL.md:344-348 SKILL.md:348-376 SKILL.md:376-398 SKILL.md:398-422
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/wshobson-react-state-management/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/wshobson-react-state-management?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/wshobson-react-state-management?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-react-state-management/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/wshobson-react-state-management.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 引用
wshobson. (2026). react-state-management security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-react-state-management/audits/8BibTeX 引用
@techreport{wshobson-wshobson-react-state-management-2026,
author = {wshobson},
title = {react-state-management security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/wshobson-react-state-management/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-state-management security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-react-state-management/audits/8"
identifiers:
- type: other
value: "skillstore:wshobson-react-state-management:audit:8"
description: "Skillstore immutable audit report identifier"
比较变体
2 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 使用量更高
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
70
社区
83
规范符合性
你能构建什么
选择状态库
为新的 React 应用程序架构比较 Redux Toolkit、Zustand、Jotai 和 React Query。
重构共享状态
将分散的组件状态迁移到带有 selectors 和更清晰所有权的类型化全局 store 中。
改进服务器数据流
使用 React Query 模式和乐观更新，将客户端 UI 状态与缓存的 API 数据分离。
试试这些提示
选择库
帮我为这个应用选择一种 React 状态管理方案：[描述应用规模、数据来源和团队经验]。
设计 Store
为 [feature] 设计一个类型化 state store。包括 state shape、actions、selectors，以及每个文件应放置的位置。
分离客户端和服务器状态
审查这个 React 数据流，并识别哪些内容应该使用 React Query，哪些应该使用本地或全局客户端状态：[粘贴摘要]。
规划迁移
为这些 slices 和 async flows 创建从旧版 Redux 迁移到 Redux Toolkit 的计划：[列出模块和风险]。
最佳实践
- 让状态尽可能靠近使用它的组件。
- 使用 selectors 和类型化 hooks 来减少 rerenders 和运行时错误。
- 将服务器缓存所有权与客户端 UI 状态所有权分离。
避免
- 不要默认把每个值都放入全局 store。
- 不要在 React Query 和客户端 store 之间重复存储服务器状态。
- 未经安全审查，不要将敏感 tokens 持久化到浏览器存储中。
常见问题
此技能会安装任何状态库吗？
不会。它为开发者在自己项目中安装的库提供指导和示例。
它能帮助在 Redux Toolkit 和 Zustand 之间做选择吗？
可以。它会根据应用规模、复杂度、团队需求和状态所有权解释选择标准。
它涵盖服务器状态吗？
涵盖。它包含用于 query keys、caching、mutations 和 optimistic updates 的 React Query 模式。
它适合 TypeScript 项目吗？
适合。示例强调类型化 stores、类型化 hooks 和类型化 state shapes。
它能替代应用程序架构审查吗？
不能。它提供模式，但团队仍应审查项目约束和安全要求。
这些网络示例有风险吗？
示例使用相对 API 路径进行教学。开发者应审查其应用程序中的真实 endpoints 和数据处理方式。
开发者详情
作者
wshobson许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
64ca8af0f54a325752f08bd54e52151061ea659a
维护新鲜度
2026/7/25
使用量
8 次下载 · 204 次浏览
文件结构
📄 SKILL.md
wshobson 的更多技能
查看全部📦
context-driven-development
81管理上下文驱动开发
当产品目标、技术栈选择和工作流规则分散各处时，AI 辅助项目会失去一致性。此技能通过 Conductor 上下文工件指导 Claude、Codex 和 Claude Code。
编码与开发 查看
📦
startup-financial-modeling
80构建初创公司财务模型
初创团队在规划招聘、融资和现金使用之前，需要清晰的预测。此技能将收入、成本、资金可支撑时间和情景分析组织成实用的财务规划输出。
数据与分析 查看
📦
kpi-dashboard-design
79设计推动决策的 KPI 仪表板
团队经常构建展示大量数字却无法指导行动的仪表板。此技能可帮助 Claude、Codex 和 Claude Code 选择有意义的 KPI、组织视图，并清晰呈现指标。
设计与创意 查看
📦
postmortem-writing
79编写无责事故复盘
事故评审常常变得不一致、侧重追责，或难以转化为行动。此技能帮助 Claude、Codex 和 Claude Code 起草结构化复盘，包含清晰的时间线、根本原因和负责人。
写作与内容 查看
📦
data-storytelling
79构建清晰的数据故事
原始指标往往难以说服利益相关者或支持决策。此技能帮助 Claude、Codex 和 Claude Code 将分析塑造成清晰的叙事、视觉呈现和建议。
数据与分析 查看
相关技能
查看全部📦
zustand-store-ts
79构建类型化的 Zustand Store
由 sickn33
React 团队需要可预测的全局状态，而不是结构不清晰的 store。此技能指导 Claude、Codex 和 Claude Code 创建带有 selector 和 middleware 的类型化 Zustand store。
编码与开发 查看
📦
senior-fullstack
82在资深指导下构建全栈应用
由 alirezarezvani
全栈项目通常需要一致的设置、架构选择和质量检查。此技能为 React、Next.js、Node.js、GraphQL 和 PostgreSQL 工作提供脚本与参考资料。
编码与开发 查看
📦
vercel-react-view-transitions
82实现 React View Transitions
由 vercel-labs
React 视图过渡很容易放错位置，从而导致无提示或嘈杂的动画。此技能可指导路由、Suspense、列表和共享元素动画的选择。
编码与开发 查看
📦
react-dev
82构建类型安全的 React 组件
由 softaworks
React TypeScript 工作通常需要精确的事件、hook 和路由类型。此技能提供针对类型化组件、React 19 API 和路由的聚焦模式。
编码与开发 查看
📦
senior-frontend
81构建可用于生产的前端功能
由 davila7
前端团队需要在各项目中获得一致的 React 和 Next.js 指导。此技能提供用于前端分析的参考工作流、质量实践和辅助脚本。
编码与开发 查看
📦
nextjs-optimization
80优化 Next.js 性能
由 Atman36
Next.js 应用可能会因为大型 bundle、薄弱的缓存和未优化的媒体而变慢。此技能会指导 Claude、Codex 和 Claude Code 对生产应用进行有针对性的性能改进。
编码与开发 查看