Menu
Capture README screenshots of the Tandem editor UI via Playwright + MCP
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Cut a Tandem release — six-surface version bump, changelog, tag, GitHub Release publish, smoke checklist
Use when tandem_* MCP tools are available, the user asks about Tandem document editing, or iterating on text collaboratively. Provides workflow guidance, annotation strategy, and tool usage patterns for the Tandem collaborative editor.
Start Tandem dev environment (server + client) and verify MCP connection
Generate a Keep a Changelog entry from git log since the last tag
Debug Playwright E2E test failures — port conflicts, server startup, test isolation, and post-mortem analysis
Run Playwright E2E tests safely (warns about dev server conflicts)
| name | screenshots |
| description | Capture README screenshots of the Tandem editor UI via Playwright + MCP |
| disable-model-invocation | true |
Take a fresh set of 8 numbered screenshots for the README documentation.
After UI changes that affect any of these areas: editor layout, side panel (annotations/chat), toolbar/tab bar, status bar, review mode, toast notifications, or the onboarding tutorial card.
The dev server MUST already be running:
npm run dev:standalone
Verify health before proceeding:
curl -sf http://127.0.0.1:3479/health && echo "Ready" || echo "Server not running — start it first"
If Tandem is already open in Chrome, the browser tab holds a stale Y.Doc in memory. On reconnect it merges old state back, clobbering fresh content. You MUST:
about:blank)Do NOT run npm run test:e2e while taking screenshots. Playwright's webServer config calls freePort() which kills processes on :3478/:3479, terminating your dev server mid-screenshot.
node scripts/take-screenshots.mjs
The script:
http://127.0.0.1:3479/mcpsample/welcome.md and creates demo annotations (highlight, comment, suggestion, flag)headless: false so you will see a Chrome window appearScreenshots are saved to docs/screenshots/:
| File | Content |
|---|---|
01-editor-overview.png | Full editor with annotations visible |
02-chat-sidebar.png | Chat panel with conversation |
03-side-panel.png | Annotation cards in side panel |
04-toolbar-actions.png | Tab bar + toolbar with text selected |
05-review-mode.png | Keyboard review mode overlay |
06-claude-presence.png | Status bar with Claude activity |
07-toast-notification.png | Toast notification popup |
08-onboarding-tutorial.png | Tutorial card for new users |
Review the screenshots in docs/screenshots/ and commit any that look correct. Annotations created by the script persist until the server restarts or documents are closed.