スキル react-zustand-patterns

📦

react-zustand-patterns

Name: react-zustand-patterns
Author: CJHarmath

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

改善 React Zustand Store 模式

React 團隊在使用 Zustand 時，可能會遇到過期狀態、渲染時機與非同步 action 錯誤。此技能提供 stores、selectors、衍生狀態、測試、偵錯與持久化的直接模式。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

Maintain this Skill? Claim it 🥉 78 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

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

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/cjharmath-react-zustand-patterns.md 署名済み manifest GET /api/skills/cjharmath-react-zustand-patterns/manifest 署名済み lockfile GET /api/skills/cjharmath-react-zustand-patterns/lockfile

テストする

「react-zustand-patterns」を使用しています。元件在 increment action 後立即讀取 count 值。

期待される結果:

答案會說明 store state 會立即更新，而元件畫面會在 React 完成下一次渲染後才改變。

「react-zustand-patterns」を使用しています。非同步 action 在延遲的儲存操作後讀取被捕捉的資料。

期待される結果:

答案會建議在延遲後讀取目前的 store 資料，然後從該目前值更新狀態。

「react-zustand-patterns」を使用しています。 selector 在每次渲染時都回傳新物件。

期待される結果:

答案會說明為什麼這可能造成額外渲染，並針對已安裝的 Zustand 版本建議穩定的 selector 模式。

セキュリティ監査

安全

v7 • 2026/7/6 バージョン別レポートを開く

All static findings are false positives caused by Markdown code fences, inline code, and illustrative Zustand examples. The skill contains guidance text only; no executable shell commands or live network behavior were found in SKILL.md. No prompt injection language or suspicious intent was identified.

スキャンされたファイル

357

解析済み行数

レビュー項目

誤検知を無視

リスク要因

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

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

HTMLバッジ

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

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cjharmath-react-zustand-patterns.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形式の引用

CJHarmath. (2026). react-zustand-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7

BibTeX形式の引用

@techreport{cjharmath-cjharmath-react-zustand-patterns-2026,
  author = {CJHarmath},
  title = {react-zustand-patterns security audit report (audit version 7)},
  institution = {Skillstore},
  year = {2026},
  number = {7},
  url = {https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7},
  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-zustand-patterns security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
  - name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7"
identifiers:
  - type: other
    value: "skillstore:cjharmath-react-zustand-patterns:audit:7"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

偵錯過期的 React 狀態

使用時機模式來說明為什麼 store 值會在元件重新渲染前先更新。

設計非同步 store actions

使用非同步 action 指引，讓 loading、data 與 error 狀態更容易推理。

審查 Zustand 遷移

將 stores 從 Zustand 4.x 移至 5.x 時，使用 selector 與遷移注意事項。

これらのプロンプトを試す

說明 store 時機

說明為什麼我呼叫 set 後，React 元件仍顯示舊的 Zustand state。請保持解釋務實。

修正 stale closures

檢視這個 Zustand action 是否有 await 後的 stale closure 問題。建議應該在哪裡使用 get 或 getState。

改善 selectors

檢視我的 Zustand selectors 是否造成不必要的重新渲染。請在適當處建議多個 selectors、shallow comparison 或 useShallow。

稽核 store 架構

稽核這個 Zustand store 設計是否有 async races、衍生狀態、selector 穩定性、持久化邊界與測試重設策略問題。

ベストプラクティス

當正確性取決於最新值時，請在 await 後讀取目前的 store state。
將衍生值保留在 selectors 中，除非儲存它們可以避免實際的重複工作。
在每個測試案例前明確重設 store state。

回避

不要假設 React 元件會在 store 更新後立即重新渲染。
不要在沒有 shallow comparison 或 useShallow 的情況下回傳新的 selector 物件。
當只需要小範圍 state slice 時，不要持久化整個 store。

よくある質問

這個技能會執行程式碼嗎？

不會。它提供 Zustand 使用方式的指引與範例。

它支援 React Native 嗎？

支援。核心 Zustand 模式適用於 React web 與 React Native。

它可以協助 Zustand 5.x 嗎？

可以。它包含 Zustand 5.x 中 shallow selector 變更的注意事項。

它可以偵錯 stale state bugs 嗎？

可以。它會說明渲染時機、closures 與目前 state 讀取。

它能取代 Zustand 文件嗎？

不會。它著重於常見模式與陷阱，而不是每個 API 細節。

它對測試有用嗎？

有用。它會描述重設模式與非同步 store 斷言。

開発者情報

作成者

CJHarmath

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-zustand-patterns

参照

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

メンテナンスの新しさ

2026/7/22

利用状況

9 ダウンロード · 249 閲覧

ファイル構成

使用 starknet.js 建置 Starknet 應用程式

作成者 internet-court

Starknet 整合需要精確處理提供者、帳戶、交易與費用。此技能為 Claude、Codex 與 Claude Code 提供實用的 starknet.js v9 模式。

コーディング＆開発表示

react-zustand-patterns

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

偵錯過期的 React 狀態

設計非同步 store actions

審查 Zustand 遷移

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

CJHarmath のその他のスキル

rn-performance

web-build-deploy

rn-styling

rn-observability

rn-zustand-patterns

rn-navigation

関連スキル

react-dev

senior-frontend

playwright-testing

testing

nestjs-code-audit

starknet-js