Shopify App Ralph
Iterate against one stable goal until its observable completion contract is true,
the bounded iteration limit is reached, or a real blocker needs the user.
Start or resume the dev server
For Auctions, first inspect the Codex task terminal for a healthy matching dev
session. Reuse it when present. Otherwise, start this exact command
automatically in a persistent PTY from the Auctions repository root:
bun run dev:faux-auctions -- --store mrmaple-development.myshopify.com
Treat mrmaple-development.myshopify.com as the known non-production
development store for this workflow. The wrapper still runs shopify app dev
while providing the repository's bounded faux Lot reads. Do not start a second
matching session. Continue once the localhost and preview URLs appear. If
Shopify requires interactive authentication, approval, or other human input,
show the prompt and pause for the user.
For other repositories, ask the user to start the repository's Shopify
development command in the Codex task terminal, choose a non-production
development store, leave it running, and tell you when the localhost and preview
URLs appear. Do not start their interactive Shopify CLI process for them.
Resume only after readiness
- Read the Codex task terminal output when that surface is available. Do not
ask the user to paste output already visible there.
- Record the selected store, localhost app URL, Shopify preview or Dev Console
URL, app-proxy storefront path, and theme-extension preview link. Never print
credentials, signed query parameters, cookies, or tokens.
- Confirm the selected store is a development store or otherwise explicitly
non-production. Stop before browser interaction if it is the live merchant
storefront.
- Resolve this skill's directory and run
scripts/wait-for-http.mjs --url <localhost-url>. Honor repository shell
conventions around that command. Wait up to five minutes by default. A
redirect or authentication response proves HTTP readiness; a 5xx does not.
- If no localhost URL is visible, inspect the latest terminal output once
more. Ask the user for the URL only when it cannot be discovered.
- Read references/shopify-dev-preview.md.
In Auctions, also read references/auctions.md.
Do not begin edits while the dev server is absent, still compiling, or serving
5xx responses.
Establish the loop contract
Keep the user's task text stable through every iteration. Derive:
- one concrete goal;
- observable browser behavior for frontend work;
- focused automated gates for backend and shared behavior;
- a default limit of 8 implementation iterations unless the user sets another
positive limit;
- any explicit completion promise.
Never claim a promise or completion condition until all named evidence is true.
Each iteration must produce new evidence, a scoped change, or a sharper failure
classification. Stop instead of repeating an unchanged failed approach.
Select the proof surface
Use the development-store preview as the integration surface:
- Embedded admin: open the app preview URL emitted by
shopify app dev.
- Storefront: open the development store's app-proxy path or theme-extension
preview link, not the production Cloud Run URL.
- Theme app extension: use its development preview. Add or enable its block or
app embed only on the preview/development theme; never publish a live theme.
- Backend-only changes: use focused tests first, then exercise the smallest
relevant local/tunneled route. Use the Shopify storefront path when app-proxy
signature or customer context is part of the behavior.
When app configuration automatically updates development URLs and the app proxy
uses a relative target, shopify app dev routes the selected development
store's proxy to the dev tunnel. Theme extension files are watched by the same
dev session. This is the fast path that avoids a Git push and Cloud Run upload.
Treat it as local/dev-store proof only.
Use the Codex in-app Browser
For every frontend iteration, load and follow the available
browser:control-in-app-browser skill. The user explicitly selected the Codex
in-app Browser, so bind the in-app browser directly and do not substitute
Chrome, standalone Playwright, or a headless smoke script.
- Reuse one persistent browser binding and the existing site tab when possible.
- Read the browser's complete documentation before its first action.
- Open the dev-store preview URL and preserve its Shopify authentication.
- If authentication blocks the page, ask the user to sign in in the in-app
Browser and wait for confirmation.
- Inspect visible UI, DOM-backed state, console errors, and relevant network
failures. Do not inspect cookies, storage, passwords, or session secrets.
- Check at least one narrow mobile viewport and one common desktop viewport for
responsive UI work.
- Reload the same page after the Shopify watcher reports the change ready.
Avoid opening a new tab per iteration.
Run one iteration
Repeat this sequence:
- Inspect the exact failing or target state in the browser, test output, or
local route response.
- Discover the owning code using the repository's prescribed search routing.
Read its agent instructions and preserve unrelated dirty changes.
- Make the smallest coherent frontend/backend change. Do not weaken contracts,
tests, permissions, tenancy, idempotency, or safety gates.
- Run the narrowest relevant automated test, type check, generator check, or
contract check.
- Read the running dev terminal for rebuild errors. Wait for the local HTTP
surface again when the server restarted.
- Reload and exercise the development-store page in the in-app Browser.
Verify the changed state plus one adjacent regression-sensitive state.
- Record iteration number, changed files, gate result, browser result, and the
next hypothesis in working commentary. Keep active project status in the
repo's canonical artifact when its instructions require that; do not create
a competing skill-state document.
- Re-evaluate the completion contract. Continue only when another bounded
iteration can materially improve the result.
Frontend and backend changes may be in the same iteration only when one behavior
requires both. Otherwise keep the loop narrow.
Safety boundaries
- Never push, deploy, release an app version, publish a theme, or update Cloud
Run merely to make the dev preview visible.
- Never run live Shopify mutations, customer-visible actions, provider sends,
Firestore or Redis writes, Scheduler changes, secrets changes, or traffic
changes without explicit authority for that exact action and environment.
- Prefer faux/read-only data for visual work. A local server using production
credentials is not automatically safe to mutate.
- Treat a stopped tunnel, required sign-in, missing store access, or external
dependency as a blocker after bounded retries; do not spin.
- Keep local tests, dev-store browser proof, deployed proof, and external
sign-off separate.
Finish
Stop when the completion contract is genuinely satisfied, the iteration limit
is reached, or a blocker requires user action. Report:
- outcome and iteration count;
- changed files;
- focused automated gates;
- browser paths and viewport/state coverage;
- remaining risks or exact blocker;
- explicit confirmation that no push, deploy, app release, or theme publication
occurred unless the user separately authorized and requested it.
Do not leave a background dev server or browser watcher that Codex started. The
user-owned shopify app dev process may remain running for continued iteration.
1---2name: shopify-app-ralph3description: Run a bounded Ralph-style implementation loop over a Shopify app's backend, embedded admin, app proxy, and theme app extension using `shopify app dev` and the Codex in-app Browser. Use when the user explicitly invokes `$shopify-app-ralph` or asks Codex to iteratively build, debug, or polish Shopify app frontend/backend behavior against a local dev server and development-store preview without waiting for a production or Cloud Run deploy.4---56# Shopify App Ralph78Iterate against one stable goal until its observable completion contract is true,9the bounded iteration limit is reached, or a real blocker needs the user.1011## Start or resume the dev server1213For Auctions, first inspect the Codex task terminal for a healthy matching dev14session. Reuse it when present. Otherwise, start this exact command15automatically in a persistent PTY from the Auctions repository root:1617```shell18bun run dev:faux-auctions -- --store mrmaple-development.myshopify.com19```2021Treat `mrmaple-development.myshopify.com` as the known non-production22development store for this workflow. The wrapper still runs `shopify app dev`23while providing the repository's bounded faux Lot reads. Do not start a second24matching session. Continue once the localhost and preview URLs appear. If25Shopify requires interactive authentication, approval, or other human input,26show the prompt and pause for the user.2728For other repositories, ask the user to start the repository's Shopify29development command in the Codex task terminal, choose a non-production30development store, leave it running, and tell you when the localhost and preview31URLs appear. Do not start their interactive Shopify CLI process for them.3233## Resume only after readiness34351. Read the Codex task terminal output when that surface is available. Do not36 ask the user to paste output already visible there.372. Record the selected store, localhost app URL, Shopify preview or Dev Console38 URL, app-proxy storefront path, and theme-extension preview link. Never print39 credentials, signed query parameters, cookies, or tokens.403. Confirm the selected store is a development store or otherwise explicitly41 non-production. Stop before browser interaction if it is the live merchant42 storefront.434. Resolve this skill's directory and run44 `scripts/wait-for-http.mjs --url <localhost-url>`. Honor repository shell45 conventions around that command. Wait up to five minutes by default. A46 redirect or authentication response proves HTTP readiness; a 5xx does not.475. If no localhost URL is visible, inspect the latest terminal output once48 more. Ask the user for the URL only when it cannot be discovered.496. Read [references/shopify-dev-preview.md](references/shopify-dev-preview.md).50 In Auctions, also read [references/auctions.md](references/auctions.md).5152Do not begin edits while the dev server is absent, still compiling, or serving535xx responses.5455## Establish the loop contract5657Keep the user's task text stable through every iteration. Derive:5859- one concrete goal;60- observable browser behavior for frontend work;61- focused automated gates for backend and shared behavior;62- a default limit of 8 implementation iterations unless the user sets another63 positive limit;64- any explicit completion promise.6566Never claim a promise or completion condition until all named evidence is true.67Each iteration must produce new evidence, a scoped change, or a sharper failure68classification. Stop instead of repeating an unchanged failed approach.6970## Select the proof surface7172Use the development-store preview as the integration surface:7374- Embedded admin: open the app preview URL emitted by `shopify app dev`.75- Storefront: open the development store's app-proxy path or theme-extension76 preview link, not the production Cloud Run URL.77- Theme app extension: use its development preview. Add or enable its block or78 app embed only on the preview/development theme; never publish a live theme.79- Backend-only changes: use focused tests first, then exercise the smallest80 relevant local/tunneled route. Use the Shopify storefront path when app-proxy81 signature or customer context is part of the behavior.8283When app configuration automatically updates development URLs and the app proxy84uses a relative target, `shopify app dev` routes the selected development85store's proxy to the dev tunnel. Theme extension files are watched by the same86dev session. This is the fast path that avoids a Git push and Cloud Run upload.87Treat it as local/dev-store proof only.8889## Use the Codex in-app Browser9091For every frontend iteration, load and follow the available92`browser:control-in-app-browser` skill. The user explicitly selected the Codex93in-app Browser, so bind the in-app browser directly and do not substitute94Chrome, standalone Playwright, or a headless smoke script.9596- Reuse one persistent browser binding and the existing site tab when possible.97- Read the browser's complete documentation before its first action.98- Open the dev-store preview URL and preserve its Shopify authentication.99- If authentication blocks the page, ask the user to sign in in the in-app100 Browser and wait for confirmation.101- Inspect visible UI, DOM-backed state, console errors, and relevant network102 failures. Do not inspect cookies, storage, passwords, or session secrets.103- Check at least one narrow mobile viewport and one common desktop viewport for104 responsive UI work.105- Reload the same page after the Shopify watcher reports the change ready.106 Avoid opening a new tab per iteration.107108## Run one iteration109110Repeat this sequence:1111121. Inspect the exact failing or target state in the browser, test output, or113 local route response.1142. Discover the owning code using the repository's prescribed search routing.115 Read its agent instructions and preserve unrelated dirty changes.1163. Make the smallest coherent frontend/backend change. Do not weaken contracts,117 tests, permissions, tenancy, idempotency, or safety gates.1184. Run the narrowest relevant automated test, type check, generator check, or119 contract check.1205. Read the running dev terminal for rebuild errors. Wait for the local HTTP121 surface again when the server restarted.1226. Reload and exercise the development-store page in the in-app Browser.123 Verify the changed state plus one adjacent regression-sensitive state.1247. Record iteration number, changed files, gate result, browser result, and the125 next hypothesis in working commentary. Keep active project status in the126 repo's canonical artifact when its instructions require that; do not create127 a competing skill-state document.1288. Re-evaluate the completion contract. Continue only when another bounded129 iteration can materially improve the result.130131Frontend and backend changes may be in the same iteration only when one behavior132requires both. Otherwise keep the loop narrow.133134## Safety boundaries135136- Never push, deploy, release an app version, publish a theme, or update Cloud137 Run merely to make the dev preview visible.138- Never run live Shopify mutations, customer-visible actions, provider sends,139 Firestore or Redis writes, Scheduler changes, secrets changes, or traffic140 changes without explicit authority for that exact action and environment.141- Prefer faux/read-only data for visual work. A local server using production142 credentials is not automatically safe to mutate.143- Treat a stopped tunnel, required sign-in, missing store access, or external144 dependency as a blocker after bounded retries; do not spin.145- Keep local tests, dev-store browser proof, deployed proof, and external146 sign-off separate.147148## Finish149150Stop when the completion contract is genuinely satisfied, the iteration limit151is reached, or a blocker requires user action. Report:152153- outcome and iteration count;154- changed files;155- focused automated gates;156- browser paths and viewport/state coverage;157- remaining risks or exact blocker;158- explicit confirmation that no push, deploy, app release, or theme publication159 occurred unless the user separately authorized and requested it.160161Do not leave a background dev server or browser watcher that Codex started. The162user-owned `shopify app dev` process may remain running for continued iteration.