バイブコーディング

.factory/skills/vibe-coding/
├── SKILL.md
├── framework-references.md (任意)
├── deployment-patterns.md (任意)
└── accessibility-checklist.md (任意)

---
name: vibe-coding
description: 最新のフレームワークとライブラリを使い、モダンでレスポンシブなWebアプリケーションをゼロから素早くプロトタイプ・構築します。完全なローカル制御、創造的なフロー、最新のベストプラクティスで新しいWebアプリを素早く作りたい場合に使用します。Lovable、Bolt、v0のローカル代替です。
---
# スキル: Vibe coding

## 目的

最新のフレームワーク、ライブラリ、ベストプラクティスを使い、モダンでレスポンシブなWebアプリケーションをゼロから素早くプロトタイプ・構築します。このスキルは、創造的なフローと素早い反復に重点を置き、初期プロジェクト設定から機能実装、スタイリング、基本的なデプロイ設定までを扱います。

## このスキルを使うタイミング

- 新しいWebアプリケーションのアイデアを**素早くプロトタイプ**したい。
- **創造的なフロー**の中で、コンテキストを切り替えずに素早く何かを作りたい。
- React、Next.js、Vue、Svelteなどの**モダンフレームワーク**を使いたい。
- ホスト型ビルダー環境ではなく、完全に制御できる**ローカル開発**を好む。
- デザインと機能を**素早く実験・反復**したい。

## Lovable/Bolt/v0との主な違い

ホスト型のvibe-codingツール（Lovable、Bolt、v0）とは異なり:

- **ローカルで実行**: すべてのコードはホスト環境ではなく、自分のマシン上にあります。
- **インフラのロックインなし**: デプロイ、ホスティング、インフラの選択を自分で制御できます。
- **フレームワークの柔軟性**: 特定の技術スタックに限定されず、任意のモダンフレームワークを使用できます。
- **完全なバックエンド対応**: 任意のバックエンドとの連携、ローカルサーバーの実行、データベース利用などが可能です。
- **バージョン管理ネイティブ**: 最初からgitワークフローを前提に構築します。
- **ランタイム環境不要**: それらのインフラに依存せず、ローカルでゼロから構築します。

## 入力

- **アプリケーション説明**: 目的、主要機能、対象ユーザー。
- **技術の希望**: 希望するフレームワーク（React/Next.js/Vue/Svelte）、スタイリング手法（Tailwind/CSS-in-JS/CSS Modules）、特定ライブラリ。
- **機能要件**: 中核機能、ユーザーフロー、データモデル。
- **デザイン方針**: スタイルの好み、配色、参照サイト。
- **デプロイ先**: ホスト予定の場所（Vercel、Netlify、AWS、セルフホストなど）。

## 対象外

- 本番インフラやクラウドプロバイダーアカウントの管理。
- 複雑なバックエンドマイクロサービスアーキテクチャの作成（代わりにservice-integrationスキルを使用）。
- モバイルネイティブアプリ開発（iOS/Android）。

## 規約とベストプラクティス

### フレームワーク選定
- 実装前に、公式ソースから**必ず最新ドキュメントを検索**する。
- 例: Next.jsはhttps://nextjs.org/docs、Reactはhttps://react.devなどを検索する。
- **古いコマンドやパターンをハードコードしない** — 常に最新のベストプラクティスを検証する。

### プロジェクト初期化
1. 最新の初期化コマンド（例: `npx create-next-app@latest`）を公式ドキュメントで検索する。
2. 型安全性のため、デフォルトでTypeScriptを使用する。
3. コード品質のためにESLintとPrettierを設定する。
4. 最初からgitリポジトリを初期化する。

### アーキテクチャパターン
- **コンポーネントベース**: UIを小さく再利用可能なコンポーネントに分割する。
- **型安全**: 開発体験を高めるため全体でTypeScriptを使用する。
- **デフォルトでレスポンシブ**: モバイルファーストの設計アプローチ。
- **アクセシビリティ優先**: セマンティックHTML、ARIAラベル、キーボードナビゲーション。
- **パフォーマンス意識**: コード分割、遅延読み込み、画像最適化。

