flows-install

Flows のインストール

このスキルは、ユーザーのプロジェクトで使用されているフレームワークを自動的に検出し、Flows のインストールをすべて実行します。

ステップ 0：インストール済みか確認する

何かを行う前に、プロジェクト内のいずれかの package.json に @flows/react または @flows/js がすでに記載されているか確認してください。見つかった場合は、「このプロジェクトには Flows がすでにインストールされています。再インストールまたは再設定しますか？」とユーザーに伝え、確認されるまでは処理を中止してください。

ステップ 1：インストール先を特定する

プロジェクトの構成を分析して、Flows のインストール先を決定します。プロジェクトがモノレポか、単一アプリのプロジェクトかを特定してください。以下の指標を確認します。

モノレポの指標

• packages/、apps/、または libs/ ディレクトリがある
• サブディレクトリ内に複数の package.json ファイルがある
• Lerna、Nx、Turborepo などのモノレポツールを使用している
• ワークスペースが定義されたルートの package.json がある

単一アプリの指標

• プロジェクトのルートに package.json が 1 つだけある
• 独自の package.json を持つサブディレクトリがない
• src/、public/ など、アプリで一般的なディレクトリを含む構成である

ステップ 1.1：モノレポが検出された場合

ユーザーに「モノレポ構成を検出しました。Flows をインストールするパッケージを選択してください。」と尋ね、検出されたアプリのパッケージを一覧表示してください。

ステップ 2：フレームワークとパッケージマネージャーを検出する

パッケージマネージャーの検出

対象ディレクトリ内のロックファイルを確認し、パッケージマネージャーを特定してください。モノレポの場合は、ルートディレクトリのロックファイルを確認します。

ロックファイル	パッケージマネージャー
pnpm-lock.yaml	pnpm
yarn.lock	yarn
bun.lock	bun
bun.lockb	bun
package-lock.json	npm

見つからない場合は npm をデフォルトとして使用してください。

フレームワークの検出

package.json の dependencies と devDependencies で、以下の指標を上から順に検索してください。

フレームワーク	package.json 内の指標
Next.js	next
Nuxt	nuxt
React	react、react-dom
Angular	@angular/core
Svelte / SvelteKit	svelte
Solid	solid-js
Vue	vue
Astro	astro
Ember	ember-source

順序が重要です。Next.js は React より先に、Nuxt は Vue より先に確認してください。これらは上位互換のフレームワークであるためです。

Next.js の追加検出： next が検出された場合は、プロジェクトが App Router と Pages Router のどちらを使用しているか確認してください。

• App Router：layout.tsx または layout.js を含む app/ ディレクトリがある
• Pages Router：_app.tsx または _app.js を含む pages/ ディレクトリがある
• 両方が存在する場合は、App Router を優先してください。

Svelte の追加検出： svelte が検出された場合は、package.json の Svelte のバージョンを確認し、<slot />（Svelte 4 以前）と {@render children()}（Svelte 5 以降）のどちらを使用するか判断してください。

ファイル検出によるフォールバック

パッケージが一致しない場合は、フレームワーク固有のファイルを検索してください。

フレームワーク	プロジェクトファイル内の指標
Next.js	next.config.*
React	.jsx、.tsx
Angular	@Component を含む .ts ファイル
Vue	.vue
Svelte	.svelte
Solid	.jsx、.tsx
Astro	astro.config.*
Ember	.gjs、.gts

TypeScript の検出

対象パッケージに tsconfig.json があるか確認してください。結果を IS_TYPESCRIPT として保存します。これにより、ファイル拡張子（.tsx / .ts と .jsx / .js）と型注釈を含めるかどうかが決まります。

フレームワークが検出されない場合

ユーザーに次のように尋ねます：「特定のフレームワークを検出できませんでした。どのフレームワークを使用していますか？」

• React
• Next.js (App Router)
• Next.js (Pages Router)
• Angular
• Nuxt
• Vue (without Nuxt)
• Solid
• Svelte / SvelteKit
• Astro
• Ember
• JavaScript (no framework)

Step 3: Organization ID を尋ねる

ユーザーに次のように尋ねます：

「Flows をインストールするには、Organization ID が必要です。Flows ダッシュボードの Settings > General で確認できます。」

ORGANIZATION_ID として保存します。

