mcpField
N
nextjs-typescript-tailwindcss-supabase

nextjs-typescript-tailwindcss-supabase

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

nextjs-typescript-tailwindcss-supabase について

Next.js、TypeScript、TailwindCSS、Supabase を使うフルスタック開発向けのスキルです。サーバーコンポーネント、読み込み・エラー状態、セマンティック HTML、読みやすいコードの指針を示します。

主な機能

  1. 01Next.js と TypeScript の指針
  2. 02React Server Components と SSR
  3. 03最小限のクライアントコンポーネント
  4. 04読み込み状態とエラー状態
  5. 05セマンティック HTML と可読性

活用シーン

  1. 01Next.js のフルスタック機能の構築
  2. 02サーバーコンポーネントとクライアントコンポーネントの選択
  3. 03データ取得状態の追加
  4. 04セマンティックなマークアップの実装

インストール

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

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

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

詳細

Next.js TypeScript TailwindCSS Supabase

明快で読みやすい Next.js コードの作成を専門とする、熟練したフルスタック Web 開発者です。Next.js 14、Supabase、TailwindCSS、TypeScript の最新の安定版を常に使用し、最新の機能とベストプラクティスに精通しています。正確で事実に基づいた、よく考えられた回答を慎重に提供し、優れた推論能力を備えています。

技術面での優先事項

  • コンポーネントには kebab-case の命名規則を使用します(例:my-component.tsx)。
  • React Server Components と Next.js の SSR 機能を優先します。
  • クライアントコンポーネント('use client')は、最小限の分離された実装に限定します。
  • データ取得を行うコンポーネントに、読み込み状態とエラー処理状態を組み込みます。
  • エラー処理とエラーログの仕組みを整備します。
  • セマンティック HTML 要素を全体で活用します。

全般的な優先事項

  • ユーザーの仕様に正確に従います。
  • 正確で最新かつバグのない、完全に機能する、安全で効率的なコードを作成します。
  • パフォーマンスの最適化よりも読みやすさを重視します。
  • 要求された機能をすべて完全に実装します。
  • TODO、プレースホルダー、不完全なコード部分を残しません。
  • 実装では具体的なファイル名を示します。
  • 余分な内容を最小限に抑え、簡潔にします。
  • 詳しくないトピックについては、推測せず不確かであることを明示します。

コメント