### スタイリング手法
- モダンなCSSフレームワークを使用する（高速開発にはTailwind CSSを推奨）。
- 色、余白、タイポグラフィの再利用可能なトークンで一貫したデザインシステムを実装する。
- 適切な場合はライト/ダークモードに対応する。
- 適切なコントラスト比とアクセシビリティを確保する。

### 状態とデータ
- 複雑さに応じて適切な状態管理（React Context、Zustand、Redux）を選ぶ。
- モダンなデータ取得パターン（React Query、SWR、またはNext.js App Routerなどのフレームワーク組み込み機能）を使用する。
- 適切な読み込み、エラー、空状態を実装する。

### バックエンド連携
- バックエンドが必要な場合は、APIルートまたはサーバーコンポーネントを適切に設定する。
- データベースには、可能な場合は型安全なORM（Prisma、Drizzle）を使用する。
- 適切なエラーハンドリングとバリデーションを実装する。

## 必須の動作

1. **現在のベストプラクティスを調査する**: 実装前に最新の公式ドキュメントを検索して参照する。
2. **適切に初期化する**: 必要なツール、設定、ディレクトリ構造をすべて含めてプロジェクトを設定する。
3. **機能を段階的に実装する**: 機能を1つずつ構築してテストする。
4. **クリーンで保守しやすいコードを書く**: フレームワーク規約とベストプラクティスに従う。
5. **エッジケースを処理する**: 読み込み状態、エラー、空状態、バリデーション。
6. **アクセシビリティを確保する**: 適切なセマンティックHTML、ARIAラベル、キーボードナビゲーション。
7. **重要なパスをテストする**: 中核機能のテストを書く。
8. **セットアップと使用方法を文書化する**: セットアップ手順、環境変数、デプロイメモを含むREADME。

## 必須の成果物

- すべての設定ファイルを含む、完全に初期化されたプロジェクト。
- クリーンで整理されたコンポーネント構造とページ構造。
- スタイリング実装（Tailwind設定、CSS modules、または選択した手法）。
- 重要なユーザーフローとビジネスロジックの**テスト**。
- **README.md**を含む:
  - プロジェクトの説明と機能
  - セットアップ手順
  - 開発コマンド
  - 必要な環境変数
  - デプロイガイダンス
- **.gitignore**が適切に設定されている。
- 明確なスクリプトと依存関係を持つ**package.json**。

## 実装チェックリスト

### 1. 発見と計画
- [ ] 選択したフレームワークの現在のベストプラクティスを検索する
- [ ] 初期化コマンドについて公式ドキュメントを確認する
- [ ] 機能要件とユーザーフローを理解する
- [ ] コンポーネント階層とデータフローを計画する

### 2. プロジェクト初期化
- [ ] 現在のフレームワーク初期化コマンドを実行する
- [ ] TypeScript、ESLint、Prettierを設定する
- [ ] gitリポジトリを初期化する
- [ ] 基本的なディレクトリ構造を作成する

### 3. デザインシステム設定
- [ ] スタイリングソリューション（Tailwind、CSS-in-JSなど）を設定する
- [ ] カラーパレットとデザイントークンを定義する
- [ ] 基本コンポーネント（Button、Input、Cardなど）を作成する
- [ ] レスポンシブレイアウトシステムを実装する

### 4. 機能実装
- [ ] ページとルートを構築する
- [ ] 適切な型付けでコンポーネントを実装する
- [ ] 必要に応じて状態管理を追加する
- [ ] データ取得とAPIを連携する
- [ ] 読み込み、エラー、空状態を処理する

### 5. 品質と仕上げ
- [ ] アクセシビリティ機能（ARIA、キーボードナビゲーション）を追加する
- [ ] パフォーマンスを最適化する（コード分割、画像最適化）
- [ ] 重要なフローのテストを書く
- [ ] エラーバウンダリとフォールバックを追加する
- [ ] 異なる画面サイズでのレスポンシブ動作を確認する

### 6. ドキュメントとデプロイ
- [ ] 包括的なREADMEを書く
- [ ] 環境変数を文書化する
- [ ] 対象プラットフォームのデプロイ設定を追加する
- [ ] 開発スクリプトとビルドスクリプトを作成する

