Build a better first run.

Take a task app from idea to one saved task, using six skills.

Six stages completed · Codex CLI 0.163.0

Get the starter ↓Get AgentBay Finished files ↓

Setup & checks

Unzip the starter and open its folder in Codex. Install AgentBay once; start a fresh chat and confirm it appears in Skills.

For each stage, install its named skill, start a fresh chat and ask Codex to read its SKILL.md. Use the stage’s AgentBay button or pinned install command.

Requires Node.js 24, Python 3.12, Git and Chromium.

npm ci
npx playwright install chromium
npm test  # starter validation tests fail

Full setup & browser integration · Source map

The six stages

1 / 6 · Brainstorming

Choose the first win.

Start with one saved task. Compare that with asking for signup first.

SKILL.md ↗View brief →

Task, setup & log

Your task

Use AgentBay and brainstorming to compare signup-first with first-task onboarding for this task app. Keep the first win to one saved task. Write docs/brief.md and docs/brief.json only, preserving the eight requirements in brief.md.

Full task & file boundaries →

Install this skill

npx --yes skills@1.7.4 add https://github.com/obra/superpowers/tree/2ce8aa15d05bd57213e6f746f953aafb7ded7a8b/skills/brainstorming --skill brainstorming --agent codex --yes

Recorded output

ravisingh@agentbay onboarding % python3 verify-stage.py brainstorming
Brainstorming complete
  2 approaches compared
  First win: one saved task
  8 requirements retained
  Output: docs/brief.md

Recorded terminal output for Brainstorming. Text is available in the stage details. — Two approaches compared; eight requirements retained.

Next: UX / Screen Design →

2 / 6 · UX / Screen Design

Make the next step obvious.

Make the next action clear. Design the failed save and retry, too.

SKILL.md ↗View interactive prototype source →

Task, setup & log

Your task

Use AgentBay and frontend-design-saas to make an interactive onboarding prototype in prototype.html. Follow docs/brief.md and all eight requirements. Include the busy state, failed save and retry. Change prototype.html only; inspect it with the fixed browser checks.

Full task & file boundaries →

Install this skill

npx --yes skills@1.7.4 add https://github.com/cloudflare/vibesdk/tree/32c9e429cd2712ea5959a89f65ae434162b89229/worker/agents/think/skills/frontend-design-saas --skill frontend-design-saas --agent codex --yes

Recorded output

ravisingh@agentbay onboarding % python3 verify-stage.py ux
UX prototype verified
  12 browser checks passed
  Widths: 320 / 390 / 1280px
  Save failure, retry and reload passed
  Markup stays text

Recorded terminal output for UX / Screen Design. Text is available in the stage details. — 12 browser checks pass, including save failure and retry.

Actual prototype showing the first saved task — The prototype after a saved task survives reload.

Prototype save error with the task name retained — The error keeps your task name in place.

Next: Architecture Review →

3 / 6 · Architecture Review

Decide where the behavior belongs.

Give screen state, validation and storage separate jobs.

SKILL.md ↗View architecture review →

Task, setup & log

Your task

Use AgentBay and architecture-blueprint-generator to review prototype.html and src/storage.js. Map the actual data flow, decisions and risks in docs/architecture.md and docs/architecture.json. Keep the final app separate from the prototype. Change only those two documents.

Full task & file boundaries →

Install this skill

npx --yes skills@1.7.4 add https://github.com/github/awesome-copilot/tree/5269f7ea2d6c3a9bfda5ed878b6726cf509121fd/skills/architecture-blueprint-generator --skill architecture-blueprint-generator --agent codex --yes

Recorded output

ravisingh@agentbay onboarding % python3 verify-stage.py architecture
Architecture review recorded
  5 components mapped to files
  5 decisions with tradeoffs
  6 risks documented
  Output: docs/architecture.md

Recorded terminal output for Architecture Review. Text is available in the stage details. — Five files mapped; five decisions and six risks recorded.

Next: Writing Plans →

4 / 6 · Writing Plans

Give the agent a short, ordered job.

Name the files, order the work and put a check beside each task.

SKILL.md ↗View implementation plan →

Task, setup & log

