repro-admin
$
npx mdskill add emdash-cms/emdash/repro-adminThe 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.
SKILL.md
.github/skills/repro-adminView on GitHub ↗
--- name: repro-admin description: 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. --- # 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.
More from emdash-cms/emdash
- agent-browserBrowser automation for testing and verification. Use when you need to interact with web UIs, verify visual changes, fill forms, or capture screenshots.
- building-emdash-siteBuild and customize EmDash CMS sites on Astro. Use when creating pages, defining collections, writing seed files, querying content, rendering Portable Text, setting up menus/taxonomies/widgets, configuring deployment, or any task involving an EmDash-powered Astro site. Assumes basic Astro knowledge but provides all EmDash-specific patterns.
- creating-pluginsCreate EmDash CMS plugins with hooks, storage, settings, admin UI, API routes, and Portable Text block types. Use this skill when asked to build, scaffold, or implement an EmDash plugin, or when creating plugin features like custom block types, admin pages, or content hooks.
- diagnoseTrace from a reproduced symptom to the source code that causes it. Identify the specific file and approximate line, then rate confidence honestly.
- emdash-cliUse the EmDash CLI to manage content, schema, media, and more. Use this skill when you need to interact with a running EmDash instance from the command line — creating content, managing collections, uploading media, generating types, or scripting CMS operations.
- repro-apiReproduce an EmDash bug that lives below the browser layer -- REST handlers, CLI, MCP, migrations, schema registry, or build tooling. No agent-browser. Prefer a failing vitest test in the affected package.
- repro-publicReproduce a bug in the public-facing rendered site (not the admin). Boots a demo with bgproc, drives the public routes with agent-browser, and captures the reproduction as screenshots plus a written transcript.
- verifyDecide whether the diagnosed behaviour is actually a bug or whether the code is doing what it was designed to do. Gate the fix stage.
- wordpress-plugin-to-emdashPort a WordPress plugin to EmDash CMS. Use this skill when asked to migrate, convert, or port a WordPress plugin, theme functionality, or custom post type to EmDash. Provides concept mapping and implementation patterns.
- wordpress-theme-to-emdashPort WordPress themes to EmDash CMS. Use when asked to convert, migrate, or port a WordPress theme to EmDash, or when creating an EmDash site that should match an existing WordPress site's design. Handles design extraction, template conversion, and EmDash-specific features like menus, taxonomies, and widgets.