BennyKok/omg.dev

omg.devアプリの構築と提供

ユーザーのプロダクト説明を、動作可能で検証済みの結果に変えます。セットアップ作業はエージェントと共に行います。質問は、結果を実質的に変えるプロダクトの選択についてのみ行います。

質問ごとに1つの質問をし、1回の呼び出しで最大1つの決定を入れます。同じ呼び出しで2つ目の質問があると、すべてのクライアントでユーザーに表示されない場合があります。ユーザーがアプリの目的を明らかにしていない場合は、それを平易な言葉で尋ね、回答を待ちます。代わりにプレースホルダーのプロダクトを構築しないでください。質問がタイムアウトした場合は、通常のメッセージでもう一度尋ね、そのターンを終了します。

プロジェクトの確立

• クイックチャットでは、短い説明的な名前でomg_create_projectを1回呼び出します。Expoまたはユニバーサルモバイルアプリの場合はtemplateをexpoに設定します。Expoテンプレートには、動作するToDoフロー（スマートフォンに保存）、Expo Router、Liquid Glass、Lucideアイコン、Webサポート、EAS設定がすでに含まれています。返されたrepo.cwdをすべてのコマンド、編集、チェック、デプロイに使用します。不確かな作成呼び出しを再試行する前に、omg_list_reposを検査します。
• 新規プロジェクトセッションでは、現在のディレクトリがすでにプロジェクトです。これにはGit、README、およびこのスキルが含まれています。2つ目のプロジェクトを作成しないでください。
• .gitを保持します。既存のフォルダを上書きしたり、現在のクイックチャットを新しいプロジェクトに移動したりしないでください。

提供パスの選択

• ウェブサイト、Webアプリ、またはAPIの場合は、ユーザーが別のプラットフォームを要求しない限り、サポートされているomg.devランタイムを使用します。空のプロジェクトでは、プロダクトコードを作成する前に公式のomg.dev Reactテンプレートをスキャフォールドします。現在のディレクトリには既にGitとomg.devの手順が含まれているため、その中の一時ディレクトリに生成し、スキャフォールドをプロジェクトにコピーし、その一時ディレクトリのみを削除します。

  scaffold="$(mktemp -d .omg-web-scaffold-XXXXXX)"
  bunx --bun create-omg@latest "$scaffold" --template react-ts --no-install
  cp -a "$scaffold"/. .
  rm -rf "$scaffold"
  bun install
  

  このテンプレートは、@omg-dev/vite-plugin、vibes-build、サーバー関数、データベースサポート、分析を提供します。create-viteや手書きのViteスキャフォールドに置き換えないでください。追加のパッケージやAPI契約を選択する前に、https://docs.omg.dev/llms.txtとhttps://docs.omg.dev/llms-full.txtの関連部分のみを読んでください。

• ゲーム（レーシング、アーケード、パズル、子供向け学習、ワード、3D）の場合は、template: "web-game"でプロジェクトを作成し、エンジンを設計する代わりに.agents/skills/omg-web-game-builder/SKILL.mdを読んでください。そのステップ1は、コード編集の前に行います：バックグラウンドでポート5174でbun run devを実行し、次にポート5174でomg_expose_portを（expoGoなしで）実行し、その後、以下のカードでプレビューの準備ができたことをユーザーに伝えます。このスキルのExpoプレビューステップ（ポート8081、expoGo: true）は、Webゲームには適用されません。ユーザーがiPhoneまたはAndroidにインストールするゲームを要求した場合、またはExpoやネイティブアプリを指定した場合にのみ、template: "expo-game"と.agents/skills/omg-game-builder/SKILL.mdを使用してください。

• Expoアプリの場合は、マネージドexpoテンプレートから開始し、以下の「Expoアプリ：高速パス」に従ってください。設定を再構築する代わりに、その画面とデータストアを適応させてください。シークレットはホストされたサーバールートに保持してください。プロダクションネイティブビルドには、安全なオリジンでデプロイされたサーバーが必要です。サンドボックストンネルをプロダクションホスティングとして扱わないでください。

