callstack-agent-skills について
Callstack の React Native スキル集で、パフォーマンス分析、Turbo Modules、コードレビュー、CI/CD、バージョン更新、ネイティブアプリへの組み込みを扱います。React Native の開発・保守向けで、完全版は callstackincubator/agent-skills にあります。
主な機能
- 01パフォーマンス分析と FPS 最適化
- 02不要な再レンダリングの削減
- 03Turbo Modules の開発
- 04GitHub PR レビューワークフロー
- 05GitHub Actions の成果物ワークフロー
- 06アップグレード戦略とネイティブアプリへの組み込み
活用シーン
- 01React Native アプリの性能を分析
- 02GitHub のプルリクエストをレビュー
- 03ビルド成果物の CI/CD を設定
- 04既存の iOS または Android アプリに React Native を組み込む
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill callstack-agent-skillsインストール後、Claude Code で/callstack-agent-skillsを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
callstack-agent-skills
カタログの概要 — パッケージの全内容:callstackincubator/agent-skills
判断フロー
-
スキルはすでにインストールされていますか?
~/.design-agent-skills/skills/で Callstack スキルのディレクトリを確認します。- はい → 呼び出して続行します
- いいえ → ステップ 2 に進みます
-
シェルにアクセスできますか? はい → 以下のコマンドでインストールします。いいえ → ユーザーにコマンドを提示します(Claude Code の場合:チャットメッセージとして
!を付けて送信します。グローバルにインストールする場合は-gを追加し、プロジェクトのみにインストールする場合は省略します)。
インストールコマンド
/plugin install react-native-best-practices@callstack-agent-skills
別のインストール方法とスキル一覧の全内容については、GitHub README をご覧ください。
インストール後の呼び出し
- スキル名:インストール後、
ls ~/.design-agent-skills/skills/でインストール済みのスキル名を確認します - トリガー:「Callstack」、「React Native profiling」、「Turbo Modules」、「brownfield migration」、「React Native upgrade」
機能
本番環境向けのベストプラクティスを網羅した、Callstack 公式の React Native スキルスイートです。パフォーマンスのプロファイリング、FPS の最適化、不要な再レンダリングの排除、Turbo Modules の構築を扱います。また、GitHub の PR レビューワークフロー、ビルド成果物向けの GitHub Actions CI/CD、バージョンアップグレードのテンプレートと戦略、既存のネイティブ iOS/Android アプリへの React Native の組み込み(ブラウンフィールド移行)も扱います。
使用しないケース
- Expo プロジェクト —
expo-skillsを使用します - アニメーションやジェスチャーを多用する作業 —
software-mansion-skillsを使用します - Figma や UI デザインの作業 —
mobile-app-designまたはwork-with-design-systemsを使用します