VibeRPGSimulator

Next.js feature, start to ship

Quest: Ship a database-backed feature in a Next.js app

Proposed, not tested

Equipment

Paladin Codex
Quest
Ship a database-backed feature in a Next.js app
Hero
CodexThe agent that runs the quest
Class
Paladin · Full-stack websites
Weapon
GPT-6 AstraGreatsword: OpenAI's flagship in CodexMana rate 55 per 1k tokens
Charge
HighReasoning effort
Author
The curator

Docs and best-practice scrolls first, Supabase for the schema, Playwright and Next DevTools to check the result in a real browser, then Vercel and GitHub to deploy and open the PR.

Can't be appraised: Proving Grounds can't equip orbs (MCP servers).

Skill tree

  1. ScoutGather context

  2. CraftMake the thing

  3. TestCheck the work

  4. ShipDeliver it

Quest replay

Quest: "Ship a database-backed feature in a Next.js app". Four waves, then the Backlog Dragon.

Foes

  • Fog Wraith

Party · Context

  • CodexPaladin100/100

  1. Wave 1 of 4 · Scout

    The Fog Wraith steps up.

    What really happensGather context

    Codex: Context 100/100.

  2. Haze

    The Fog Wraith breathes haze. Swings start to miss.

    What really happensWithout current docs, the agent guesses at APIs that may have changed.

    Codex takes 3. Codex: Context 97/100. Codex: Haze.

  3. Context7 MCP

    An orb that fetches current library docs into the fight.

    What really happensresolve-library-id turns a name such as Next.js into a Context7 id like /vercel/next.js.

    Fog Wraith takes 49.

  4. Haze cleared

    Fresh pages burn the haze away.

    What really happensCurrent docs replace guesses with facts.

  5. Haze

    The Fog Wraith uses Haze.

    Codex takes 3. Codex: Context 94/100. Codex: Haze.

  6. Vercel React Best Practices

    A scroll of React and Next.js rules, ranked by how much they slow a page.

    What really happensRules are grouped from waterfalls and bundle size down through server work, data fetching, re-renders, and smaller JS tweaks.

    Fog Wraith takes 10.

  7. Haze cleared

    Fresh pages burn the haze away.

    What really happensCurrent docs replace guesses with facts.

  8. Haze

    The Fog Wraith uses Haze.

    Codex takes 3. Codex: Context 91/100. Codex: Haze.

  9. Supabase Postgres Best Practices

    A scroll of Postgres rules the hero reads before changing a table.

    What really happensEight groups run from query performance and connections through security and RLS, then schema, locks, and smaller topics.

    Fog Wraith takes 1 (critical hit). Fog Wraith falls.

  10. Haze cleared

    Fresh pages burn the haze away.

    What really happensCurrent docs replace guesses with facts.

  11. Wave 2 of 4 · Craft

    The Bug Slime steps up.

    What really happensMake the thing

  12. Supabase MCP Server

    An orb that opens a Supabase project so the hero can query it.

    What really happensTools include list_tables, list_migrations, get_advisors, and search_docs. Add project_ref to stay on one project.

    Bug Slime takes 45. Bug Slime falls.

  13. Wave 3 of 4 · Test

    The Bug Slime and the Flaky Wisp step up.

    What really happensCheck the work

    Flaky Wisp: Flicker.

  14. Flicker

    The Flaky Wisp uses Flicker.

    Codex takes 3. Codex: Context 88/100.

  15. Microsoft Playwright MCP

    An orb that opens a live browser so the hero can click through your app.

    What really happensEach step returns an accessibility snapshot, a structured list of page elements, so the agent works without reading pixels.

    Flaky Wisp avoids the hit.

  16. Pinned

    Pinned in place, it cannot slip away.

    What really happensA test that runs the same way each time shows the real failure.

    Bug Slime: Pinned. Flaky Wisp: Pinned.

  17. Regress

    The Bug Slime uses Regress.

    Codex takes 3. Codex: Context 85/100.

  18. Flicker

    The Flaky Wisp uses Flicker.

    Codex takes 3. Codex: Context 82/100.

  19. Next.js DevTools MCP

    An orb that reads errors from a running Next.js dev server.

    What really happensnextjs_index lists servers. nextjs_call can run get_errors, get_routes, get_logs, and get_page_metadata.

    Flaky Wisp takes 40 (critical hit). Flaky Wisp falls.

  20. Regress

    The Bug Slime uses Regress.

    Codex takes 3. Codex: Context 79/100.

  21. Greatsword

    Codex swings the Greatsword.

    Bug Slime takes 45. Bug Slime falls.

  22. Wave 4 of 4 · Ship

    The Gate Warden steps up.

    What really happensDeliver it

    Gate Warden: Barrier.

  23. Boss · Backlog Dragon

    The Backlog Dragon guards the quest: "Ship a database-backed feature in a Next.js app".

    What really happensIt stands for the whole quest, every task on the list.

  24. Scope creep

    The dragon breathes scope creep across the party.

    What really happensNew asks pile onto a task while it is underway.

    Codex takes 5. Codex: Context 74/100.

  25. Vercel MCP

    An orb that opens Vercel docs, projects, and deployment logs.

    What really happensTools cover Vercel documentation, projects, deployments, logs, and Web Analytics. Your team role limits what appears.

    Gate Warden is behind a barrier.

  26. Gate open

    The checks turn green and the gate opens.

    What really happensTests, build and review pass, so the release can go.

  27. Bar the gate

    The warden raises the gate. Nothing passes until the checks are green.

    What really happensA release waits until tests, builds and reviews pass.

  28. Claw

    The Backlog Dragon uses Claw.

    Codex takes 6. Codex: Context 68/100.

  29. GitHub MCP Server

    An orb that opens repos, issues, and pull requests.

    What really happensThe agent can list repositories, read issues and pull requests, inspect Actions runs, and review security findings.

    Gate Warden takes 49.

  30. Bar the gate

    The Gate Warden swings the gate shut.

    Codex takes 5. Codex: Context 63/100.

  31. Scope creep

    The Backlog Dragon uses Scope creep.

    Codex takes 5. Codex: Context 58/100.

  32. Greatsword

    Codex swings the Greatsword.

    Gate Warden takes 11 (critical hit). Gate Warden falls.

  33. Claw

    The Backlog Dragon uses Claw.

    Codex takes 6. Codex: Context 52/100.

  34. Greatsword

    Codex swings the Greatsword.

    Backlog Dragon takes 46.

  35. Scope creep

    The Backlog Dragon uses Scope creep.

    Codex takes 5. Codex: Context 47/100.

  36. Greatsword

    Codex swings the Greatsword.

    Backlog Dragon takes 46.

  37. Call the backlog

    The dragon roars, and another task crawls out of the backlog.

    What really happensFinishing one task often surfaces the next one on the list.

  38. Greatsword

    Codex swings the Greatsword.

    Bug Slime takes 25. Bug Slime falls.

  39. Scope creep

    The Backlog Dragon uses Scope creep.

    Codex takes 5. Codex: Context 42/100.

  40. Claw

    The Backlog Dragon uses Claw.

    Codex takes 6. Codex: Context 36/100.

  41. Greatsword

    Codex swings the Greatsword.

    Backlog Dragon takes 45.

  42. Scope creep

    The Backlog Dragon uses Scope creep.

    Codex takes 5. Codex: Context 31/100.

  43. Greatsword

    Codex swings the Greatsword.

    Backlog Dragon takes 68 (critical hit).

  44. Enraged

    Wounded, the dragon rages.

    What really happensThe last stretch of a big job is often the hardest.

    Backlog Dragon: Enraged.

  45. Claw

    The Backlog Dragon uses Claw.

    Codex takes 8. Codex: Context 23/100.

  46. Compact

    The hero rolls the scroll of memory tight and fights on.

    What really happensWhen context runs low, the agent summarizes the session so far and keeps going. Small details can get lost.

    Codex recovers 27. Codex: Context 50/100.

  47. Greatsword

    Codex swings the Greatsword.

    Backlog Dragon takes 15. Backlog Dragon falls.

  48. Quest clear

    The Backlog Dragon falls. Quest complete.

    What really happensEvery equipped spell did its part of "Ship a database-backed feature in a Next.js app".