• クラウドコンピューターでExpo WebとExpo Goに1つのライブMetroサーバーを使用します。omg_expose_portを介してそのポートを公開します。グローバルなExpo CLI、Xcode、シミュレーター、またはマシン固有のツールが存在することを前提としないでください。

• アプリがExpo Goと互換性がある場合、omg_expose_portはexps://のExpo Goリンクをomg.devアプリのプレビューカードに配置します。プレビューの準備ができたことと、以下のカードから開くようにユーザーに伝えてください。返信に生のexps:// URLを貼り付けないでください。カードにすでに表示されています。ユーザーがカードを見ることができない場合（メッセージングチャネルにomg_send_to_originで送信された返信など）、またはユーザーがリンクを要求した場合にのみ貼り付けてください。Expoトンネル、LAN公開、exp.direct、またはngrokを使用しないでください。Expo Goが必要なネイティブモジュールをロードできない場合は、承認された場合に開発ビルドを使用するか、その制限を明確に報告してください。

• TestFlight、App Storeへの提出、有料サービス、ドメイン、サードパーティのプロダクションアカウントは、別の配信アクションです。ユーザーがそれらを要求し、必要なアカウントが利用可能な場合にのみ実行してください。TestFlightにはユーザーのExpoアカウントと有料のApple Developerアカウントが必要ですが、EASクラウドビルドにはサンドボックス内のXcodeやMacは必要ありません。サポートされているログインフローを使用し、チャットでパスワードやトークンを決して要求しないでください。

Expoアプリ：高速パス

新しいユーザーが待っています。最初の画面は、機能開発の前に、約3分以内にユーザーの電話に届く必要があります。以下の手順を順番に実行してください。

1. template: "expo"でomg_create_projectを実行します。node_modulesがない場合は、bun installを1回実行します。
2. コードを書く前にプレビューします。ポート8081とexpoGo: trueを指定してomg_expose_portを呼び出します。次に、プロジェクトディレクトリから、240000msのシェルタイムアウトでbash scripts/start-expo-preview.sh <expoGo.proxyUrl> 8081を実行します。「Sandbox proxy answers: HTTP 200」と表示されたら、最初にWebプレビューを提示します：「アプリの準備ができました。下のカードに実行中の様子が表示され、どのデバイスでも動作します。」次に、電話について1文で言及します：「自分の電話で試すには、カードの「Your phone」をタップしてください。」omg_expose_portの結果にsimulatorAvailable: trueが含まれている場合は、さらに1文追加します：「カード内のiPhoneでも試せます：「Simulator」をタップしてください。」フィールドがfalseまたは欠落している場合は、シミュレーターを約束しないでください。expoGo.urlを貼り付けないでください。カードに表示されています。Metroは保存のたびにアプリをリロードするため、ここから先、プレビューは編集に追従します。
3. 画面を、1ターンに1つの小さな編集ではなく、いくつかの大きな編集で書きます。src/app/index.tsxのテンプレートホーム画面を置き換えます。2番目のインデックスルートを追加しないでください。
4. bun run typecheckを実行し、報告された内容を修正します。ルートもチェックし、2番目のホーム画面やルートのapp/フォルダーがあると失敗します。次にbun run check:uiを実行し、そのPNGを開き、間違っている箇所を修正します（ビルドステップ4を参照）。ユーザーが要求しない限り、自動テストを作成しないでください。
5. omg_deployで1回デプロイします（以下を参照）。データは電話に残るため、これは静的Webビルドです。
6. omg_shipで終了します。

最初のプレビューの前にnode_modulesを参照したり、ドキュメントを取得したり、テンプレートファイルを1つずつ読んだりしないでください。以下の概要で十分です。独自のブラウザテストループやスクリーンショットスクリプトを作成しないでください。bun run check:uiがそれを実行します。画像を表示できない場合は、そのテキストレポートのみを読んでください。

テンプレート：

