lovable

Lovable 統合スキル

初期化または再初期化には、../init/SKILL.md を使用してください。Lovable にプロンプトを送信する前に、プロンプトの承認を適用してください。YOLO がオンの場合は継続的な承認が付与され、YOLO がオフの場合は一般的な確認ルールが適用されます。

Lovable とやり取りする前に、クレジット効率を適用してください。可能な作業はすべてローカルで行い、バックエンドの状態を確認するには MCP やチャットではなくブラウザーの Cloud ページを使用し、不可欠なホスト側の操作は最小限のプロンプト 1 つにまとめてください。

このスキルを使うと、Lovable.dev プロジェクトのデプロイ要件を尊重しながら、Claude Code を効果的に活用できます。

このスキルを使用するタイミング

次の場合に有効にしてください：

• ユーザーが「Lovable」または「lovable.dev」に言及した
• プロジェクトに Edge Functions を含む supabase/ ディレクトリがある
• ユーザーがエッジ関数のデプロイを依頼した
• ユーザーがデータベースのマイグレーションを作成した
• ユーザーが Lovable Cloud またはバックエンドのデプロイについて質問した
• プロジェクトが Lovable プロジェクトと思われる（React + Supabase 構成）

プロジェクトアーキテクチャの種類

Lovable は 2 種類のアーキテクチャをサポートしています。アドバイスを行う前に、作業対象がどちらかを必ず判別してください。

アーキテクチャの判別

ユーザーのプロジェクトのルートディレクトリを確認してください：

• app.config.ts がある → TanStack Start（新規、SSR — 2026 年 4 月以降）
• vite.config.ts がある → Vite SPA（従来型、CSR — 2026 年 4 月より前）

どちらも完全にサポートされています。以前のプロジェクトは引き続き Vite を使用し、強制的な移行はありません。

---

Vite SPA アーキテクチャ（従来型）

2026 年 4 月より前に作成されたプロジェクトです。クライアントサイドレンダリングのみです。

自動で同期されるもの（Vite SPA）

✅ 自由に編集して main にプッシュできます：