Step 4: Flows をインストールする

Step 4.1: パッケージをインストールする

検出されたパッケージマネージャーを使用して、対象ディレクトリでインストールコマンドを実行します。

React と Next.js：

npm i @flows/react @flows/react-components

その他すべてのフレームワーク（Angular、Vue、Nuxt、Svelte、Solid、Astro、Ember、JavaScript）：

npm i @flows/js @flows/js-components

npm i を、検出されたパッケージマネージャーに対応するコマンド（pnpm add、yarn add、bun add）に置き換えます。

Step 4.2: SDK の初期化を追加する

YOUR_ORGANIZATION_ID を ORGANIZATION_ID に置き換え、YOUR_USER_ID は開発者が入力するプレースホルダーコメントのままにします。IS_TYPESCRIPT が true の場合は .tsx／.ts 拡張子と型注釈を使用し、それ以外の場合は .jsx／.js を使用して型注釈を省略します。

検出されたフレームワークに対応するリファレンスファイルに従います：

Framework	Reference file
React	references/react.md
Next.js (App Router)	references/nextjs-app-router.md
Next.js (Pages Router)	references/nextjs-pages-router.md
Angular	references/angular.md
Nuxt	references/nuxt.md
Svelte / SvelteKit	references/svelte.md
Solid	references/solid.md
Vue (without Nuxt)	references/vue.md
Astro	references/astro.md
Ember	references/ember.md
JavaScript	references/javascript.md

---

Step 5: インストールを確認する

1. Flows パッケージが package.json の依存関係に含まれていることを確認します。
2. すべてのファイルが正しく作成または変更されていることを確認します。
3. IS_TYPESCRIPT が true の場合は、型チェックコマンド（例：tsc --noEmit）を実行し、成功を報告する前に型エラーを修正します。

Step 6: ID 検証の設定を提案する

ID 検証を行うと、第三者がアプリのユーザーになりすまして代理でイベントを送信したり、アカウントの MTU 請求額を不正に増やしたりすることを防げます。本番環境に移行する前に設定することを強くおすすめします。

ユーザーに次のように尋ねます：「ID 検証を今設定しますか？ Flows ダッシュボードにあるシークレットと、署名を計算するバックエンドの場所が必要です。スキップして後で設定することもできます。」

同意した場合は、references/identity-verification.md に従います。

断られた場合、または署名を計算するバックエンドがプロジェクトにない場合は、この手順をスキップし、以下の概要出力に推奨事項を残します。

クライアントコード内で署名を計算したり、シークレットをブラウザーから参照可能な環境変数に設定したりしないでください。 そうするとシークレットが漏えいし、保護機能が完全に失われます。

ステップ 7：Flows のベストプラクティススキルをインストールする

このプロジェクトに flows-best-practices スキルがすでにインストールされているか確認します（skills/ や .claude/skills/ など、ローカルのスキルフォルダー内に flows-best-practices ディレクトリがあるか確認してください）。インストールされていない場合は、インストールします。

npx skills add RBND-studio/flows.sh --skill flows-best-practices

このスキルでは、インストール後の Flows 機能（ワークフロー、ブロック、ツアー、アンケート、カスタムコンポーネント、SDK リファレンス）の構築とデバッグを扱うため、flows-install とともに常に用意しておく必要があります。すでにインストールされている場合は、このステップをスキップします。

概要の出力

インストールが完了したら、実施した内容の概要を提示します。

# Flows is installed

**Framework:** {framework}
**Files changed:** {list of files modified or created}

**Next steps:**

1. Replace the `YOUR_USER_ID` placeholder with the current user's ID from your auth system.
2. Start your development server to verify everything is working. When on localhost you will see a Flows logo in the bottom right corner - click it to see debug information.
3. Visit your Flows dashboard to create your first workflow: https://app.flows.sh

ステップ 6 で ID 検証を設定した場合は、次のステップに、ブラウザーのコンソールで User identity verification issue の警告を確認し、問題がなくなったら 設定 > 環境 で ID 検証を必須にすることを追加します。

スキップした場合は、代わりに次の行を追加します。

4. **Recommended before production:** set up [identity verification](https://flows.sh/docs/sdk/identity-verification) so third parties cannot impersonate your users. Ask me to do it whenever you are ready.