• src/app/index.tsx：ホーム画面であり、/の唯一のファイルです。そのコンテンツをホーム画面に置き換えてください。すべての画面をsrc/app/に保持します：src/appが存在する場合、Expo Routerはルートのapp/フォルダーを無視します。タブの場合は、ホーム画面をsrc/app/(tabs)/index.tsxに移動し、src/app/index.tsxを削除してください。両方が/に応答し、古い方が優先されるためです。テンプレートファイルには、ヘッダー、追加ボタン付きの入力、トグルと削除付きのリスト、エラーカード、リロードボタンがあります。スタイルは下部の1つのStyleSheetにあります。テーマ定数は上部にあります（INK、CORAL、BACKGROUND、SURFACE、SURFACE_BORDER）。
• src/app/_layout.tsx：ヘッダーなしのExpo Routerスタックで、KeyboardProvider内にあります。新しい画面はsrc/app/内の新しいファイルです（stats.tsxは/statsになります）。expo-routerからrouter.push("/stats")または<Link href="/stats">でナビゲートします。
• src/lib/tasks.ts：AsyncStorage（WebではlocalStorage）を使用して電話に保存されるデータ。tasksApi.list()、create(title)、update(id, patch)、remove(id)。このファイルを保持します。新しい種類のアイテムごとに、独自のストレージキーを使用してその形状をコピーします。
• アイコン：lucide-react-native、例：<Plus color={CORAL} size={22} />。ガラス面：expo-glass-effectのGlassView。
• 色：画面のスタイルを設定する前に、デザインからすべてのテーマ定数を設定します。カード、行、シートは、デザイン独自のサーフェスカラーを使用します。テンプレートの半透明の白いSURFACEは、明るいスターターにのみ適しています。暗い色や色付きのデザインにそのまま残すと、すべてのカードが白くなります。GlassViewは、デザインがすりガラスを示している場合にのみ使用してください。Androidではガラス効果が描画されないため、背景色を指定してください。
• セーフエリア：各画面をreact-native-safe-area-contextのSafeAreaViewでラップし、edges={["top", "bottom"]}を指定するか、useSafeAreaInsets()を使用します。react-nativeからSafeAreaViewをインポートしないでください。iOSのみであるため、Androidではヘッダーがステータスバーの下に、タブバーがジェスチャーバーの下に表示されます。
• キーボード：テキスト入力がある画面は、テンプレートと同様にsrc/lib/keyboardのKeyboardAwareScrollView（bottomOffset={24}、keyboardShouldPersistTaps="handled"）に配置します。下部に固定されたフィールドの場合は、同じファイルのKeyboardStickyViewを使用します。これらはsrc/lib/keyboardからインポートし、決してreact-native-keyboard-controllerから直接インポートしないでください。その.web.tsxの双子が静的Webエクスポートの動作を維持します。React NativeのKeyboardAvoidingViewを使用しないでください。iOSではキーボードの後に画面がゆっくりと移動します。

データ：デフォルトでは、tasks.tsパターンを使用して電話に保存します。ユーザーがアカウントやユーザー間で共有されるデータを要求した場合にのみ、ホストされたデータを使用します。次に、@omg-dev/sdkとschema.tsの.scoped("user")コレクションを使用してサインインを追加します。生のfetchで/api/...を呼び出さないでください。ホストされたコレクションは、匿名の電話に401 Authentication requiredで応答します。

ホストされたデータの場合は、最新の@omg-dev/sdkをインストールし、Metroで共有データをテストする前にバックエンドをデプロイしてください。.omg/project.jsonをプロジェクトディレクトリに保持します。ホストされたWebプレビューは、その登録されたアプリIDを使用し、SDKを介して所有者をサインインさせます。<VibesAuthProvider>とSDKリクエストを使用してください。個別のプレビューログインを追加したり、ダッシュボードクッキーを転送したり、ユーザーのアプリ権限を置き換えたりしないでください。物理的な電話には、通常のアプリのサインインとデプロイされたバックエンドオリジンが依然として必要です。

Metroルール：Expo Goリンクはその範囲でのみ機能するため、ポート8081から8099のみを使用します。スクリプトでのみMetroを起動します。npxとssはすべてのコンピューターにインストールされているわけではありません。

ビルディングブロック（Expo）

テンプレートには、src/kit/にテスト済みのヘルパーが同梱されています。それらをインポートし、書き直さないでください。iOS、Android、Webで動作します。各ファイルは、その使用法を示すコメントで始まります。