Your task

Use AgentBay and writing-plans to turn the brief, prototype and architecture into an implementation plan. Write specs/onboarding/plan.md, tasks.md and tasks.json. Cover all eight requirements, name the exact files and use the existing checks. Do not implement yet.

Full task & file boundaries →

Install this skill

npx --yes skills@1.7.4 add https://github.com/obra/superpowers/tree/2ce8aa15d05bd57213e6f746f953aafb7ded7a8b/skills/writing-plans --skill writing-plans --agent codex --yes

Recorded output

ravisingh@agentbay onboarding % python3 verify-stage.py planning
Implementation plan checked
  3 ordered tasks
  8 / 8 requirements mapped
  Markdown and JSON agree
  Output: specs/onboarding/plan.md

Recorded terminal output for Writing Plans. Text is available in the stage details. — Three ordered tasks cover all eight requirements.

Next: Pre-implementation Audit →

5 / 6 · Pre-implementation Audit

Check the plan before writing the app.

Match the plan to the requirements before changing the app.

SKILL.md ↗View audit report →

Task, setup & log

Your task

Use AgentBay and analyze to review the constitution, spec, plan and tasks for this local onboarding app. Check all eight requirements, dependencies and consistency. Return the audit report without changing any file.

Full task & file boundaries →

Install this skill

npx --yes skills@1.7.4 add https://github.com/Azure-Samples/Spec2Cloud/tree/cbcdcf5c5ea904b3d81a32abfa75c6bc0bc49a83/plugins/speckit-spec2cloud/skills/analyze --skill analyze --agent codex --yes

Recorded output

ravisingh@agentbay onboarding % python3 verify-stage.py audit
Pre-implementation audit recorded
  8 requirements reviewed
  Coverage and constitution checked
  Findings retain source locations
  Output: docs/audit.md

Recorded terminal output for Pre-implementation Audit. Text is available in the stage details. — All eight requirements covered; no findings.

Next: Guardrails →

6 / 6 · Guardrails

Make a broken change stop.

Run the checks on the broken starter, then on the fixed app.

SKILL.md ↗View guardrail decisions →

Set up guardrails

Your task

Use AgentBay and prepare-safe-change to implement the reviewed plan. Change only index.html, src/app.js and src/task.js. Run npm test and the fixed browser checks. Keep the policy, tests and storage adapter unchanged. Do not commit or deploy.

Full task & file boundaries →

Guardrail setup

Installs local Proof and one skill. GitHub Actions stay off.

python3 setup-guardrails.py
python3 .proof/configure.py --set unit-tests=enforced --operation change
PROOF_UNIT_TEST_COMMAND="npm test" python3 .toolkit-cache/ai-toolkit.pyz check --target . --base-ref HEAD~1 --json

Recorded output

ravisingh@agentbay onboarding % npm test
ℹ tests 8
ℹ pass 4
ℹ fail 4

Proof · unit-tests enforced
  Starter revision: 324c53e → BLOCK

ravisingh@agentbay onboarding % npm test
ℹ tests 8
ℹ pass 8
ℹ fail 0

Proof · same policy
  Corrected revision: dc02ecc → ALLOW
  Unit tests: 8 passed
  Browser checks: 12 passed
  Other controls: advisory; see full decisions

Recorded terminal output for Guardrails. Text is available in the stage details. — Starter blocked. Fixed app: 8 unit tests and 12 browser checks pass.

Finished task app showing one persisted task — The finished app: one task saved and still present after reload.

Finished onboarding welcome with Get started button — Start with one clear action.

Finished form shows Save failed. Try again. and preserves the task — A failed save has a clear recovery path.

Run details & sources

This synthetic example used supplied, pinned upstream skills with AgentBay. Instruction loading was observed; the run did not perform a catalogue search.

Eight unit cases and twelve browser checks cover save failure, retry, reload and 320 / 390 / 1280px layouts. The sample enforces unit tests; other controls retain their modes.

Terminal views show recorded output in the ravisingh prompt style.

Codex desktop, Claude Code and Claude desktop task execution were not tested for this series.

Runtime receipt & hashes · Browser checks · Unit-test output