ワンクリックでManusで任意のスキルを実行

始める

screenshots

スター12

フォーク6

更新日2026年5月15日 20:54

Capture README screenshots of the Tandem editor UI via Playwright + MCP

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

bloknayrb

bloknayrb/tandem

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Capture README Screenshots

Take a fresh set of 8 numbered screenshots for the README documentation.

When to Use

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.

Prerequisites

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"

Critical Warnings

Stale CRDT State

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:

Navigate the Chrome tab away from Tandem (e.g., go to about:blank)
Then run the screenshot script — it creates its own browser context

Port Conflict with E2E Tests

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.

Run the Script

node scripts/take-screenshots.mjs

The script:

Connects to the MCP server at http://127.0.0.1:3479/mcp
Opens sample/welcome.md and creates demo annotations (highlight, comment, suggestion, flag)
Opens extra temp documents for the multi-tab screenshot
Captures 8 screenshots with specific viewport clips
Cleans up temp files on exit
Uses headless: false so you will see a Chrome window appear

Output

Screenshots 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

After Running

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.

このリポジトリの他の Skills

同じリポジトリ

release

bloknayrb/tandem

Cut a Tandem release — six-surface version bump, changelog, tag, GitHub Release publish, smoke checklist

2026-07-1912

tandem

bloknayrb/tandem

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.

2026-07-1712

dev-server

bloknayrb/tandem

Start Tandem dev environment (server + client) and verify MCP connection

2026-07-1712

changelog

bloknayrb/tandem

Generate a Keep a Changelog entry from git log since the last tag

2026-07-1712

e2e-debug

bloknayrb/tandem

Debug Playwright E2E test failures — port conflicts, server startup, test isolation, and post-mortem analysis

2026-05-1012

e2e

bloknayrb/tandem

Run Playwright E2E tests safely (warns about dev server conflicts)

2026-04-0112

name	screenshots
description	Capture README screenshots of the Tandem editor UI via Playwright + MCP
disable-model-invocation	true

Capture README Screenshots

Take a fresh set of 8 numbered screenshots for the README documentation.

When to Use

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.

Prerequisites

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"

Critical Warnings

Stale CRDT State

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:

Navigate the Chrome tab away from Tandem (e.g., go to about:blank)
Then run the screenshot script — it creates its own browser context

Port Conflict with E2E Tests

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.

Run the Script

node scripts/take-screenshots.mjs

The script:

Connects to the MCP server at http://127.0.0.1:3479/mcp
Opens sample/welcome.md and creates demo annotations (highlight, comment, suggestion, flag)
Opens extra temp documents for the multi-tab screenshot
Captures 8 screenshots with specific viewport clips
Cleans up temp files on exit
Uses headless: false so you will see a Chrome window appear

Output

Screenshots 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

After Running

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.