Menu
Capture screenshots, run visual tests, and view page designs using Playwright.
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
| 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 creationThe 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.