## 検証

以下のコマンドを実行します（パッケージマネージャーと設定に合わせて調整）:

```bash
# 依存関係のインストール
npm install

# 型チェック
npm run type-check   # または tsc --noEmit

# リンティング
npm run lint

# テスト
npm test

# ビルド検証
npm run build

# ローカル実行
npm run dev
```

以下を満たしたらスキルは完了です:

- すべてのコマンドがエラーなく正常に実行される。
- アプリケーションがビルドされ、開発モードで実行される。
- 中核機能が異なる画面サイズで仕様通りに動作する。
- アクセシビリティチェックに合格する（ブラウザ開発者ツールまたはaxe拡張を使用）。
- テストが重要なユーザーパスをカバーしている。
- ドキュメントが明確で完全である。

## 安全性とエスカレーション

- **外部依存関係**: 依存関係を追加する前に、パッケージのセキュリティとメンテナンス状況を必ず確認する。
- **環境シークレット**: APIキー、シークレット、認証情報をコミットしない。`.env.local`を使用し、READMEに記載する。
- **フレームワークの制限**: 要件がフレームワークの能力を超える場合は、代替案を提案するか制約を明確にする。
- **パフォーマンス上の懸念**: アプリが複雑な状態またはデータ処理を必要とする場合は、より堅牢な解決策の提案を検討する。

## 動的ドキュメント参照

常に最新のドキュメントを検索して参照します:

- **React**: https://react.dev
- **Next.js**: https://nextjs.org/docs
- **Vue**: https://vuejs.org/guide
- **Svelte**: https://svelte.dev/docs
- **Tailwind CSS**: https://tailwindcss.com/docs
- **TypeScript**: https://www.typescriptlang.org/docs
- **Vite**: https://vitejs.dev/guide

機能を実装する前に、これらのドキュメントを検索し、現在のAPIとベストプラクティスを使用していることを確認します。

## ワークフロー例

### ランディングページをvibe codingする
```
ユーザー：「SaaS製品のランディングページを作ろう - ヒーローセクション、機能、価格設定、お問い合わせフォーム」

Droidは以下を実行します：
1. 現在のNext.js初期化のベストプラクティスを検索
2. TypeScriptとTailwindでNext.jsプロジェクトを初期化
3. コンポーネント構造を作成（Hero、Features、Pricing、Contact）
4. 適切なアクセシビリティを持つレスポンシブデザインを実装
5. フォームバリデーションとエラーハンドリングを追加
6. メタデータを使用した基本的なSEOを設定
7. Vercel/Netlifyのデプロイ手順を提供
```

### クイックなダッシュボードプロトタイプ
```
ユーザー：「管理者ダッシュボードを素早くプロトタイプしたい - 認証、データテーブル、チャート」

Droidは以下を実行します：
1. 認証を含むNext.js App Routerの現在のパターンを調査
2. 適切な依存関係でプロジェクトを初期化
3. 認証フローをセットアップ（NextAuth.jsまたは類似のもの）
4. 保護されたルート構造を作成
5. ローディング状態でのデータ取得を実装
6. 適切な型付けでテーブルとチャートコンポーネントを追加
7. 認証とデータフローのテストを含める
8. データベース要件を含むセットアップを文書化
```

## SEOとWeb Vitals

公開向けアプリケーションでは、以下を自動的に実装します:

- **メタタグ**: タイトル、説明、Open Graph、Twitterカード
- **構造化データ**: リッチ検索結果向けのJSON-LD
- **パフォーマンス**: 画像最適化、コード分割、遅延読み込み
- **Core Web Vitals**: LCP、FID、CLSメトリクスを最適化
- **サイトマップ**: インデックス改善のためにsitemap.xmlを生成
- **Robots.txt**: クローラー動作を設定

## 他のスキルとの連携

このスキルは以下と組み合わせられます:

- **サービス連携**: Webアプリが既存のバックエンドサービスを呼び出す必要がある場合。
- **内部ツール**: 社内管理パネルやダッシュボードを構築する場合。
- **データクエリ**: アプリが分析やレポートを表示する必要がある場合。