app-builder について
app-builderは、ユーザーの依頼に基づいてアプリ開発を計画、調整するスキルです。プロジェクト種別の判定、技術スタックとテンプレートの選択、エージェント間の作業整理を支援し、既存プロジェクトの選択を維持するよう案内します。
主な機能
- 01プロジェクト種別と依頼の分析
- 02技術スタック選定のガイド
- 03必要なテンプレートでのスキャフォールディング
- 04複数エージェントの作業調整
- 05既存プロジェクト変更のガイド
活用シーン
- 01新しいWebアプリの計画
- 02適合するテンプレートでのプロジェクト構築
- 03エージェント間の実装作業の整理
- 04現在のスタックを保った機能追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/app-builderを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agent-coordination.mdfeature-building.mdproject-detection.mdscaffolding.mdtech-stack.mdtemplates/astro-static/TEMPLATE.mdtemplates/chrome-extension/TEMPLATE.mdtemplates/cli-tool/TEMPLATE.mdtemplates/electron-desktop/TEMPLATE.mdtemplates/express-api/TEMPLATE.mdtemplates/flutter-app/TEMPLATE.mdtemplates/monorepo-turborepo/TEMPLATE.mdtemplates/nextjs-fullstack/TEMPLATE.mdtemplates/nextjs-saas/TEMPLATE.mdtemplates/nextjs-static/TEMPLATE.mdtemplates/nuxt-app/TEMPLATE.mdtemplates/python-fastapi/TEMPLATE.mdtemplates/react-native-app/TEMPLATE.md詳細
App Builder - アプリケーション構築オーケストレーター
ユーザーのリクエストを分析し、技術スタックを決定し、構成を計画して、エージェントを調整します。
🎯 選択的に読むルール
リクエストに関連するファイルだけを読んでください！ コンテンツマップを確認し、必要なものを探してください。
| ファイル | 説明 | 読むタイミング |
|---|---|---|
project-detection.md | キーワードマトリクス、プロジェクト種別の検出 | 新しいプロジェクトを始めるとき |
tech-stack.md | 2025年のデフォルトスタック、代替案 | 技術を選ぶとき |
agent-coordination.md | エージェントのパイプライン、実行順序 | 複数のエージェントによる作業を調整するとき |
scaffolding.md | ディレクトリ構成、コアファイル | プロジェクト構成を作成するとき |
feature-building.md | 機能分析、エラー処理 | 既存プロジェクトに機能を追加するとき |
templates/SKILL.md | プロジェクトテンプレート | 新しいプロジェクトをスキャフォールディングするとき |
スコープとテンプレートの前提条件
これら13個のMarkdownテンプレートはレイアウトを示すものであり、生成されるプロジェクト一式ではありません。既存アプリケーションのフレームワーク、パッケージマネージャー、ロックファイルを維持してください。キーワードだけを根拠にスタックを置き換えてはいけません。テンプレートのバージョンは過去の基準であり、scaffold @latestでは互換性のないレイアウトやAPIが生成される場合があります。正確なバージョンを選択する前に、フレームワークの最新の一次ドキュメントとホスト側の制約を確認してください。名前が挙げられているエージェント／ツールは環境固有の任意の役割であり、組み込みの機能でも、作業を委任する権限でもありません。既存の計画を尊重し、新たに競合するファイル名を要求したり、重複する質問を3つしたりしないでください。データ／テナントの認可と受け入れ条件の例を確認してください。シークレットはサーバー側に保持し、マイグレーションの影響を確認し、許可されたデプロイ／公開／支払い／メッセージ送信の前にローカルプレビューを使用してください。本番環境での準備完了を保証するのではなく、実際に行ったテストを報告してください。
📦 テンプレート（13）
新しいプロジェクト向けのクイックスタート用スキャフォールディングです。一致するテンプレートだけを読んでください！
| テンプレート | 技術スタック | 使用する場面 |
|---|---|---|
| nextjs-fullstack | Next.js + Prisma | フルスタックのWebアプリ |
| nextjs-saas | Next.js + Stripe | SaaS製品 |
| nextjs-static | Next.js + Framer | ランディングページ |
| nuxt-app | Nuxt 3 + Pinia | Vueのフルスタックアプリ |
| express-api | Express + JWT | REST API |
| python-fastapi | FastAPI | Python API |
| react-native-app | Expo + Zustand | モバイルアプリ |
| flutter-app | Flutter + Riverpod | クロスプラットフォームのモバイルアプリ |
| electron-desktop | Electron + React | デスクトップアプリ |
| chrome-extension | Chrome MV3 | ブラウザー拡張機能 |
| cli-tool | Node.js + Commander | CLIアプリ |
| monorepo-turborepo | Turborepo + pnpm | モノレポ |
🔗 関連エージェント
| エージェント | 役割 |
|---|---|
project-planner | タスクの分解、依存関係グラフ |
frontend-specialist | UIコンポーネント、ページ |
backend-specialist | API、ビジネスロジック |
database-architect | スキーマ、マイグレーション |
devops-engineer | デプロイ、プレビュー |
使用例
User: "Make an Instagram clone with photo sharing and likes"
App Builder Process:
1. Project type: Social Media App
2. Tech stack: Next.js + Prisma + Cloudinary + Clerk
3. Create plan:
├─ Database schema (users, posts, likes, follows)
├─ API routes (12 endpoints)
├─ Pages (feed, profile, upload)
└─ Components (PostCard, Feed, LikeButton)
4. Coordinate agents
5. Report progress
6. Start preview
使用するタイミング
このスキルは、概要に記載されたワークフローまたはアクションを実行するときに適用できます。
制限事項
- このスキルは、タスクが上記のスコープに明確に該当する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、停止して確認を求めてください。