mcpField
P
project-scaffold

project-scaffold

github.com/shipshitdev開発38113 回インストール2 日前に更新
リポジトリ

project-scaffold について

project-scaffoldは、新規プロジェクトの作成や既存プロジェクトへのコンポーネント追加を行うスキャフォールドスキルです。AIドキュメント、NestJSバックエンド、NextJSフロントエンド、Expoモバイルアプリ、Plasmo拡張機能を選択でき、モノレポと個別リポジトリに対応します。

主な機能

  1. 01AIドキュメント用フォルダーの生成
  2. 02NestJSバックエンドの作成
  3. 03NextJSフロントエンドの作成
  4. 04Expoモバイルアプリの作成
  5. 05Plasmoブラウザー拡張機能の作成
  6. 06モノレポと個別リポジトリに対応

活用シーン

  1. 01新しいフルスタックプロジェクトの構築
  2. 02既存プロジェクトへのフロントエンドやバックエンドの追加
  3. 03モノレポまたは個別リポジトリ構成の選択

インストール

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

$npx skills add https://github.com/shipshitdev/skills --skill project-scaffold

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

同梱ファイルplugin.jsonscripts/scaffold.py

詳細

プロジェクトのスキャフォールド

新しいプロジェクトの作成や、既存プロジェクトへのコンポーネント追加に使える統合スキャフォールドツールです。

目的

このスキルを使うと、次の構成を統一された方法でスキャフォールドできます。

  • AI ファーストな開発のための .agents/ フォルダー構成
  • MongoDB、Swagger、ベストプラクティスを備えたバックエンド（NestJS）
  • Tailwind と @agenticindiedev/ui を備えたフロントエンド（NextJS）
  • React Native と Expo Router を備えたモバイルアプリ（Expo）
  • React と Tailwind を備えたブラウザー拡張機能（Plasmo）

使用するタイミング

次の場合にこのスキルを使用します。

  • ゼロから新しいプロジェクトを始める場合
  • 既存のプロジェクトにコンポーネントを追加する場合
  • モノレポまたは個別のリポジトリを設定する場合
  • Claude、Codex、Cursor で統一されたスキャフォールド体験が必要な場合

使用方法

対話モード（推奨）
python3 scripts/scaffold.py

スクリプトで次の項目を尋ねられます。

  1. プロジェクト名
  2. プロジェクトのルートパス
  3. リポジトリ構成（モノレポまたは個別）
  4. スキャフォールドするコンポーネント（すべて任意）：
    • .agent フォルダー
    • バックエンド（NestJS）
    • フロントエンド（NextJS）
    • モバイルアプリ（Expo）
    • 拡張機能（Plasmo）
  5. 組織名（モノレポのパッケージ用）
Claude から実行する場合

ユーザーからスキャフォールドを依頼されたら、このスキルを有効化して次を実行します。

python3 scripts/scaffold.py

スクリプトがすべての対話形式のプロンプトを処理します。

機能

柔軟な構成
  • モノレポ：ワークスペース構成を使って、すべてのコンポーネントを1つのリポジトリにまとめます
  • 個別のリポジトリ：各コンポーネントをそれぞれのディレクトリ／リポジトリに配置します
  • 既存のプロジェクト：既存のプロジェクトにコンポーネントを追加できます
コンポーネントの選択肢

すべてのコンポーネントは任意です。必要なものだけをスキャフォールドできます。

  • AI ドキュメント一式を含む .agents/ フォルダー
  • NestJS、MongoDB、Swagger を備えたバックエンド
  • NextJS 15、Tailwind、@agenticindiedev/ui を備えたフロントエンド
  • Expo Router、React Native を備えたモバイルアプリ
  • Plasmo、React、Tailwind を備えた拡張機能
クロスプラットフォーム

次の環境から使用できます。

  • Claude Code
  • Codex
  • Cursor

生成される構成

モノレポの例
myproject/
├── .agents/                  # AI documentation
├── package.json             # Workspace root
├── api/                     # NestJS backend
│   ├── .agents/
│   ├── apps/api/src/
│   └── package.json
├── frontend/                # NextJS apps
│   ├── .agents/
│   ├── apps/dashboard/
│   └── package.json
├── mobile/                  # Expo app
│   ├── .agents/
│   ├── app/
│   └── package.json
└── extension/               # Plasmo extension
    ├── .agents/
    ├── src/
    └── package.json
個別のリポジトリの例
myproject-api/               # Backend only
├── .agents/
├── apps/api/src/
└── package.json

myproject-frontend/          # Frontend only
├── .agents/
├── apps/dashboard/
└── package.json

含まれる主要なパターン

バックエンド（NestJS）
  • 論理削除：isDeleted: boolean
  • マルチテナンシー：常に organization でフィルターします
  • コレクションパターン：コントローラー → サービス → スキーマ
  • Swagger ドキュメント
  • Dockerfile を含みます
フロントエンド（NextJS）
  • パスエイリアス：@components/、@services/、@hooks/
  • @agenticindiedev/ui を使った Tailwind CSS
  • TypeScript の strict モード
  • App Router の構成
モバイルアプリ（Expo）
  • ナビゲーションに Expo Router を使用
  • TypeScript の設定
  • プラットフォーム固有の設定
拡張機能（Plasmo）
  • React + TypeScript
  • @agenticindiedev/ui を使った Tailwind CSS
  • マニフェストの設定
  • ポップアップコンポーネント

スキャフォールド後の次の手順

  1. 依存関係をインストールする：

    cd [project-root]
bun install

  2. 開発を開始する：

    # Monorepo
bun run dev:api
bun run dev:frontend

# Separate repos
cd api && bun run start:dev
cd frontend && bun run dev

  3. カスタマイズする：

    • コーディング規約に合わせて .agents/SYSTEM/RULES.md を更新する
    • 環境変数を設定する
    • 最初の機能を追加する

既存のスキルとの統合

このスキルは次のスキルと連携します。

  • agent-folder-init：スクリプトを使用して .agent フォルダーをスキャフォールドします
  • fullstack-workspace-init：コンポーネントのテンプレートとパターンを再利用します

トラブルシューティング

スクリプトが見つからない：スキルが `` にインストールされていることを確認してください

アクセスが拒否される：スクリプトに実行権限を付与します：chmod +x scripts/scaffold.py

Python が見つからない：Python 3 がインストールされ、PATH に設定されていることを確認してください

Agent フォルダーが作成されない：スクリプトは agent-folder-init スキルの使用を試みます。見つからない場合は、.agent フォルダーの作成をスキップします。

コメント

Markdown 対応