CtrlK
BlogDocsLog inGet started
Tessl Logo

repro-admin

Reproduce an EmDash admin UI bug. Boots a demo with bgproc, drives the admin with agent-browser using the dev-bypass session, and captures the reproduction as screenshots plus a written transcript.

69

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Reproduce: Admin UI

The issue is in the React admin under /_emdash/admin/*. You need a running demo, an authenticated session, and a way to drive the UI through the steps the reporter described. Reproduce and confirm the bug entirely through agent-browser: the durable artifact is your screenshots plus a precise, replayable transcript of the steps. Do not write Playwright (or any other) tests -- the bot cannot reliably run them here, so an unrun test is unverified guesswork. A regression test belongs to whoever lands the fix.

Hard prohibitions

  • No git commit, no git push, no branch creation that survives the workflow.
  • No GitHub writes (gh issue comment, gh pr ..., gh issue edit). Read-only gh reads only.
  • No curl to arbitrary external hosts. localhost:4321 only.
  • Do not touch any issue other than the one being investigated.
  • Do not modify Lingui catalogs (packages/admin/src/locales/*/messages.po). They are regenerated by a workflow on merge to main; touching them from the bot creates merge churn.

Procedure

  1. Re-read the issue. Note the exact steps the reporter described, the page they were on, the browser they used, and any screenshots or stack traces. If the steps reference a collection or content item, decide whether the default demo seed covers it or whether you need to create content first.
  2. Pick a demo. demos/simple is the default starting point and works for most admin reproductions. Use a more specific demo only when the issue explicitly mentions it.
  3. Start the demo with bgproc. Run bgproc start -n demo -w -- pnpm --filter ./demos/simple dev. The -w flag makes bgproc wait until the dev server opens a port before returning -- Astro listens on localhost:4321 -- so do not move on until it does. Inspect progress with bgproc status -n demo and bgproc logs -n demo. If the server never opens a port, capture bgproc logs -n demo and treat it as a setup failure, not a reproduction.
  4. Get a session. Open agent-browser open "http://localhost:4321/_emdash/api/setup/dev-bypass?redirect=/_emdash/admin". This runs migrations, creates a dev admin user, sets a session cookie, and lands you on the admin home. The endpoint is gated to import.meta.env.DEV so it only exists locally -- do not try to use it against any deployed environment.
  5. Drive the UI. Use agent-browser snapshot -i -c to get an accessibility tree with @e<n> refs. Interact with click @e<n>, fill @e<n> "text", select @e<n> "option". Refs are stable only within a snapshot -- re-snapshot after each navigation or DOM change.
  6. Screenshot at meaningful steps. Save to .bot-artifacts/step-<n>.png. Take one when you land on the page, one at the point where the reporter says the bug appears, and one of the broken state. Use --full only when the bug is below the fold. Keep file sizes reasonable.
  7. Watch for JS errors. After each interaction, run agent-browser console and agent-browser errors. Capture anything that looks related to the symptom. Console warnings about React keys or unmounted setState are almost never the bug; runtime exceptions usually are.
  8. Confirm the failure mode matches. A snapshot that shows a different broken state is not a reproduction. If you can only get the page into an adjacent broken state, say so in notes. Write down the exact replayable step sequence (URL, refs/selectors, inputs, the observed broken state) so a maintainer can follow it without you.

When to skip

Mark skipped: true and explain in notes when:

  • The bug requires a specific browser engine that agent-browser's headless Chromium cannot drive faithfully (rare; usually a Safari-specific layout quirk).
  • The bug requires OS-level interaction beyond what a headless browser supports -- native file pickers in non-trivial drag-drop, OS clipboard internals, IME flows, hardware key combinations.
  • The bug only reproduces with a real user's browser extensions or profile (e.g. a password manager or autofill that injects into inputs), which a clean headless browser does not have. Say so in notes -- this is a real bug class the bot cannot trigger.
  • The bug requires real Cloudflare Access in front of the admin. The dev-bypass path skips Access; if the symptom is specifically "Access redirects me incorrectly", you cannot reproduce it locally.
  • The reporter's repro depends on production data, third-party OAuth, or a hosted environment.
  • The demo will not boot for an unrelated reason and the failure is in setup, not in the admin code.

Output

Return:

  • Whether you reproduced the bug.
  • Whether you skipped (with reason if so).
  • The approach you used: agent-browser-only or none.
  • Notes: a short paragraph naming the demo, the URL path where the symptom appeared, the interaction sequence in plain prose, and any console or runtime errors.
  • A list of screenshots, each with the relative filename under .bot-artifacts/ and a one-line description of what it shows.
Repository
emdash-cms/emdash
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.