メニュー
Capture browser screenshots of Perch UI for visual verification. Use after implementing UI changes to prove they work, or when asked to verify, screenshot, or capture browser proof of a feature.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
| name | browser-proof |
| description | Capture browser screenshots of Perch UI for visual verification. Use after implementing UI changes to prove they work, or when asked to verify, screenshot, or capture browser proof of a feature. |
Capture screenshots of the running Perch app to verify UI changes. Uses Playwright (installed globally, v1.58+).
Write a .mjs script to /tmp/, run with node. Read screenshots with the Read tool (it renders images).
On this machine, playwright is installed globally, but node /tmp/script.mjs may not resolve import { chromium } from 'playwright'.
Use one of these approaches:
import { chromium } from '/Users/marcus/.local/share/mise/installs/node/22.22.0/lib/node_modules/playwright/index.mjs';
which playwright
npm root -g
Then import from <npm root -g>/playwright/index.mjs.
Prefer the absolute import path in proof scripts. It worked for live browser capture on 2026-03-15.
import { chromium } from '/Users/marcus/.local/share/mise/installs/node/22.22.0/lib/node_modules/playwright/index.mjs';
import { readFileSync } from 'fs';
const TOKEN = readFileSync('/Users/marcus/.config/perch/auth.token', 'utf8').trim();
const BASE = 'http://localhost:8090'; // production
const DEV = 'http://localhost:5174'; // vite dev (port may vary — check npm run dev output)
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1400, height: 900 } });
const page = await ctx.newPage();
// Login via API — sets session cookie on the context
await page.request.post(`${BASE}/api/login/token`, { data: { token: TOKEN } });
// Use DEV base for latest code (HMR), BASE for production build
await page.goto(`${DEV}/td?project=perch&board=bd-all-issues#board`);
await page.waitForTimeout(3000);
await page.screenshot({ path: '/tmp/proof-01-board.png' });
// Click element
await page.locator('text=Issue title').first().click();
await page.waitForTimeout(2000);
// Check visibility (with timeout + catch for safety)
const el = page.locator('.my-class').first();
const visible = await el.isVisible({ timeout: 3000 }).catch(() => false);
// Count elements
const count = await page.locator('.my-class').count();
// Type text
await page.keyboard.type('hello');
// Keyboard shortcuts
await page.keyboard.press('Escape');
await page.keyboard.press('Meta+Enter');
// Scroll
await page.evaluate(() => {
document.querySelector('.scroll-container')?.scrollTo(0, 999);
});
await browser.close();
| Page | URL |
|---|---|
| Tasks overview | /td |
| Project board | /td?project=perch&board=bd-all-issues#board |
| List view | /td?project=perch&board=bd-all-issues#list |
| Helm | /helm |
| Workspace | /workspace |
| Briefings | /briefings |
To open a detail panel, click a board card or table row — the panel slides in from the right.
/tmp/ for screenshot files — never write to the repo.waitForTimeout(2000-3000) for SPA rendering..catch(() => false) on visibility checks — prevents test crashes.npm run dev output shows the port. The API still hits localhost:8090../perch after make build to pick up changes.import { chromium } from '/Users/marcus/.local/share/mise/installs/node/22.22.0/lib/node_modules/playwright/index.mjs';
import { readFileSync } from 'fs';
const TOKEN = readFileSync('/Users/marcus/.config/perch/auth.token', 'utf8').trim();
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1400, height: 900 } });
const page = await ctx.newPage();
await page.request.post('http://localhost:8090/api/login/token', { data: { token: TOKEN } });
await page.goto('http://localhost:5174/td?project=perch&board=bd-all-issues#board');
await page.waitForTimeout(3000);
await page.screenshot({ path: '/tmp/proof-01.png' });
// Click first issue
await page.locator('tbody tr').first().click();
await page.waitForTimeout(2500);
await page.screenshot({ path: '/tmp/proof-02.png' });
await browser.close();
Then: node /tmp/my-proof.mjs and use Read tool on /tmp/proof-*.png.
SOC 職業分類に基づく
Orchestrate development work through sub-agents using td for state. Use when given a td task ID, text idea, markdown plan, or td epic to execute through plan-implement-review loops.
Set up and run autonomous overnight coding loops that process td epic tasks one at a time. Includes the loop runner, Rich TUI cockpit dashboard, and prompt template. Use when automating multi-day feature development across many tasks with td for state management.
Start a td review session and do a detailed review of open reviews. Fix obvious bugs immediately, create tasks for bigger issues, ensure test coverage, and use parallel subagents for independent reviews. Use when you want to review and triage pending td reviews.
Task management for AI agents across context windows. Use when agents need to track work, log progress, hand off state, and maintain context across sessions. Includes workflows for single-issue focus, multi-issue work sessions, and structured handoffs. Essential for AI-assisted development where context windows reset between sessions.
Create and maintain DESIGN.md files — a design system specification optimized for AI consumption. Use when creating a project's design system file, extracting tokens from existing CSS/code, auditing design consistency, or onboarding an agent to a project's visual language.
Write naturally and avoid AI-detectable patterns. Use when (1) generating any written content, (2) reviewing/editing text for AI-like patterns, (3) user asks to make writing sound more human/natural, or (4) improving text that sounds robotic or generic. Covers vocabulary, structure, tone, and formatting tells that signal AI authorship.
