BennyKok/omg.dev

建置並交付一個 omg.dev 應用程式

將使用者的產品描述轉化為可運作、經驗證的結果。與代理程式一同完成設定工作。僅詢問會實質改變結果的產品選擇。

每次提問只問一個問題，並且在一個問題中只放一個決定。同一個呼叫中的第二個問題，不會在所有用戶端上顯示給使用者。如果使用者尚未說明應用程式應該做什麼，請用簡單明瞭的文字詢問，並等待答案。不要在其位置上建立佔位產品。如果問題超時，請在正常訊息中再次詢問一次，然後結束該回合。

建立專案

• 在快速聊天中，使用簡短的描述性名稱呼叫一次 omg_create_project。對於 Expo 或通用行動應用程式，將 template 設定為 expo。Expo 範本已包含一個可運作的待辦事項流程，資料儲存在手機上、Expo Router、Liquid Glass、Lucide 圖示、網頁支援以及 EAS 設定。對於每個指令、編輯、檢查和部署，使用回傳的 repo.cwd。在重試不確定的 create 呼叫之前，請先檢查 omg_list_repos。
• 在新專案工作階段中，當前目錄已經是專案。它包含 Git、一個 README 和這個技能。不要建立第二個專案。
• 保留 .git。不要覆蓋現有資料夾，也不要將目前的快速聊天移入新專案。

選擇交付路徑

• 對於網站、網頁應用程式或 API，除非使用者要求其他平台，否則使用支援的 omg.dev 執行環境。在一個空白專案中，在撰寫產品程式碼之前，先建立官方的 omg.dev React 範本。當前目錄已包含 Git 和 omg.dev 指令，因此在其中建立一個臨時目錄，將 Scaffold 複製到專案中，然後僅移除該臨時目錄：

  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 Scaffold。在選擇其他套件或 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 在任何程式碼編輯之前：在背景執行 bun run dev，埠號為 5174，然後使用埠號 5174 且不帶 expoGo 執行 omg_expose_port，然後告訴使用者預覽已在下方卡片中準備就緒。此技能中的 Expo 預覽步驟（埠號 8081，expoGo: true）不適用於網頁遊戲。僅在使用者要求安裝在 iPhone 或 Android 上的遊戲，或提到 Expo 或原生應用程式時，才使用 template: "expo-game" 和 .agents/skills/omg-game-builder/SKILL.md。

• 對於 Expo 應用程式，從受管的 expo 範本開始，並遵循下面的「Expo 應用程式：快速路徑」。調整其畫面及其資料儲存，而不是重新建置設定。將秘密保留在託管伺服器路由中。生產環境的原生建置需要在安全的來源部署任何伺服器；不要將 Sandbox 隧道視為生產環境託管。

• 在 Cloud Computer 中使用一個即時的 Metro 伺服器來服務 Expo Web 和 Expo Go。透過 omg_expose_port 暴露其埠號；不要假設存在全域性的 Expo CLI、Xcode、模擬器或機器專用工具。

• 當應用程式與 Expo Go 相容時，omg_expose_port 會在 omg.dev 應用程式的預覽卡片上放置 exps:// Expo Go 連結。告訴使用者預覽已準備就緒，並從下方的卡片開啟它。不要在你的回覆中貼上原始的 exps:// URL；卡片已顯示它。僅在使用者看不到卡片的地方貼上它，例如使用 omg_send_to_origin 傳送到訊息頻道的回覆，或使用者要求連結時。不要使用 Expo tunnel、LAN 暴露、exp.direct 或 ngrok。如果 Expo Go 無法載入所需的原生模組，請在獲得授權時使用開發建置，或明確報告該限制。

• TestFlight、App Store 提交、付費服務、網域和第三方生產環境帳戶是單獨的交付操作。僅在使用者要求且所需帳戶可用時才執行它們。TestFlight 需要使用者的 Expo 帳戶和付費的 Apple Developer 帳戶，但 EAS 雲端建置不需要 Sandbox 中的 Xcode 或 Mac。使用支援的登入流程，切勿在聊天中要求密碼或令牌。