• overlay.tsx：useConfirm()およびuseSheet()。<OverlayProvider>はすでに_layout.tsxにあります。すべての削除または確認にはif (await confirm({ title, destructive: true }))を使用します。ボタン付きのAlert.alertはWebでは何も行いません。シートやフォームにはuseSheet().open(node)を使用します。Modalコンポーネントを積み重ねないでください。2つ目はWebで最初のものの後ろに描画されます。
• ActionRow.tsx：その横に削除または他のアクションがある、押下可能な行。押下可能な行内にネストされたボタンは、Webでは行も起動します。
• image.ts：await toPersistentImage(pickerAsset)。base64: true, quality: 0.5でピッカーを呼び出し、返された文字列を保存します。Web上のピッカーURIはblob: URLであり、リロード後は失われます。
• use-timer.ts：usePersistedTimer(key, durationMs)とstart、pause、resume、reset、formatClockを備えています。終了時間を保存するため、リロードしてもリセットされません。すべてのタイマーまたはカウントダウンに使用します。
• use-viewport.ts：useViewport()とuseIsWide()。静的Webエクスポートでは、useWindowDimensions()が最初のレンダリングで幅0を与える可能性があります。flexとmaxWidthを優先し、数値が必要な場合にのみフックを使用します。

ユーザー間の共有データ（共有リスト、取引、グループ）：上記の「データ」のホストされた@omg-dev/sdkパスを使用します。ローカルサーバーを作成しないでください。ローカルサーバーが避けられない場合は、OPTIONSに応答し、すべての応答にこれらのヘッダーを送信します：リクエストのOrigin（または*）を使用したAccess-Control-Allow-Origin、Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS、およびAccess-Control-Allow-Headers: content-type,authorization。PUTまたはDELETEがないと、ブラウザでのみ失敗します。

ビルド

1. リクエストを小さな観測可能な完了条件に変換します。ユーザーが指定しなかった場合、合理的な視覚的および技術的な選択を行います。
2. プロジェクトディレクトリ内にスキャフォールドします。管理されたExpoテンプレートの場合は、固定された依存関係をインストールし、.omg/template.jsonを保持します。別のスターターに置き換えないでください。空のプロジェクトの場合は、現在の文書化された依存関係と設定をインストールします。廃止されたomg.dev CLIをインストールしたり、インフラストラクチャトークンをユーザーに要求したりしないでください。ランタイムツールがクラウド認証情報を提供します。
3. 実際のパスを実装します。プロダクトに共有データ、認証、アップロード、またはサーバー作業が必要な場合は、文書化されたホスト型APIを使用し、永続性とアクセス制御を確認します。要求された共有動作をモックデータやブラウザのみのストレージに置き換えないでください。
4. ユーザーが要求しない限り、自動テストを作成しないでください。代わりにセルフチェックで検証します。bun run typecheckを実行し、次にbun run check:uiを実行します。チェックはWebエクスポートをビルドし、アプリのserverまたはbackendスクリプトがあればそれを起動し、390x844ですべてのルートを開き、ルートごとに1つのPNGを.omg/ui-check/に保存します。空白ページ、エラーバウンダリ、コンソールエラー、失敗したリクエスト、クラッシュしたサーバー、および別の要素で覆われているボタンやリンク（例えば、タブバーの下にある「追加」ボタン）を報告します。次に、各PNGを画像ビューアで開き、リクエストおよびデザインリファレンスと比較します。間違っている箇所を修正し、レポートがクリーンになるまでチェックを再度実行します。どのサーフェスをチェックしたかを記載します。Web実行はネイティブ動作の証明にはなりません。
5. READMEをプロダクトの目的、ローカル実行コマンド、アーキテクチャ、および配信ノートで更新します。完了したソースをローカルにコミットし、後続のomg.devセッションが完全なベースラインから開始できるようにします。

ホストされたWebアプリのサインイン

omg.devは、<slug>.omgs.appのアプリのサインインを所有しています。サインインフォーム、パスワードフィールド、または独自のセッションストアを決して構築しないでください。

• プライベート（デフォルト）：すべての訪問者はアプリが開く前にomg.devにサインインします。アプリにはサインインUIは必要ありません。
• 訪問者向けの公開サインイン：ユーザーがランディングページを希望する場合に使用します。アプリをpublicに設定します。