mcpField
F
full-stack

full-stack

github.com/srbhr開発28.9k59 回インストール5 日前に更新
リポジトリ

full-stack について

FastAPI のバックエンドと Next.js のフロントエンドにまたがる機能開発向けのスキルです。API 契約を先に定める手順や実装場所、プロジェクト固有の規約、エンドツーエンドの検証方法を示します。

主な機能

  1. 01API 契約を先に定める手順
  2. 02FastAPI バックエンドの指針
  3. 03Next.js フロントエンドの指針
  4. 04エンドツーエンドの検証手順
  5. 05プロジェクト固有のコーディング規約

活用シーン

  1. 01フロントエンドとバックエンドにまたがる機能の計画
  2. 02API エンドポイントと画面の追加
  3. 03アプリケーション両層のエラー処理の確認

インストール

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

$npx skills add https://github.com/srbhr/resume-matcher --skill full-stack

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

詳細

フルスタック開発

FastAPI バックエンドと Next.js フロントエンドの両方にまたがる機能で使用します。

アーキテクチャ

  • バックエンド：FastAPI + Python 3.13+、TinyDB、LiteLLM
  • フロントエンド：Next.js 16 + React 19、Tailwind CSS v4、スイス・インターナショナル・スタイル
  • API：/api/v1/* の REST エンドポイント

ワークフロー

1. まず API コントラクトを設計する
Route:     POST /api/v1/my-feature
Request:   { field: string, ... }
Response:  { id: string, result: ... }
2. バックエンドの実装
  • スキーマ：apps/backend/app/schemas/
  • サービス：apps/backend/app/services/
  • ルーター：apps/backend/app/routers/
  • apps/backend/app/main.py にルーターを登録します
3. フロントエンドの実装
  • API 呼び出し：apps/frontend/lib/
  • コンポーネント：apps/frontend/components/
  • ページへの統合：apps/frontend/app/
4. エンドツーエンドで検証する
  • バックエンドが正しいデータを提供する
  • フロントエンドがスイス・スタイルで正しく表示される
  • 両側でエラー状態が処理される

必須ルール

バックエンド
  • すべての関数に型ヒントを付けます
  • 可変なデフォルト値には copy.deepcopy() を使用します
  • エラーはサーバー側でログに記録し、クライアントには汎用メッセージを返します
  • API キーには api_key= パラメーターを使用します
フロントエンド
  • スイス・インターナショナル・スタイル（rounded-none、ハードシャドウ、スイスのパレット）
  • npm run lint && npm run format
  • テキストエリアで Enter キーを処理します
  • 独立したフェッチには Promise.all() を使用します

主要ファイル

レイヤーエントリーポイント
バックエンドの起動apps/backend/app/main.py
バックエンドの設定apps/backend/app/config.py
フロントエンドのページapps/frontend/app/
API クライアントapps/frontend/lib/

参考資料

  • API コントラクト：docs/agent/apis/front-end-apis.md
  • バックエンドガイド：docs/agent/architecture/backend-guide.md
  • フロントエンドのワークフロー：docs/agent/architecture/frontend-workflow.md
  • スタイルガイド：docs/agent/design/style-guide.md

コメント

Markdown 対応