Expo 應用程式：快速路徑

一個新使用者正在等待。第一個畫面必須在大約 3 分鐘內送達他們的手機，然後再進行功能開發。請依序執行以下步驟：

1. 使用 template: "expo" 執行 omg_create_project。如果缺少 node_modules，執行一次 bun install。
2. 在撰寫任何程式碼之前進行預覽。使用埠號 8081 和 expoGo: true 呼叫 omg_expose_port。然後從專案目錄執行 bash scripts/start-expo-preview.sh <expoGo.proxyUrl> 8081，shell 逾時設定為 240000 毫秒。當它列印出 Sandbox proxy answers: HTTP 200 時，首先呈現網頁預覽：「您的應用程式已準備就緒。下方的卡片顯示它正在執行，並且可以在任何裝置上運作。」然後用一句話提到手機：「要在您自己的手機上試用，請點擊卡片上的「您的手機」。」當 omg_expose_port 的結果有 simulatorAvailable: true 時，再加上一句話：「您也可以直接在卡片中的 iPhone 上試用：點擊「模擬器」。」當該欄位為 false 或缺失時，不要承諾模擬器。不要貼上 expoGo.url；卡片會顯示它。Metro 會在每次儲存時重新載入應用程式，因此預覽會從這裡開始跟隨您的編輯。
3. 撰寫畫面，一次進行幾個較大的編輯，而不是每回合一個小編輯。取代 src/app/index.tsx 中的範本首頁；不要新增第二個 index 路由。
4. 執行 bun run typecheck 並修復它報告的內容。它也會檢查路由，並在出現第二個首頁或根目錄 app/ 資料夾時失敗。然後執行 bun run check:ui，開啟其 PNG 檔案，並修復錯誤的內容（請參閱建置步驟 4）。除非使用者要求，否則不要撰寫自動化測試。
5. 使用 omg_deploy 部署一次（請參閱下文）。資料保留在手機上，因此這是一個靜態網頁建置。
6. 使用 omg_ship 完成。

在第一次預覽之前，不要瀏覽 node_modules、擷取文件或逐檔案讀取範本：下面的摘要已足夠。不要撰寫自己的瀏覽器測試迴圈或螢幕截圖指令碼：bun run check:ui 會執行這些操作。如果您無法檢視圖片，請僅閱讀其文字報告。

範本：

• src/app/index.tsx：首頁，也是 / 的唯一檔案。用您的首頁取代其內容。將每個畫面保留在 src/app/ 中：當 src/app 存在時，Expo Router 會忽略根目錄的 app/ 資料夾。對於分頁，將首頁移至 src/app/(tabs)/index.tsx 並刪除 src/app/index.tsx，因為兩者都會回應 /，而舊的會勝出。範本檔案有一個標頭、一個帶有新增按鈕的輸入、一個帶有切換和刪除的列表、一個錯誤卡片和一個重新載入按鈕。樣式在底部的單一 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（在網頁上是 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 雙胞胎保持靜態網頁匯出正常運作。不要使用 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 保留在專案目錄中。託管網頁預覽使用該已註冊的應用程式身份，並透過 SDK 為其擁有者簽入。使用 <VibesAuthProvider> 和 SDK 請求。不要新增單獨的預覽登入、轉發儀表板 cookie 或取代使用者的應用程式權限。實體手機仍然需要應用程式的正常登入和已部署的後端來源。

Metro 規則：僅使用埠號 8081 到 8099，因為 Expo Go 連結僅在該範圍內有效。僅使用指令碼啟動 Metro；npx 和 ss 並非安裝在每台 Computer 上。

建構區塊（Expo）

範本在 src/kit/ 中提供了經過測試的輔助程式。匯入它們；不要重寫它們。它們可在 iOS、Android 和網頁上運作。每個檔案都以顯示其用途的註解開頭。