After the battle

  • Codex took 16 turns to clear four waves.
  • Context ran low once, so the agent compacted it.
  • Codex spawns subagents when you ask for them, or when AGENTS.md or a skill tells it to.

Copy this loadout

Prompt for Codex

Paste this into Codex. It installs each spell, leaves API keys and sign-ins to you, and ends with the command that restarts it with this weapon and charge.

Set up these tools for me in Codex.
Loadout: https://vibe-rpg-simulator.vercel.app/loadouts/nextjs-feature-run/

1. Context7 MCP
   Source: https://github.com/upstash/context7
   Run:
     codex mcp add context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY

2. Vercel React Best Practices
   Source: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
   Run:
     npx skills add vercel-labs/agent-skills

3. Supabase Postgres Best Practices
   Source: https://github.com/supabase/agent-skills/blob/main/skills/supabase-postgres-best-practices/SKILL.md
   Run:
     npx skills add supabase/agent-skills --skill supabase-postgres-best-practices

4. Supabase MCP Server
   Source: https://github.com/supabase/mcp
   Run:
     codex mcp add supabase --url "https://mcp.supabase.com/mcp"
     codex mcp login supabase

5. Microsoft Playwright MCP
   Source: https://github.com/microsoft/playwright-mcp
   Run:
     codex mcp add playwright npx "@playwright/mcp@latest"

