메뉴
Capture README screenshots of the Tandem editor UI via Playwright + MCP
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.