rn-performance
79React Nativeパフォーマンスの最適化
React Nativeアプリでは、リストの遅さ、余分なレンダー、JSスレッドの停止が発生することがあります。このスキルは、より高速なFlatList画面、メモ化されたコンポーネント、最適化されたセレクター、キャッシュされた画像、プロファイリングのための重点的なパターンを提供します。
React の非同期バグを修正
React の非同期バグは、競合状態、状態更新の取りこぼし、信頼性の低い effect を引き起こします。このスキルは、より安全な非同期コードのためのレビュー、修正、lint ルールをガイドします。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "react-async-patterns" from https://skillstore.io/skills/cjharmath-react-async-patterns.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-async-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「react-async-patterns」を使用しています。 コンポーネントが effect 内でユーザーデータを読み込み、ナビゲーション後に状態を設定する。
期待される結果:
「react-async-patterns」を使用しています。 Zustand アクションがセットアップ処理を開始し、すぐに機能状態を更新する。
期待される結果:
レビューでは隠れた非同期処理を指摘し、それに依存する状態変更の前にセットアップを await することを推奨します。
「react-async-patterns」を使用しています。 レビュアーが promise の正確性に関する lint ガイダンスを求めている。
期待される結果:
All static findings are false positives caused by Markdown code fences, inline backticks, and illustrative React or TypeScript examples. The fetch example demonstrates AbortController cleanup in application code, and the sensitive-key finding is an Object.keys substring match. No prompt injection, data exfiltration, or auto-executing behavior was found.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cjharmath-react-async-patterns?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/cjharmath-react-async-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-async-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/cjharmath-react-async-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-async-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7@techreport{cjharmath-cjharmath-react-async-patterns-2026,
author = {CJHarmath},
title = {react-async-patterns security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-react-async-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-async-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-async-patterns/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-react-async-patterns:audit:7"
description: "Skillstore immutable audit report identifier"
React 機能をリリースする前に、floating promise、await の抜け、安全でない実行順序を見つけます。
非同期データを読み込む React Native 画面に cleanup とキャンセルのパターンを適用します。
TypeScript React アプリを保守するチーム向けに lint ルールとチェックリスト項目を定義します。
この React コンポーネントを非同期バグの観点でレビューしてください。floating promise、競合状態、不足している事後条件チェックを見つけてください。焦点を絞った修正を提案してください。
この useEffect フローを分析してください。unmount や依存関係の変更がどこで競合し得るかを説明してください。キャンセルまたは AbortController の変更を推奨してください。
これらの Zustand アクションを調査してください。隠れた非同期処理、await の抜け、状態に関する仮定を特定してください。より安全なアクションシグネチャを提案してください。
この React 機能のための非同期データフローを設計してください。何を逐次実行、並列実行、または TanStack Query で処理すべきかを判断してください。トレードオフを説明してください。
作成者
CJHarmathライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
メンテナンスの新しさ
2026/7/18
利用状況
4 ダウンロード · 269 閲覧
ファイル構成
📄 SKILL.md
React Nativeパフォーマンスの最適化
React Nativeアプリでは、リストの遅さ、余分なレンダー、JSスレッドの停止が発生することがあります。このスキルは、より高速なFlatList画面、メモ化されたコンポーネント、最適化されたセレクター、キャッシュされた画像、プロファイリングのための重点的なパターンを提供します。
React Zustand Store パターンを改善する
React チームは、Zustand を使用する際に古い state、レンダータイミング、非同期 action のバグに直面することがあります。このスキルは、store、selector、派生 state、テスト、デバッグ、永続化のための直接的なパターンを提供します。
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コンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
React と Next.js のパフォーマンス最適化
作成者 vercel-labs
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
モダンなReactおよびNext.jsアプリを構築する
作成者 sickn33
ReactおよびNext.jsプロジェクトでは、ルーティング、コンポーネント、スタイリング、データ、フォーム、テスト、デプロイ全体で一貫したセットアップ方針が必要になることがよくあります。このスキルは、Claude、Codex、Claude Codeに、モダンなフロントエンドアプリケーションを計画および構築するためのフェーズベースのワークフローを提供します。
Playwrightテストカバレッジの改善
作成者 C0ntr0lledCha0s
Playwrightスイートは、設定、ロケーター、フィクスチャに一貫性がないと不安定になることがあります。このスキルは、信頼性の高いブラウザテスト、デバッグ、再利用可能なページオブジェクトのための実践的なパターンを提供します。
構造化された品質チェックでコードをレビューする
作成者 alirezarezvani
コードレビューでは、品質、セキュリティ、保守性の問題を見落とすことがあります。このスキルは、スクリプト、チェックリスト、レポート生成を使って構造化されたレビューを支援します。