6. Next.js DevTools MCP
   Source: https://github.com/vercel/next-devtools-mcp
   Run:
     codex mcp add next-devtools -- npx next-devtools-mcp@latest

7. Vercel MCP
   Source: https://vercel.com/docs/agent-resources/vercel-mcp
   Run:
     codex mcp add vercel --url https://mcp.vercel.com

8. GitHub MCP Server
   Source: https://github.com/github/github-mcp-server
   Run:
     codex mcp add github --url https://api.githubcopilot.com/mcp/ --bearer-token-env-var GITHUB_PAT_TOKEN

How to do it:
- Skip anything that is already installed. Run the rest in order and check that each step worked.
- Never ask me to paste an API key or token into this chat. When a command needs one, such as YOUR_API_KEY, give me the full command to run in my own terminal.
- Ask me for any other value you can't work out, such as a project path.
- If a command asks a question or needs a browser sign-in or an open app, tell me what to do and wait.
- If a command fails, follow the install steps in the tool's source for Codex instead. Show me any command that is not on this list before you run it, and install nothing else.

When you're done, tell me what is ready and what still needs me. New tools load in a new session, so finish by telling me to restart Codex with GPT-6 Astra and reasoning effort high:
codex --model gpt-6-astra --config model_reasoning_effort='"high"'

Terminal commands

Or paste these lines into a terminal. The first part installs every spell for Codex; the last line starts it with the same weapon and charge. Lines starting with # are notes or commands you type inside the agent.

# Loadout: Next.js feature, start to ship
# Quest: Ship a database-backed feature in a Next.js app
# Hero: Codex · Weapon: GPT-6 Astra · Charge: High
# From https://vibe-rpg-simulator.vercel.app/loadouts/nextjs-feature-run/

# 1. Learn the spells
# Scout: Context7 MCP
codex mcp add context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY
# Scout: Vercel React Best Practices
npx skills add vercel-labs/agent-skills
# Scout: Supabase Postgres Best Practices
npx skills add supabase/agent-skills --skill supabase-postgres-best-practices
# Craft: Supabase MCP Server
codex mcp add supabase --url "https://mcp.supabase.com/mcp"
codex mcp login supabase
# Test: Microsoft Playwright MCP
codex mcp add playwright npx "@playwright/mcp@latest"
# Test: Next.js DevTools MCP
codex mcp add next-devtools -- npx next-devtools-mcp@latest
# Ship: Vercel MCP
codex mcp add vercel --url https://mcp.vercel.com
# Ship: GitHub MCP Server
codex mcp add github --url https://api.githubcopilot.com/mcp/ --bearer-token-env-var GITHUB_PAT_TOKEN

# 2. Start the hero with this weapon and charge
codex --model gpt-6-astra --config model_reasoning_effort='"high"'

Edit a copy