← All AgentBay walkthroughsAGENTBAY WALKTHROUGH · SYNTHETIC INPUT

Make pricing plans easy to compare on a phone

Make both plans easy to read on a phone, and name each choice clearly.

Tested with Codex CLI 0.163.0.

START HERE

Install this skill with AgentBay

Read web-design-guidelines SKILL.md ↗ · Pinned publisher instructions

Get the finder once. Install AgentBay for your app, then open a fresh chat.
Install this one skill. Use the button below. The prompt includes this publisher’s exact source and revision. Ask AgentBay to check the instructions, license and prerequisites before installing.
Confirm it is active. Start a fresh agent session if needed. Check that the selected skill appears in Skills, then ask your agent to read its SKILL.md and required resources. In Claude desktop, upload and enable its complete ZIP; a filesystem copy does not activate it.

To follow along, download the starter project, unzip it and open that folder in your agent. Complete the local setup below, then give your agent this task.

Here’s the task to give your agent

Want a few skills? Add them to your selection, review the exact list, and copy instructions for only those choices. Paste the commands into your terminal, then confirm the skills appear in your agent.

What you’re starting with

Both cards sit inside a 1,000px layout, the text is pale and both plan links say “Choose.” Keyboard focus is invisible. Keep the fictional prices and features while repairing the layout.

Here’s what to do

Install Vercel’s web-design-guidelines skill through AgentBay. Ask the agent to review index.html and inspect the local page. The recorded run used the included rulebook snapshot, fixed the reported defects and kept prices and features unchanged.

Check the result

Compare the before and after on a phone, then tab through the links. The cards now fit at 320 and 390px and still work at 1280px. “Choose Free” and “Choose Plus” identify their plans, meet the sample’s 44px target minimum and keep their original destinations. Contrast and focus checks pass.

Keep prices and features fixed while improving the layout. Tab through both choices at phone and desktop widths.

Start with the instructions

Read the actual web-design-guidelines SKILL.md ↗

vercel-labs/agent-skills · pinned 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62

Reviewed October 31, 2026.

Good for: Reviewing web UI against Vercel’s Web Interface Guidelines
Finding concrete focus, layout and link-label issues in a pricing page
Needs: Node 24, pinned browser-test packages and Chromium for this fixture
The upstream rulebook: the skill fetches current rules; this recorded run used a freshly fetched, hashed snapshot
Scope: Static plan comparison with synthetic prices
The rulebook is MIT licensed. The skill revision has no license file; confirm redistribution rights before copying it into another repository.

The input and actual output

Download the synthetic project and unchanged checks (ZIP). It contains no installed third-party skills. Install the pinned upstream skill separately after reviewing its license.

Before: synthetic pricing page with low contrast and mobile overflow — Before · starter defects reproduced

After: repaired synthetic pricing page with readable layout and descriptive links — After · targeted checks pass at three widths

Before on desktop · After on desktop

Inspect the actual solution: index.html.

Give each plan a link that names the choice

Two identical “Choose” links lose context in a screen-reader link list. Name the plan in the action.

Try this: Choose · Choose
Checked result: Choose Free · Choose Plus

Both exact accessible names and their #details destinations are checked in the generated page. The sample preserves the fictional prices and does not open a checkout.

Inspect the shared test receipt →

Checks performed

Unchanged browser checks pass at 320, 390 and 1280px
Body and link text meet the sample’s 4.5:1 contrast threshold; keyboard focus is visible
Source facts and local anchor destinations preserved
Choose Free and Choose Plus links have at least 44px height; fictional prices and features unchanged

Test receipt, installed-file hashes and source binding (JSON)

App test results

Runtime-specific status
Runtime	Result
Codex CLI 0.163.0	passed
Codex desktop	not tested — manual desktop check pending
Claude Code	not tested — no authenticated run recorded
Claude desktop	not tested — manual desktop check pending

Repeat it in a clean project

Unzip the input into a new directory. Follow the setup below; JavaScript examples use Node 24 and Python examples specify their packages. Install only the selected source skill at the pinned revision above. Open a fresh agent session and confirm its skill list contains the installed skill; ask it to read SKILL.md before changing the input.

npm ci
npx playwright install chromium
node verify.mjs --probe # inspect starter defects
Connect your local browser integration; ask the agent to change index.html only
npm test # unchanged targeted checks must pass

Browser integration used for the recorded run

Codex CLI could not launch Chrome from its file sandbox. We ran browser-tool.mjs separately and connected its local fixture-only MCP endpoint. It accepts no URL or command and probes only this synthetic page. It supplies before/after DOM checks and screenshots; it is not built into Codex. See the project README for setup.

Run the checks, then compare your output with the recorded result.