• src/ - すべての React コンポーネント、ページ、フック、ユーティリティ
• public/ - 静的アセット
• 設定ファイル - vite.config.ts、tailwind.config.js、tsconfig.json
• package.json - 依存関係
• supabase/functions/*/index.ts - Edge Function のコード（デプロイではありません）
• supabase/migrations/*.sql - マイグレーションのファイル（適用ではありません）

Lovable のデプロイが必要なもの（Vite SPA）

⚠️ 編集後、Lovable に次のプロンプトを送信してください：

変更の種類	Lovable プロンプト
Edge Function のコード	"Deploy the [name] edge function"
すべての Edge Functions	"Deploy all edge functions"
新しいマイグレーションファイル	"Apply pending Supabase migrations"
新しいテーブルが必要	"Create a [name] table with columns: [list]"
RLS ポリシー	"Enable RLS on [table] allowing [who] to [what]"
ストレージバケット	"Create a [public/private] bucket called [name]"
シークレット／環境変数	手動：Cloud → Secrets → Add

---

TanStack Start アーキテクチャ（新規プロジェクト）

2026 年 4 月以降に作成されたプロジェクトです。TanStack Start による完全なサーバーサイドレンダリング（SSR）を行います。

Vite SPA との主な違い

• ルートは app/routes/ 内のファイルベースです（src/App.tsx 内の React Router ではありません）
• 設定ファイルは app.config.ts です（vite.config.ts ではありません）
• サーバー関数（createServerFn）を使用すると、サーバー側のロジックをコンポーネントファイル内に直接記述できます。単純なサーバー側ロジックにはエッジ関数は不要です
• *.server.ts という名前のファイルはサーバー専用で、ブラウザーには送信されません
• ページはブラウザーに届く前に、サーバーで完全な HTML としてレンダリングされます

自動で同期されるもの（TanStack Start）

✅ 自由に編集して main にプッシュできます：

• app/ - すべてのルート、コンポーネント、サーバー関数、レイアウト
• app/routes/ - ファイルベースのルートページ
• public/ - 静的アセット
• app.config.ts、tailwind.config.js、tsconfig.json - 設定ファイル
• package.json - 依存関係
• app/**/*.server.ts - TanStack サーバー関数（自動でデプロイされるため、Lovable プロンプトは不要です）
• supabase/functions/*/index.ts - Supabase Edge Function のコード（デプロイではありません）
• supabase/migrations/*.sql - マイグレーションのファイル（適用ではありません）

Lovable のデプロイが必要なもの（TanStack Start）

⚠️ 編集後、Lovable プロンプトを提示してください：

変更の種類	Lovable プロンプト
Supabase Edge Function のコード	"Deploy the [name] edge function"
すべての Supabase Edge Functions	"Deploy all edge functions"
新しいマイグレーションファイル	"Apply pending Supabase migrations"
新しいテーブルが必要	"Create a [name] table with columns: [list]"
RLS ポリシー	"Enable RLS on [table] allowing [who] to [what]"
ストレージバケット	"Create a [public/private] bucket called [name]"
シークレット／環境変数	手動：Cloud → Secrets → Add

注： TanStack サーバー関数（createServerFn）は Supabase Edge Functions ではありません。app/ 内にあり、GitHub 同期によって自動的にデプロイされるため、Lovable プロンプトは不要です。手動デプロイが必要なのは supabase/functions/ のみです。

TanStack Start のファイル構造

project/
├── app/                          # ✅ Safe - auto-syncs
│   ├── routes/                   # File-based routing
│   │   ├── __root.tsx            # Root layout
│   │   ├── index.tsx             # Home page (/)
│   │   └── [route].tsx           # Other pages
│   ├── components/               # Shared UI components
│   ├── lib/                      # Utilities and helpers
│   └── *.server.ts               # ✅ Server functions (auto-deploy)
├── app.config.ts                 # TanStack Start config
├── public/                       # Static assets
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy
│   └── migrations/               # ✅ Create files, ⚠️ needs apply
└── CLAUDE.md                     # Project context

---

コアコンセプト（両方のアーキテクチャ）

Lovable は main ブランチのみで双方向の GitHub 同期を行います：

• フロントエンドとサーバーサイドのコード（TanStack サーバー関数を含む）は自動的に同期されます
• Supabase Edge Functions とデータベースのマイグレーションは、コード変更後に Lovable プロンプトが必要です

応答形式

バックエンドのデプロイが必要な場合は、必ず次の形式で出力してください：

📋 **LOVABLE PROMPT:**
> "[exact prompt to copy-paste]"

破壊的な操作の場合は、次を追加してください：

⚠️ **Warning**: [explanation of risk]

ファイル構造リファレンス

Vite SPA（レガシー — vite.config.ts が存在する場合）

project/
├── src/                          # ✅ Safe - auto-syncs
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── lib/
│   └── integrations/supabase/
│       ├── client.ts             # ⚠️ Has Supabase URLs
│       └── types.ts
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy
│   │   └── [function-name]/
│   │       └── index.ts
│   ├── migrations/               # ✅ Create files, ⚠️ needs apply
│   │   └── YYYYMMDDHHMMSS_*.sql
│   └── config.toml               # ⚠️ Lovable Cloud manages
├── .env                          # Local only - Lovable ignores
└── CLAUDE.md                     # Project context

TanStack Start（新規 — app.config.ts が存在する場合）

project/
├── app/                          # ✅ Safe - auto-syncs
│   ├── routes/                   # File-based routing
│   │   ├── __root.tsx            # Root layout
│   │   ├── index.tsx             # Home route (/)
│   │   └── [name].tsx            # Named routes
│   ├── components/               # Shared components
│   ├── lib/                      # Utilities
│   ├── integrations/supabase/    # Supabase client + types
│   └── *.server.ts               # ✅ Server functions (auto-deploy, no prompt needed)
├── app.config.ts                 # TanStack Start config
├── public/                       # Static assets
├── supabase/
│   ├── functions/                # ✅ Edit code, ⚠️ needs deploy via Lovable
│   │   └── [function-name]/
│   │       └── index.ts
│   ├── migrations/               # ✅ Create files, ⚠️ needs apply via Lovable
│   │   └── YYYYMMDDHHMMSS_*.sql
│   └── config.toml               # ⚠️ Lovable Cloud manages
├── .env                          # Local only - Lovable ignores
└── CLAUDE.md                     # Project context

バックエンドの種類

Lovable Cloud

• バックエンドは Lovable が全面的に管理します
• Supabase ダッシュボードにはアクセスできません
• すべての操作は Lovable プロンプトで行います
• シークレットは Cloud → Secrets UI にあります

独自の Supabase

• Supabase ダッシュボードに直接アクセスできます
• Supabase CLI を使用できます：supabase functions deploy
• 柔軟性は高まりますが、手動でのセットアップが必要です

クイックプロンプトのリファレンス

Edge Functions

"Deploy all edge functions"
"Deploy the send-email edge function"
"Create an edge function called [name] that [description]"
"Show logs for [name] edge function"
"The [name] edge function returns [error]. Fix it"

データベース

"Create a [name] table with columns: id (uuid), name (text), created_at (timestamp)"
"Add a [column] column of type [type] to [table]"
"Add foreign key from [table1].[col] to [table2].id"
"Apply pending Supabase migrations"

RLS ポリシー

"Enable RLS on [table]"
"Add RLS policy on [table] allowing authenticated users to read all rows"
"Add RLS policy on [table] allowing users to only access their own rows"

ストレージ

"Create a public storage bucket called [name]"
"Create a private storage bucket called [name]"
"Allow authenticated users to upload to [bucket]"

認証

"Enable Google authentication"
"Enable GitHub authentication"
"When user signs up, create row in profiles table"

ブランチのルール

• Lovable と同期されるのは main のみです
• 機能ブランチはマージされるまでデプロイされません
• Lovable はプッシュから 1～2 分以内に同期します

Yolo モード — 自動デプロイ（ベータ版）

CLAUDE.md で yolo_mode: on に設定されている場合、ブラウザー自動化によってデプロイが自動化されます：

仕組み

手動プロンプトを表示する代わりに、yolo スキル（/skills/yolo/SKILL.md）が処理を引き継ぎます：

1. Lovable.dev に自動的に移動します
2. デプロイ用プロンプトを送信します
3. 成功／失敗を監視します
4. 検証テストを実行します（有効な場合）
5. デプロイの概要を報告します

Yolo モードが有効になる場合

• /lovable:deploy-edge コマンドの実行時
• /lovable:apply-migration コマンドの実行時
• CLAUDE.md で yolo_mode: on に設定されている場合

Yolo モードの設定

/lovable:yolo on               # Enable with testing
/lovable:yolo on --no-testing  # Enable without testing
/lovable:yolo on --debug       # Enable with verbose logs
/lovable:yolo off              # Disable

ベータ版の状況

⚠️ Yolo モードはベータ版です：

• Claude in Chrome 拡張機能が必要です
• 不具合や UI との互換性の問題が発生する可能性があります
• 常に手動での代替手段があります
• 詳細は /skills/yolo/SKILL.md を参照してください

デバッグチェックリスト

1. フロントエンドが更新されない場合

   • main ブランチにいますか？
   • 変更をプッシュしましたか？
   • 1～2 分待ちましたか？

2. Edge Function が動作しない場合

   • Lovable（または Yolo モード）経由でデプロイしましたか？
   • Cloud UI でシークレットを設定しましたか？
   • Lovable でログを確認しましたか？

3. データベースクエリが失敗する場合

   • マイグレーションを適用しましたか（Lovable または Yolo モード経由）？
   • RLS ポリシーは正しく設定されていますか？
   • テーブルは存在しますか？

4. Yolo モードが動作しない場合

   • CLAUDE.md で yolo_mode: on に設定されているか確認してください
   • Chrome 拡張機能はインストールされていますか？
   • Lovable にログインしていますか？
   • トラブルシューティングについては yolo スキルを参照してください