mcpField
R
react-modernization

react-modernization

github.com/rmyndharis開発1.9k43 回インストール2 週間前に更新
リポジトリ

react-modernization について

Reactアプリのモダナイズを支援するスキルです。バージョンアップ、クラスコンポーネントからフックへの移行、並行機能の導入、自動リファクタリングと検証を扱います。

主な機能

  1. 01Reactアプリのバージョンアップ
  2. 02クラスコンポーネントからフックへの移行
  3. 03Suspenseとtransitionsの導入
  4. 04codemodsによる変換の自動化
  5. 05状態管理の更新とTypeScriptへの移行

活用シーン

  1. 01既存Reactアプリのアップグレード
  2. 02クラスコンポーネントの関数コンポーネント化
  3. 03Reactの並行機能の導入
  4. 04TypeScriptへの移行と性能改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rmyndharis/antigravity-skills --skill react-modernization

インストール後、Claude Code で/react-modernizationを入力して読み込まれたか確認します。

同梱ファイルresources/implementation-playbook.md

詳細

React のモダナイゼーション

React のバージョンアップ、クラスコンポーネントからフックへの移行、並行機能の導入、自動変換のための codemod を習得します。

このスキルを使用する場面

  • React アプリケーションを最新バージョンにアップグレードする場合
  • クラスコンポーネントをフックを使った関数コンポーネントに移行する場合
  • React の並行機能（Suspense、トランジション）を導入する場合
  • 自動リファクタリングに codemod を適用する場合
  • 状態管理パターンをモダナイズする場合
  • TypeScript に移行する場合
  • React 18 以降の機能でパフォーマンスを向上させる場合

このスキルを使用しない場面

  • タスクが React のモダナイゼーションに関係しない場合
  • この範囲外の別の分野やツールが必要な場合

手順

  • 目標、制約、必要な入力を明確にします。
  • 関連するベストプラクティスを適用し、結果を検証します。
  • 実行可能な手順と検証方法を提示します。
  • 詳細な例が必要な場合は、resources/implementation-playbook.md を開きます。

リソース

  • 詳細なパターンと例については、resources/implementation-playbook.md を参照してください。

コメント

Markdown 対応