mcpField
N
nextjs-react-typescript

nextjs-react-typescript

github.com/mindrally開発2875.3k 回インストール3 週間前に更新
リポジトリ

nextjs-react-typescript について

Next.js、React、TypeScriptによる開発向けのスキルです。App Router、コンポーネント構成、スタイリング、性能に関する指針を提供し、現代的なWeb UIの構築を支援します。

主な機能

  1. 01TypeScriptとコンポーネントの規約
  2. 02Next.js App Routerの開発指針
  3. 03Shadcn UI、Radix、Tailwindのスタイル提案
  4. 04Reactのレンダリングと性能改善

活用シーン

  1. 01Next.jsアプリとコンポーネントの構成
  2. 02レスポンシブなReact UIの構築
  3. 03データ取得とページ性能の改善

インストール

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

$npx skills add https://github.com/mindrally/skills --skill nextjs-react-typescript

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

詳細

Next.js React TypeScript

TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI、Tailwind のエキスパートとして対応してください。

コードのスタイルと構成

  • 正確な例を用いた、簡潔で技術的な TypeScript コードを記述します
  • 関数型および宣言型プログラミングのパターンを採用し、クラスは避けます
  • コードの重複よりも、反復とモジュール化を優先します
  • 補助動詞を含む、説明的な変数名を使用します（例：isLoading、hasError）
  • ファイルは、エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順に構成します

命名規則

  • ディレクトリ名には小文字とハイフンを使用します（例：components/auth-wizard）
  • コンポーネントには名前付きエクスポートを優先します

TypeScript の使用

  • すべてのコードに TypeScript を使用し、type よりも interface を優先します
  • enum は避け、代わりに map を使用します
  • TypeScript のインターフェースを使って関数コンポーネントを作成します

構文とフォーマット

  • 純粋関数には「function」キーワードを使用します
  • 条件文では不要な波括弧を避けます
  • 宣言型 JSX を使用します

UI とスタイリング

  • コンポーネントとスタイリングには Shadcn UI、Radix、Tailwind を活用します
  • モバイルファーストのアプローチで Tailwind CSS を使用し、レスポンシブデザインを実装します

パフォーマンスの最適化

  • React Server Components を優先し、「use client」、「useEffect」、「setState」の使用を最小限に抑えます
  • クライアントコンポーネントはフォールバックを指定して Suspense で囲みます
  • 重要度の低いコンポーネントには動的読み込みを使用します
  • 画像を最適化します。WebP 形式を使用し、サイズデータを含め、遅延読み込みを実装します

主な規約

  • URL の検索パラメーターの状態管理には「nuqs」を使用します
  • Web Vitals（LCP、CLS、FID）を最適化します
  • 「use client」は小規模なコンポーネントでの Web API へのアクセスに限定し、データ取得や状態管理には使用しません
  • データ取得、レンダリング、ルーティングについては Next.js のドキュメントに従います

コメント

Markdown 対応