スキル rn-performance

📦

rn-performance

Name: rn-performance
Author: CJHarmath

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

React Nativeパフォーマンスの最適化

React Nativeアプリでは、リストの遅さ、余分なレンダー、JSスレッドの停止が発生することがあります。このスキルは、より高速なFlatList画面、メモ化されたコンポーネント、最適化されたセレクター、キャッシュされた画像、プロファイリングのための重点的なパターンを提供します。

対応: Claude Codex Code(CC)

🥉 79 ブロンズ

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/cjharmath-rn-performance.md 署名済み manifest GET /api/skills/cjharmath-rn-performance/manifest 署名済み lockfile GET /api/skills/cjharmath-rn-performance/lockfile

テストする

「rn-performance」を使用しています。プレイヤーディレクトリ画面で、数百行をスクロールするとカクつきます。

期待される結果:

プレイヤーIDに基づく安定したアイテムキーを使用します。
行のレンダリングをメモ化されたアイテムコンポーネントに移動します。
行の高さが固定されている場合はgetItemLayoutを追加します。
プロファイリング後もリストのボトルネックが見られる場合は、FlashListを検討します。

「rn-performance」を使用しています。 1つのZustand値が変わると、ダッシュボードのすべてのカードが再レンダーされます。

期待される結果:

ダッシュボードでストア全体を選択するのを避けます。
各カードの値に対して具体的なセレクターを使用します。
コンポーネントが複数の関連値を必要とする場合は、shallow comparisonを使用します。
変更されたカードだけがレンダーされることを確認するために、再度プロファイルします。

「rn-performance」を使用しています。ランキングを計算するため、ナビゲーション後に画面が短時間フリーズします。

期待される結果:

ナビゲーション中のJSスレッドをプロファイルします。
重い処理はインタラクション完了後まで遅延させます。
再利用されるランキング入力をメモ化します。
長時間実行される計算を初回レンダーパスから外します。

セキュリティ監査

安全

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

All static findings were adjudicated as false positives. The detections come from Markdown fences, inline backticks, TypeScript examples, and a React.memo prop comparison in a documentation-only skill. No prompt injection, external command execution, network access, filesystem access, or data exfiltration intent was found in SKILL.md.

スキャンされたファイル

423

解析済み行数

レビュー項目

誤検知を無視

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

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

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

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

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

レポートリンクをコピー

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

Markdownバッジ

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

HTMLバッジ

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

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cjharmath-rn-performance.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). rn-performance security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-rn-performance/audits/7

BibTeX形式の引用

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

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

カクつくリスト画面を修正する

遅いFlatList画面を診断し、安定したキー、アイテムレイアウト、メモ化された行、レンダーウィンドウ設定を適用します。

リリース前のパフォーマンスをレビューする

リリース前に、リストの多い画面で回避可能なレンダー、高コストなセレクター、画像キャッシュの問題、JSスレッドのブロッキングを確認します。

レンダーの衛生管理を教える

例を使って、メモ化が役立つ場合、オーバーヘッドを増やす場合、レンダー挙動をプロファイルする方法を説明します。

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

単純なリストの問題を見つける

このReact Nativeのリスト画面をレビューし、明らかなパフォーマンス問題を見つけてください。安定したキー、renderItem、getItemLayout、インラインコールバックに焦点を当ててください。

再レンダーを減らす

これらのコンポーネントを分析し、不要な再レンダーを見つけてください。React.memo、useMemo、useCallback、StyleSheet.createが役立つ箇所を推奨してください。

状態セレクターを最適化する

このZustandの使い方をレビューし、セレクターの問題を見つけてください。焦点を絞ったセレクター、shallow comparison、より安全なコンポーネント境界を提案してください。

パフォーマンス改善計画を立てる

このReact Native機能の優先順位付きパフォーマンス計画を作成してください。プロファイリング手順、リスト変更、画像処理、メモ化、JSスレッドのリスクを含めてください。

ベストプラクティス

まずプロファイルし、実際に遅延を引き起こしているコンポーネントまたはリストを最適化します。
広範なメモ化を追加する前に、安定したpropsとセレクターを使用します。
特にローエンドのAndroidハードウェアなど、実機で改善を検証します。

回避

コストを測定せずに、すべての単純な値をメモ化しないでください。
メモ化された子コンポーネントにインラインオブジェクトやコールバックを渡さないでください。
コンポーネントが1つの値だけを必要とする場合に、Zustandストア全体を選択しないでください。

よくある質問

このスキルはアプリコードを自動的に変更しますか？

いいえ。アシスタントがあなたの承認のもとで適用できるレビューガイダンスと例を提供します。

FlatListの代わりにFlashListを使うべきタイミングはいつですか？

非常に大きなリスト、複雑な行、または最適化済みのFlatList画面でもスクロールのカクつきが残る場合は、FlashListを検討してください。

これはExpoアプリにも役立ちますか？

はい。例には、expo-imageキャッシュやReact Nativeのプロファイリングワークフローなど、Expoに適したガイダンスが含まれています。

React.memoは常にパフォーマンスを改善しますか？

いいえ。propsが安定していてレンダーが高コストな場合には役立ちますが、単純なコンポーネントではオーバーヘッドが増えることがあります。

最適化が有効だったことをどのように検証すべきですか？

各変更の前後で、React DevTools Profiler、対象を絞ったレンダーログ、デバイステストを使用してください。

Claude、Codex、Claude Codeはこのスキルを使用できますか？

はい。レポートにはClaude、Codex、Claude Codeのサポートが示されています。

開発者情報

作成者

CJHarmath

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-performance

参照

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

メンテナンスの新しさ

2026/7/18

利用状況

6 ダウンロード · 265 閲覧

ファイル構成

Vue 3 のコード品質を向上

作成者 vuejs-ai

Vue プロジェクトでは、時間の経過とともに reactivity、component、performance に関するミスが蓄積しがちです。このスキルは、より安全なパターンと明確なコードのために、Vue 3 に特化したガイダンスを提供します。

コーディング＆開発表示

rn-performance

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

カクつくリスト画面を修正する

リリース前のパフォーマンスをレビューする

レンダーの衛生管理を教える

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

ベストプラクティス

回避

よくある質問

開発者情報

CJHarmath のその他のスキル

react-zustand-patterns

web-build-deploy

rn-zustand-patterns

rn-styling

rn-observability

react-state-flows

関連スキル

vercel-react-native-skills

expo-tailwind-setup

expo-dev-client

use-dom

native-data-fetching

vue-best-practices