菜单
Capture screenshots, run visual tests, and view page designs using Playwright.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
The brand constitution for Empathy Ledger — what it is, why it exists, who it serves, and how it sounds. Load BEFORE writing any Empathy Ledger public-facing copy (storyteller, organisation, or funder-facing), before naming or positioning anything, and before designing any storyteller-facing surface. Also load when reviewing whether existing copy or a feature is on-brand.
Run one cycle of the Empathy Ledger wiki research loop. Lints the wiki, surfaces the highest-priority gap, drafts fill content, queues the result for elder review.
Build world-class data visualizations for the Empathy Ledger platform — force-directed graphs, network maps, geographic overlays, temporal flows, and interactive dashboards using d3, recharts, leaflet, and framer-motion.
Local dev server management — start, stop, clean restart, fix cache corruption, port conflicts. Use this skill whenever the dev server needs launching or is misbehaving.
Explore EL projects, organizations, and all related content - storytellers, stories, transcripts, media, galleries, analysis. Core function for syndication API and ACT ecosystem.
AI-powered data analysis for Empathy Ledger - themes, quotes, story suggestions, transcript analysis.
| name | visual-testing |
| description | Capture screenshots, run visual tests, and view page designs using Playwright. |
Capture and compare screenshots of all pages using Playwright.
# Run all visual tests (captures screenshots)
npm run test:visual
# Update baseline snapshots
npm run test:visual:update
# Run with UI for interactive testing
npm run test:e2e:ui
# Capture specific page
npx playwright test e2e/pages/public-pages.spec.ts --grep "homepage"
e2e/
├── snapshots/ # Baseline images for comparison
├── test-results/ # Test outputs & diffs
└── visual/ # Visual test specs
// In any test file
import { test, expect } from '@playwright/test';
test('capture my page', async ({ page }) => {
await page.goto('/my-page');
await expect(page).toHaveScreenshot('my-page.png', { fullPage: true });
});
After running tests, open the HTML report:
npx playwright show-report
| Viewport | Size |
|---|---|
| Desktop | 1440×900 |
| Laptop | 1280×800 |
| Tablet | 768×1024 |
| Mobile | 375×812 |
| Topic | File |
|---|---|
| Screenshot utilities | e2e/fixtures/screenshot-utils.ts |
| Public page tests | e2e/pages/public-pages.spec.ts |
| Homepage visual tests | e2e/visual/homepage.spec.ts |
design-system-guardian - Design token enforcementdesign-component - Component creation