rn-performance
79React Nativeパフォーマンスの最適化
React Nativeアプリでは、リストの遅さ、余分なレンダー、JSスレッドの停止が発生することがあります。このスキルは、より高速なFlatList画面、メモ化されたコンポーネント、最適化されたセレクター、キャッシュされた画像、プロファイリングのための重点的なパターンを提供します。
React Zustand Store パターンを改善する
React チームは、Zustand を使用する際に古い state、レンダータイミング、非同期 action のバグに直面することがあります。このスキルは、store、selector、派生 state、テスト、デバッグ、永続化のための直接的なパターンを提供します。
このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「react-zustand-patterns」を使用しています。 A component reads a count value immediately after an increment action.
期待される結果:
回答では、store state は即座に更新される一方で、コンポーネントの表示は React が次のレンダーを完了した後に変わることを説明します。
「react-zustand-patterns」を使用しています。 An async action reads captured data after a delayed save operation.
期待される結果:
回答では、遅延後に現在の store data を読み取り、その現在値から state を更新することを推奨します。
「react-zustand-patterns」を使用しています。 A selector returns a new object on every render.
期待される結果:
回答では、これが追加のレンダーを引き起こす可能性がある理由を説明し、インストール済みの Zustand バージョンに適した安定した selector パターンを提案します。
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.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cjharmath-react-zustand-patterns?utm_source=security_passport_badge)<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>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@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}
}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"
store の値がコンポーネントの再レンダー前に更新される理由を説明するために、タイミングパターンを使用します。
loading、data、error state を理解しやすくするために、非同期 action のガイダンスを使用します。
store を Zustand 4.x から 5.x へ移行する際に、selector と移行メモを使用します。
Explain why my React component still shows old Zustand state after I call set. Keep the explanation practical.
Review this Zustand action for stale closure problems after await. Suggest where get or getState should be used.
Review my Zustand selectors for unnecessary re-renders. Recommend multiple selectors, shallow comparison, or useShallow where appropriate.
Audit this Zustand store design for async races, derived state, selector stability, persistence boundaries, and test reset strategy.
作成者
CJHarmathライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
メンテナンスの新しさ
2026/7/18
利用状況
9 ダウンロード · 249 閲覧
ファイル構成
📄 SKILL.md
React Nativeパフォーマンスの最適化
React Nativeアプリでは、リストの遅さ、余分なレンダー、JSスレッドの停止が発生することがあります。このスキルは、より高速なFlatList画面、メモ化されたコンポーネント、最適化されたセレクター、キャッシュされた画像、プロファイリングのための重点的なパターンを提供します。
React アプリを確実にデプロイ
React のデプロイ設定は反復的でミスが起きやすい場合があります。このスキルは、Vercel、Netlify、Docker、CI/CD、環境、監視に関する実践的な例を提供します。
信頼性の高いReact Native Zustandストアを構築する
React Nativeチームは、古くなった状態、非同期アクションのタイミング、回避可能なレンダーに時間を奪われがちです。このスキルは、ストアの振る舞いを推論、テスト、デバッグしやすくするZustandパターンを提供します。
React Nativeスタイリングパターンを適用する
React Nativeのスタイリングは、テーマ、画面、プラットフォーム間で一貫性が失われやすくなります。このスキルは、Expoアプリ向けに実用的なNativeWindとBrandColorsのパターンを提供します。
React Nativeのオブザーバビリティを改善する
サイレントな失敗や不十分なエラーメッセージは、モバイルのバグ診断を難しくします。このスキルは、ログ、エラー、トレース、安全なレポート作成のための実用的なReact Nativeパターンを提供します。
信頼性の高い React 状態フローを設計する
複雑な React フローは、await の漏れ、隠れた遷移、弱いエラー状態によって失敗しがちです。このスキルは、明示的な状態設計、検証、UI フィードバック、統合テストをガイドします。
型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
Playwrightテストカバレッジの改善
作成者 C0ntr0lledCha0s
Playwrightスイートは、設定、ロケーター、フィクスチャに一貫性がないと不安定になることがあります。このスキルは、信頼性の高いブラウザテスト、デバッグ、再利用可能なページオブジェクトのための実践的なパターンを提供します。
信頼性の高いテスト自動化を構築
作成者 89jobrien
弱いテストはリリースを遅らせ、リグレッションを見逃します。このスキルは、テスト戦略、TDD、自動化、カバレッジレビュー、Playwright による Web チェックをガイドします。
starknet.js で Starknet アプリを構築
作成者 internet-court
Starknet 統合では、プロバイダー、アカウント、トランザクション、手数料を正確に処理する必要があります。このスキルは、Claude、Codex、Claude Code に実践的な starknet.js v9 パターンを提供します。
Vue 3 のコード品質を向上
作成者 vuejs-ai
Vue プロジェクトでは、時間の経過とともに reactivity、component、performance に関するミスが蓄積しがちです。このスキルは、より安全なパターンと明確なコードのために、Vue 3 に特化したガイダンスを提供します。