• overlay.tsx：useConfirm() 和 useSheet()。<OverlayProvider> 已在 _layout.tsx 中。對於每個刪除或確認，使用 if (await confirm({ title, destructive: true }))。帶有按鈕的 Alert.alert 在網頁上沒有任何作用。使用 useSheet().open(node) 處理工作表和表單。不要堆疊 Modal 元件：第二個元件在網頁上會繪製在第一個元件後面。
• ActionRow.tsx：一個可按壓的行，旁邊帶有刪除或其他操作。巢狀在可按壓行內部的按鈕也會在網頁上觸發該行。
• image.ts：await toPersistentImage(pickerAsset)。使用 base64: true, quality: 0.5 呼叫選擇器，並儲存回傳的字串。網頁上的選擇器 URI 是一個 blob: URL，重新載入後就會消失。
• use-timer.ts：usePersistedTimer(key, durationMs) 帶有 start、pause、resume、reset 和 formatClock。它會儲存結束時間，因此重新載入不會重置它。對於每個計時器或倒數計時，使用它。
• use-viewport.ts：useViewport() 和 useIsWide()。在靜態網頁匯出中，useWindowDimensions() 在首次渲染時可能給出寬度 0。偏好使用 flex 和 maxWidth；僅在需要數字時才使用這個 hook。

人與人之間共享的資料（共享列表、交易、群組）：使用上面「資料」中的託管 @omg-dev/sdk 路徑。不要撰寫本地伺服器。如果本地伺服器無法避免，請回答 OPTIONS 並在每個回應上發送這些標頭：Access-Control-Allow-Origin 帶有請求的 Origin（或 *）、Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 和 Access-Control-Allow-Headers: content-type,authorization。缺少 PUT 或 DELETE 僅會在瀏覽器中失敗。

建置

1. 將請求轉換為一個小的可觀察完成條件。在使用者未指定時，做出合理的視覺和技術選擇。
2. 在專案目錄內建立 Scaffold。對於受管的 Expo 範本，安裝其鎖定的依賴項並保留 .omg/template.json；不要用另一個入門範本取代它。對於空白專案，安裝目前記載的依賴項和設定。不要安裝已淘汰的 omg.dev CLI，也不要向使用者要求基礎設施令牌；執行環境工具會提供 Cloud 憑證。
3. 實作實際路徑。如果產品需要共享資料、驗證、上傳或伺服器工作，請使用記載的託管 API，並驗證持久性和存取控制。不要用模擬資料或僅瀏覽器儲存來取代要求的共享行為。
4. 除非使用者要求，否則不要撰寫自動化測試。而是使用自我檢查進行驗證：執行 bun run typecheck，然後執行 bun run check:ui。此檢查會建置網頁匯出，如果有 server 或 backend 指令碼則啟動應用程式的指令碼，以 390x844 開啟每個路由，並在 .omg/ui-check/ 中為每個路由儲存一個 PNG。它會報告空白頁面、錯誤邊界、主控台錯誤、失敗的請求、崩潰的伺服器，以及被其他元素覆蓋的按鈕或連結（例如，位於標籤列下方的「新增」按鈕）。然後使用圖片檢視器開啟每個 PNG，並將其與請求以及任何設計參考進行比較。修復錯誤的內容，並再次執行檢查，直到報告乾淨為止。說明您檢查了哪個表面；網頁執行並不能證明原生行為。
5. 使用產品用途、本地執行命令、架構和交付說明更新 README。在本地提交完成的原始碼，以便後續的 omg.dev 工作階段能從完整的基準線開始。

託管網頁應用程式的登入

omg.dev 擁有 <slug>.omgs.app 應用程式的登入權。永遠不要建立登入表單、密碼欄位或您自己的工作階段儲存。

• 私有（預設）：每個訪客在應用程式開啟前都會登入 omg.dev。應用程式不需要登入 UI。
• 公開附帶登入：當使用者想要一個訪客的登陸頁面時使用此選項。將應用程式設定為 public 搭配...

…

[已截斷]