mcpField
B
base-app-setup

base-app-setup

github.com/andrelandgraf開発23122 回インストール20 週間前に更新
リポジトリ

base-app-setup について

base-app-setupは、Shadcn UI、Neon Postgres、Drizzle ORM、AI SDKを使うNext.jsアプリのセットアップ手順を順にまとめたスキルです。デプロイ、コード品質、環境設定、ストリーミングチャット画面の構築を進める開発者向けです。

主な機能

  1. 01Bunを使ったNext.jsとVercelへのデプロイ
  2. 02Prettier、TypeScript、Fallowの設定
  3. 03AIコーディングエージェントとMCPの設定
  4. 04Shadcn UIのテーマとダークモード
  5. 05better-envによる設定と検証
  6. 06Neon、Drizzle、AI SDKの手順

活用シーン

  1. 01Next.jsアプリの開始とデプロイ
  2. 02Drizzleによる型安全なデータアクセスの追加
  3. 03プロジェクト用AIコーディングエージェントの設定
  4. 04ストリーミングチャット画面の構築

MCP 対応

AIコーディングエージェントの設定手順に、MCP サーバーの構成が含まれます。

インストール

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

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill base-app-setup

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

詳細

ベースアプリのセットアップ

Shadcn UI、Neon Postgres、Drizzle ORM、AI SDK を使用する Next.js アプリの完全なセットアップガイドです。

クックブック - 以下のレシピを順番に実行してください

Vercel 上の Next.js

Bun で動作する Next.js アプリを作成し、開発環境を設定して、プッシュ時に自動デプロイされるよう Vercel にデプロイします。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
コードの健全性、Lint、フォーマット

フォーマットには Prettier、型チェックには TypeScript、コードの健全性（デッドコード、重複、複雑さ、アーキテクチャの乖離）には Fallow を設定します。設定が複雑になるのを避けるため、ESLint/Biome は使用しません。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-health-setup
AI コーディングエージェントの設定

Cursor、GitHub Copilot、Claude Code などの AI コーディングエージェントに、プロジェクト固有のパターン、コーディングガイドライン、MCP サーバーを設定し、AI 支援開発の一貫性を保ちます。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/agent-setup
Shadcn UI とテーマ設定

next-themes を使用してダークモードに対応した Shadcn UI コンポーネントを追加します。テーマプロバイダーと CSS 変数の設定も含まれます。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
アサーションヘルパー

わかりやすいエラーメッセージを備えた、実行時の型の絞り込みに使う TypeScript アサーション関数です。tiny-invariant をベースにしています。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/assert
better-env による型安全な環境設定

better-env の設定モジュールを使用して、型安全なサーバー／パブリック環境変数へのアクセス、フィーチャーフラグ、およびいずれか一方のみを指定する認証情報の制約を設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
better-env によるビルド時の環境変数検証

ビルド前および CI で、環境変数に基づくすべての設定モジュールを better-env で検証します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/env-validation
Neon + Drizzle のセットアップ

Drizzle ORM を使用して Next.js アプリを Neon Postgres に接続し、Vercel のサーバーレス関数向けに接続プーリングを最適化します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
AI SDK とシンプルなチャット

AI Elements コンポーネントとともに Vercel AI SDK をインストールします。useChat フックを使用して、ストリーミング対応のチャットインターフェースを構築します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup
Drizzle クエリ

Drizzle ORM を使用して型安全なデータベースクエリを記述します。select、insert、update、delete、リレーショナルクエリ、およびテーブルの追加について説明します。

bunx skills add andrelandgraf/fullstackrecipes/skills -s drizzle-queries

コメント

Markdown 対応