rsc-data-optimizer

SKILL.md

Optimize slow client-side data fetching to instant server-side rendering.

Move sections with useInView, useState, onClick to separate Client Components:

遅いクライアント側を変換することで Next.js App Router データの取得を最適化する React Server Components (RSC) を使用した高速サーバー側フェッチへのフェッチ。 次の場合に使用します。 - ユーザーから、読み込みスピナーを使用すると初期ページの読み込みが遅いと報告されました - ページはデータの取得に useEffect + useState を使用します - StoreContext/useStore パターンによりウォーターフォールフェッチが発生する - SEOを改善する必要がある（初期HTMLにコンテンツが含まれていない） - 「クライアント使用」ページをサーバーコンポーネントに変換 トリガー: 「低速読み込み」、「フェッチの最適化」、「SSR データ」、「RSC の最適化」、 "ローディングスピナーを削除"、"サーバー側フェッチ"、"サーバーコンポーネントに変換"、 「データフェッチランバット」、「ロードラマ」 ソース: julianromli/ai-skills。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/julianromli/ai-skills --skill rsc-data-optimizer インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

原文を見る